前端|vue快基础知识快速入门

Vue.js快速入门 掌握HTML,CSS,JavaScript,ajax
开发工具:vscode
1、Vue基础 1.1Vue简介:

  1. JavaScript框架
  2. 简化DOM操作
  3. 响应式数据驱动(数据与页面同步更新)
https://cn.vuejs.org/
1.2第一个Vue程序
开发步骤:
  1. 导入开发版本的Vue.js
  2. 创建Vue实例对象,设置el属性和data属性
  3. 使用简洁的模板把数据渲染到页面上
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">src="https://cdn.jsdelivr.net/npm/vue">

{{message}}
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > new Vue({ el: "#app", data: { message: "你好 小白!" } })

1.3el:挂载点
el使用设置Vue实例关联(管理)的元素
问题:
  1. Vue实例的作用范围是什么呢?
    Vue管理el选项命中的元素及其内部的后代元素
  2. 是否可以使用其他的选择器?
    可以使用其他的选择器,但是建议使用ID选择器
  3. 【前端|vue快基础知识快速入门】是否可以设置其他的dom元素呢?
    可以使用其他的双标签,但是html和body不可以作为el挂在点建议使用div,div没有自身附属的样式。
1.4data:数据对象
  • Vue中用到的数据定义在data中
  • data中可以写负责数据类型的数据
  • 渲染复杂类型数据时,遵守js的语法即可
2、本地应用 vue指令是以v-开发的一组特殊语法
2.1 内容绑定,事件绑定
v-text指令
  • v-text**指令作用是:设置标签的内容textContent
  • 默认写法会替换全部内容,使用插值表达式**{{}}**可以替换指定内容
  • 内部支持写表达式
v-html指令
  • v-html的作用设置标签的innerHTML
  • 内容中有html结构会被解析为标签
v-text和v-html的区别:
  • v-text指令无论内容是什么,只会解析为文本
  • 解析文本使用v-text,需要解析html结构使用v-html
v-on指令
v-on指令的作用是为元素绑定事件
事件名不需要写on*
指令可以简写**@**
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
案例一:
v-text v-html v-on基本案例
Vue基础 - 锐客网 > * { margin: 0px; padding: 0px; }.input-num { background-color: #666; margin: 100px auto; padding: 0px; border: 0.1px solid #ccc; text-align: center; border-radius: 20px; width: 450px; box-shadow: 5px 5px 10px 1px; overflow: hidden; font-size: 26px; }.input-num span { background-color: #fff; width: 32%; display: inline-block; border: 1px solid transparent; height: 67px; line-height: 67px; }.input-num button { background-color: #666; display: inline-block; width: 32%; height: 60px; border: 1px solid transparent; outline: none; font-size: 40px; color: red; cursor: pointer; /* 去除按钮点击后的边框 */ }
>{{num}}
前端|vue快基础知识快速入门
文章图片
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > //3.创建Vue实例 new Vue({ el: "#app", data: { num: 1 }, methods: { add: function() { if (this.num >= 10) { alert("最大到10") } else { this.num++; } }, sub: function() { if (this.num <= 1) { alert("最小到1") } else { this.num--; } } } });

小结:
  • 创建Vue实例时:el(挂载点),data(数据),methods(方法)
  • v-on指令的作用是绑定事件,简写为@
  • 方法中通过this,关键字获取data中的数据
  • v-text指令的作用是:设置元素的文本值,简写为{{}}
  • v-html指令的作用是:设置元素的innerHTML
2.2显示切换,属性绑定
v-show指令 (广告、遮罩层)
  • v-show指令的作用是:根据真假切换元素的显示状态
  • 原理是修改元素的display,显示隐藏
  • 指令后面的内容,最终都会解析为布尔值
  • 值为true元素显示,值为false元素隐藏
  • 数据改变之后,对应元素的显示状态会同步更新
v-if指令
  • v-if指令的作用是:根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示
  • 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
v-bind指令
  • v-bind指令的作用是:为元素绑定属性
  • 完整写法是v-bind:属性名
  • 简写的话可以直接省略v-bind,只保留:属性名
  • 需要动态的增删class建议使用对象的方式
综合案例:图片切换
Vue基础 - 锐客网 > * { margin: 0; padding: 0; }#app { position: relative; margin: 100px auto; border: 1px solid green; width: 600px; height: 400px; }#app img { margin: 10px auto; display: block; width: 96%; height: 95%; /* background-color: yellow; */ }#app a { text-align: center; display: inline-block; text-decoration: none; border: 1px solid transparent; width: 30px; height: 100px; line-height: 100px; font-size: 45px; background-color: #ccc; color: #fff; position: absolute; }#app a:nth-of-type(1) { top: 150px; left: 20px; }#app a:nth-of-type(2) { right: 20px; top: 150px; }

2.3列表循环,表单元素绑定
v-for指令
  • v-for指令的作用是:根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是{item,index} in 数据
  • item和index可以结合其他指令一起使用
  • 数据长度的跟新会同步到页面上,是响应式的
v-on补充
  • 时间绑定的方法写成函数调用的形式,可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 时间的后面跟上.修饰符可以对时间进行限制
  • .enter可以限制触发的按键为回车
  • 事件修饰符有很多种
v-model指令
  • v-model指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据<–>表单元素的值
综合案例3:小黑记事本
功能:
  • 新增
    1. 生成列表结构(v-for)
    2. 获取用户输入(v-model)
    3. 回车,新增数据(v-on.enter 添加数据)
    1.v-for指令的作用 2.v-model指令的作用 3.v-on指令,事件修饰符 4.通过审查元素快速定位

  • 删除
  • 统计
  • 清空
  • 隐藏
3、网络应用 3.1axios
功能强大的网络请求库
语法: 1.引入标签 src="https://unpkg.com/axios/dist/axios.min.js"> 2. axios.get(地址?key=value & key2=value).then(function(reponse){},function(err){}) axios.post(地址,key=value & key2=value).then(function(reponse){},function(err){})

  • axios必须先导入才可以使用
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容,或错误信息
文档:
http://github.com/axios/axios

3.2axios+vue开发网络应用
  • axios回调函数中的this已经改变,无法访问到data中数据
  • 把this保存起来,回调函数中直接使用保存的this即可
  • 和本地一应用的最大区别就是改变了数据来源

    推荐阅读