1.Vue基础语法
1.1 Vue概述
1.1.1Vue是什么?
用于构建用户界面的渐进式框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
vue 的核心库只关注视图层
1.1.2Vue有哪些优点?
易用、灵活、高效 简单易上手
1.2 vue基本使用
1.2.1如何利用Vue将hello world 渲染到页面上?
- 需要提供标签用于填充数据 注意: 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据
- 引入vue.js库文件 注意:一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题
- 使用vue的语法做功能: new Vue() 创建一个Vue的实例 ,在构造函数中以对象的形式做一些配置
- 利用Vue将数据渲染到页面上,数据写在data 里面
1.2.2 Hello Vue之细节分析
- el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
- data:模型数据(值是一个对象)
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作
- 概述编译过程的概念(Vue语法→原生语法)
1.3 Vue模板语法
1.3.1 如何理解前端渲染?
把数据填充到HTML标签中:模板 + 数据 →前端渲染→静态HTML内容
1.3.2 把字符串渲染到页面上有哪些方式?
- 利用原生js拼接字符串 (代码差异大,维护困难)
- 利用模板引擎拼接 (基于模板引擎art-template,没有专门提供事件机制)
- 利用Vue插值语法
- 文档碎片 document.createDocumentFragment
- 利用es6 `` 反引号拼接字符串
1.3.3 什么是指令?
指令的本质就是自定义属性,格式以v-开始
1.3.4 为什么会有闪烁问题?
代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题
解决插值语法闪烁问题:使用v-cloak
1.3.5 数据绑定指令
1.3.6 数据响应式
1.3.7 双向数据绑定(v-model)
- m model :数据层Vue中数据层都放在data里面
- v view 视图 :Vue中view即我们的HTML页面
- vm (view-model) 控制器 将数据和视图层建立联系 :vm即Vue的实例
4、v-model的低层实现原理分析
v-bind绑定属性值,v-on处理值变化这个事件 <input v-bind:value="msg" v-on:input="msg=$event.target.value">
第一种方案 :
通过 v-on监听输入框的输入事件 将输入的值通过事件处理函数存到data中 给输入框通过v-bind 绑定属性 value 把数据渲染到页面上
第二种方案 :
通过 v-on监听输入框的输入事件 通过事件对象$event 拿到输入的值 直接存储到data中 给输入框通过v-bind 绑定属性 value 把数据渲染到页面上
1.3.8 事件绑定
2、事件函数的调用方式
- 直接绑定函数名称调用 <button v-on:click='handle1'>点击1</button>
- 调用函数的形式 <button v-on:click='handle1()'>点击1</button>
如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数。如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递, 并且事件对象的名称必须是$event
3、事件修饰符
4、按键修饰符
5、自定义按键修饰符别名
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名 ,如 Vue.config.keyCodes.f1 = 112
1.3.9 属性绑定
1、Vue中动态处理属性:v-bind 指令被用来响应地更新 HTML 属性 ,v-bind:href 可以缩写为 :href
注意:v-bind 和 v-on的区别 v-bind 绑定属性 v-on 绑定事件
2、绑定对象 :通过v-bind:class = { 键: 值 } 键 代表一个类名,如果这个值为true表示显示这个类名,如果这个值为false表示不显示这个类
注意:v-bind:class指令可以与普通的class特性共存
3、绑定数组:通过v-bind:class =[ 值1,值2 ] 值1、值2 对应 data 中的 数据
- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据
- 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来)
- 组语法可以将多个样式对象应用到同一个元素
- 也可以使用对象和数组:
1.3.10 分支循环结构
1、 分支结构⚫ v-if
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
⚫ v-else
⚫ v-else-if
⚫ v-show
⚫ v-if控制元素是否渲染到页面:v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
⚫ v-show控制元素是否显示(已经渲染到了页面):v-show本质就是标签display设置为none,控制隐藏
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点
3、循环结构
1.4 Vue常用特性
- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 生命周期
1.4.1 表单操作
2、获取复选框中的值(通过v-model):和获取单选框中的值一样 ,复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
3、获取下拉框和文本框中的值(通过v-model)
4、表单域修饰符
- .number 转换为数值:
- 注意点: 当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值 ,所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串
- .trim 自动过滤用户输入的首尾空白字符:只能去掉首尾的 不能去除中间的空格
- .lazy 将input事件切换成change事件:.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上 ,在失去焦点 或者 按下回车键时才更新
1.4.2自定义指令
1.4.3 计算属性 computed
1.4.4 侦听器 watch
1.4.5过滤器
作用:格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等
Vue.filter(‘过滤器名称’, function(value){
// 过滤器业务逻辑
})
2、过滤器可以用在两个地方:双花括号插值和v-bind表达式
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>
3、过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示 支持级联操作
filters:{
capitalize: function(){}
}
Vue.filter(‘format’, function(value, arg1){
// value就是过滤器传递过来的参数
})
<div>{{date | format(‘yyyy-MM-dd')}}</div>
1.4.6 生命周期
4、Vue实例的产生过程
① beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。
1.4.7 数组变异方法
1.4.8 替换数组
不会改变原始数组,但总是返回一个新数组
变异方法和替换数组有什么区别 :变异的方法能够实现数据更新视图自动更新 替换数组 不会修改原始数据 导致 数据改变 视图不一定更新
1.4.9 动态处理响应式数据
⚫Vue.set(vm.items, indexOfItem, newValue)
⚫ vm.$set(vm.items, indexOfItem, newValue)
① 参数一表示要处理的数组名称
② 参数二表示要处理的数组的索引
③ 参数三表示要处理的数组的值