渐进式JavaScript 框架

易用、灵便、高效 vue官网

为什么举荐 vue

轻量级框架、简略易学、双向数据绑定、组件化、视图数据接口拆散、虚构DOM、运行熟读快

与其余 JS 框架的关联

  1. 借鉴 Angular 的模版和数据绑定技术
  2. 借鉴 React 的组件化和虚构 DOM

模版语法

插值语法

  1. 性能: 用于解析标签体内容
  2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

指令语法

  1. 性能: 解析标签属性、解析标签体内容、绑定事件
  2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析
  3. 阐明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

数据绑定

单向数据绑定

  1. 语法：v-bind:href ="xxx" 或简写为 :href
  2. 特点：数据只能从 data 流向页面

双向数据绑定

  1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
  2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

MVVM 模型

  1. M：模型(Model) ：对应 data 中的数据
  2. V：视图(View) ：模板
  3. VM：视图模型(ViewModel) ： Vue 实例对象数据代理

Vue中的数据代理：

通过 vm 对象来代理 data 对象中属性的操作（读/写）

Vue中数据代理的益处：

更加不便的操作 data 中的数据

基本原理：

通过 Object.defineProperty( ) 把 data 对象中所有属性增加到 vm 上

为每一个增加到 vm 上的属性，都指定一个getter/setter

在 getter/setter 外部去操作（读/写）data 中对应的属性

事件处理

事件的根本应用

  1. 应用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名
  2. 事件的回调须要配置在 methods 对象中，最终会在vm上
  3. methods 中配置的函数，不要用箭头函数！否则this就不是vm了
  4. methods 中配置的函数，都是被 Vue 所治理的函数，this 的指向是 vm 或 组件实例对象
  5. @click="demo" 和 @click="demo($event)" 成果统一，但后者能够传参

绑定监听

  1. v-on:xxx="fun"
  2. @xxx="fun"
  3. @xxx="fun(参数)"
  4. 默认事件形参: event
  5. 隐含属性对象: $event

事件修饰符

  1. .prevent : 阻止事件的默认行为（罕用） event.preventDefault()
  2. .stop : 阻止事件冒泡（罕用） event.stopPropagation()
  3. .capture 实现捕捉触发事件的机制，从外往里进行事件执行
  4. .self 实现只有点击以后元素时候，才会触发事件处理函数
  5. .once 事件只触发一次（罕用）

  6. .passive： 事件的默认行为立刻执行，无需期待事件回调执行结束

    .stop 和 .self 的区别： .self 只会阻止本人身上冒泡行为的触发，并不会真正阻止 冒泡的行为

键盘修饰符

Vue中罕用的按键别名
  • 回车 => enter
  • 删除 => delete (捕捉“删除”和“退格”键)
  • 退出 => esc
  • 空格 => space
  • 换行 => tab (非凡，必须配合keydown去应用)
  • 上 => up
  • 下 => down
  • 左 => left
  • 右 => right

Vue未提供别名的按键，能够应用按键原始的key值去绑定，但留神要转为kebab-case（短横线命名）

零碎润饰键（用法非凡）

ctrl、alt、shift、meta

(1).配合keyup应用：按下润饰键的同时，再按下其余键，随后开释其余键，事件才被触发。

(2).配合keydown应用：失常触发事件。

也能够应用keyCode去指定具体的按键（不举荐）

Vue.config.keyCodes.自定义键名 = 键码，能够去定制按键别名

Vue.config.keyCodes.f2 = 113;

js外面的键盘事件对应的键码：

(http://www.cnblogs.com/wuhua1...)

计算属性

定义：要用的属性不存在，要通过已有属性计算得来

原理：底层借助了Objcet.defineproperty办法提供的getter和setter

get 函数什么时候执行？

(1). 首次读取时会执行一次

(2). 当依赖的数据产生扭转时会被再次调用

劣势：与methods实现相比，外部有缓存机制（复用），效率更高，调试不便

备注：

  1. 在 computed 对象中定义计算属性
  2. 计算属性最终会呈现在vm上，间接读取应用即可
  3. 如果计算属性要被批改，那必须写set函数去响应批改，且 set 中要引起计算时依赖的数据产生扭转
  4. 在援用的时候，肯定不要加 () 去调用，间接把它 当作 一般 属性去应用就好
  5. 计算属性里的办法必须 return
data:{  firstName:'张',  lastName:'三',  x:'你好'},computed:{  fullName:{    // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值    // get什么时候调用？1.首次读取fullName时。2.所依赖的数据发生变化时。    get(){      // console.log(this) // 此处的this是 vm      return this.firstName + '-' + this.lastName    },    // set什么时候调用? 当fullName被批改时。    set(value){      const arr = value.split('-')      this.firstName = arr[0]      this.lastName = arr[1]    }  },  // 简写  fullName(){    console.log('get被调用了')    return this.firstName + '-' + this.lastName  }}

监督属性

  1. 当被监督的属性变动时, 回调函数主动调用, 进行相干操作
  2. 监督的属性必须存在，能力进行监督！！

监督的两种写法：

(1). new Vue时传入watch配置

(2). 通过vm.$watch监督

const vm = new Vue({  el:'#root',  data:{      isHot:true,  },  watch:{    // 失常写法    isHot:{      immediate:true, // 初始化时让handler调用一下      // handler什么时候调用？当isHot产生扭转时。      handler(newValue,oldValue){          console.log('isHot被批改了',newValue,oldValue)      }    },    // 简写    isHot(newValue,oldValue){      console.log('isHot被批改了',newValue,oldValue,this)    }  }})// 失常写法vm.$watch('isHot',{  immediate:true, //初始化时让handler调用一下  //handler什么时候调用？当isHot产生扭转时。  handler(newValue,oldValue){    console.log('isHot被批改了',newValue,oldValue)  }})// 简写vm.$watch('isHot',(newValue,oldValue)=>{  console.log('isHot被批改了',newValue,oldValue,this)})

深度监督

  1. Vue中的watch默认不监测对象外部值的扭转（一层）
  2. 配置 deep: true 能够监测对象外部值扭转（多层）

备注：

(1). Vue本身能够监测对象外部值的扭转，但Vue提供的watch默认不能够！

(2). 应用watch时依据数据的具体构造，决定是否采纳深度监督。

new Vue({  el:'#root',  data:{    numbers:{      a:1,      b:1,        c:{          d:{            e:100          }        }    }  },  watch:{    // 监督多级构造中某个属性的变动    'numbers.a':{      handler(){          console.log('a被扭转了')      }    },    // 监督多级构造中所有属性的变动    numbers:{        deep:true,      handler(){          console.log('numbers扭转了')      }    }  }})

computed和watch之间的区别：

  1. computed能实现的性能，watch都能够实现
  2. watch能实现的性能，computed不肯定能实现，例如：watch能够进行异步操作

两个重要的小准则：

  1. 所被 Vue 治理的函数，最好写成一般函数，这样 this 的指向才是 vm 或 组件实例对象
  2. 所有不被 Vue 所治理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是 vm 或 组件实例对象

class 与 style 绑定

class款式

字符串 实用于：类名不确定，要动静获取

<h1 :class="classObj">这是一个很大很大的H1，大到你无奈设想！！！</h1>data: {    classObj: { red: true, thin: true, italic: false, active: false }}

对象 实用于：要绑定多个款式，个数不确定，名字也不确定

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

数组 实用于：要绑定多个款式，个数确定，名字也确定，但不确定用不必

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>// 三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>// 数组嵌套对象<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
<li class="li-tab" v-for="(item,index) in tabsParam"    @click="toggleTabs(index)"    :class="[{active:index==nowIndex}, index==0?'li-tab-left':'li-tab-right']">{{item}}</li>

style款式

写CSS属性名的时候，比方font-size，应用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) 'font-size'

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个凶恶的H1</h1>
<h1 :style="h1StyleObj">这是一个凶恶的H1</h1>data: {  h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }}
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个凶恶的H1</h1>data: {  h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },  h1StyleObj2: { fontStyle: 'italic' }}

条件渲染

v-if

  • v-if="表达式"
  • v-else-if="表达式"
  • v-else="表达式"

实用于：切换频率较低的场景

特点：不展现的DOM元素间接被移除。

留神：v-if 能够和 :v-else-if、v-else一起应用，但要求构造不能被“打断”

v-show

  • v-show="表达式"

实用于：切换频率较高的场景

特点：不展现的DOM元素未被移除，仅仅是应用款式暗藏掉

留神：应用 v-if 的时，元素可能无奈获取到，而应用 v-show 肯定能够获取到

v-if：当暗藏构造时该构造会间接从整个dom树中移除

v-show：当暗藏构造时是在该构造的style中加上display:none，构造仍然保留

当须要在显示与暗藏之间切片很频繁时，应用v-show

当只有一次切换时，通过应用v-if

列表渲染

语法：v-for="(item, index) in xxx" :key="yyy"

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

管制循环次数

// 能够截取循环的数据长度，从而管制循环的次数v-for="(item,index) in domainList.slice(0, 2)"// 在标签下紧跟v-if来进行管制，这里是用索引来进行管制的，所以循环的时候记得把index这个参数加到v-for循环中v-for="(item,index) in domainList" v-if="index<3"

2.2.0+ 的版本里，当在组件中应用 v-for 时，key 当初是必须的

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的程序被扭转，Vue将不是挪动 DOM 元素来匹配数据项的程序， 而是简略复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 属性只能应用 number或string

为了给 Vue 一个提醒，以便它能跟踪每个节点的身份，从而重用和从新排序现有元素，须要为每项提供一个惟一 key 属性

key的外部原理

  1. 虚构DOM中key的作用：

    key是虚构DOM对象的标识，当数据发生变化时，Vue会依据【新数据】生成【新的虚构DOM】, 随后Vue进行【新虚构DOM】与【旧虚构DOM】的差别比拟，比拟规定如下：
  2. 比照规定：

(1). 旧虚构DOM中找到了与新虚构DOM雷同的key：
①. 若虚构DOM中内容没变, 间接应用之前的实在DOM！
②. 若虚构DOM中内容变了, 则生成新的实在DOM，随后替换掉页面中之前的实在DOM。

(2). 旧虚构DOM中未找到与新虚构DOM雷同的key
创立新的实在DOM，随后渲染到到页面。

  1. 用index作为key可能会引发的问题

    1. 若对数据进行：逆序增加、逆序删除等毁坏程序操作:        会产生没有必要的实在DOM更新 ==> 界面成果没问题, 但效率低。1. 如果构造中还蕴含输出类的DOM：        会产生谬误DOM更新 ==> 界面有问题。

  2. 开发中如何抉择key?

       1. 最好应用每条数据的惟一标识作为key, 比方id、手机号、身份证号、学号等惟一值。1. 如果不存在对数据的逆序增加、逆序删除等毁坏程序操作，仅用于渲染列表用于展现，    应用index作为key是没有问题的。

数据检测

  1. vue会监督data中所有档次的数据
  2. 如何监测对象中的数据？

通过 setter 实现监督，且要在 new Vue 时就传入要监测的数据

(1). 对象中后追加的属性，Vue默认不做响应式解决

this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} // 不是响应式

(2). 如需给后增加的属性做响应式，请应用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

  1. 如何监测数组中的数据？

通过包裹数组更新元素的办法实现，实质就是做了两件事：

(1). 调用原生对应的办法对数组进行更新

(2). 从新解析模板，进而更新页面

  1. 在Vue批改数组中的某个元素肯定要用如下办法：

1. 应用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2. Vue.set() 或 vm.$set()

特地留神：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 增加属性！！！

// push办法，向可向数组的开端增加一个或多个元素this.letters.push('aaa')this.letters.push('aaaa', 'bbbb', 'cccc')// pop(): 删除数组中的最初一个元素this.letters.pop();// shift(): 删除数组中的第一个元素this.letters.shift();// unshift(): 在数组最后面增加元素this.letters.unshift()this.letters.unshift('aaa', 'bbb', 'ccc')// splice作用: 删除元素/插入元素/替换元素// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除前面所有的元素)// 替换元素: 第二个参数, 示意咱们要替换几个元素, 前面是用于替换后面的元素// 插入元素: 第二个参数, 传入0, 并且前面跟上要插入的元素this.letters.splice(1, 3, 'm', 'n', 'l', 'x')this.letters.splice(1, 0, 'x', 'y', 'z')// sort()this.letters.sort()// reverse()this.letters.reverse()// 留神: 通过索引值批改数组中的元素 // 不会批改this.letters[0] = 'bbbbbb';this.letters.splice(0, 1, 'bbbbbb')// 能够批改set(要批改的对象, 索引值, 批改后的值)Vue.set(this.letters, 0, 'bbbbbb')

收集表单数据

若：<input type="text"/>，则 v-model 收集的是 value 值，用户输出的就是 value 值

若：<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 value 值

若：<input type="checkbox"/>

  1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  2. 配置input的value属性:

(1) v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2) v-model的初始值是数组，那么收集的的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点再收集数据

<input type="text" v-model.lazy="msg">

number：输出字符串转为无效的数字

// 留神：如果输出的第一个字是字符串，那number这个修饰符就不会失效。// 输出的第一个只能是数字或者小数点或者是正负号。<input type="text" v-model.number="msg">

trim：输出首尾空格过滤

<input type="text" v-model.trim="msg">

过滤器

定义：对要显示的数据进行特定格式化后再显示（实用于一些简略逻辑的解决）

语法：

  1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  2. 应用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

  1. 过滤器也能够接管额定参数、多个过滤器也能够串联
  2. 并没有扭转本来的数据, 是产生新的对应的数据
<div id="root">  <h2>显示格式化后的工夫</h2>  <!-- 过滤器实现 -->  <h3>当初是：{{time | timeFormater}}</h3>  <!-- 过滤器实现（传参） -->  <h3>当初是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>  <h3 :x="msg | mySlice">哈哈哈</h3></div>// 全局过滤器Vue.filter('mySlice',function(value){    return value.slice(0,4)})new Vue({  el:'#root',  data:{    time:1621561377603,    msg:'你好哈哈哈哈'  },  // 部分过滤器  filters:{    timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){      // console.log('@',value)      return dayjs(value).format(str)    }  }})

指令

内置指令

  • v-bind: 单向绑定解析表达式, 可简写为 :xxx
  • v-model: 双向数据绑定
  • v-for : 遍历数组/对象/字符串
  • v-on : 绑定事件监听, 可简写为@
  • v-if : 条件渲染（为 true, 以后标签才会输入到页面）
  • v-else: 条件渲染（为 false, 以后标签才会输入到页面）
  • v-show: 条件渲染 (通过管制 display 款式来管制显示/暗藏 )
  • v-text: 向其所在的节点中渲染文本内容，与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

  • v-html：更新元素的 innerHTML

    1. 作用：向指定节点中渲染蕴含html构造的内容。

    2. 与插值语法的区别：

         (1). v-html会替换掉节点中所有的内容，{{xx}}则不会。   (2). v-html能够辨认html构造。

3. 重大留神：v-html有安全性问题！！！！

        (1). 在网站上动静渲染任意HTML是十分危险的，容易导致XSS攻打。

(2). 肯定要在可信的内容上应用v-html，永不要用在用户提交的内容上！

  • v-cloak: 避免闪现, 与 css 配合: [v-cloak] { display: none }

    1. 实质是一个非凡属性，Vue实例创立结束并接管容器后，会删掉v-cloak属性
    2. 应用css配合v-cloak能够解决网速慢时页面展现出{{xxx}}的问题

  • v-once:

    1. v-once所在节点在首次动静渲染后，就视为动态内容了
    2. 当前数据的扭转不会引起v-once所在构造的更新，能够用于优化性能

  • v-pre:

    1. 跳过其所在节点的编译过程
    2. 可利用它跳过：没有应用指令语法、没有应用插值语法的节点，会放慢编译

自定义指令

应用 Vue.directive() 定义全局的指令 v-focus

<!--  Vue中所有的指令，在调用的时候，都以 v- 结尾 --><input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'">// 参数1： 指令的名称，在定义的时候，指令的名称后面，不须要加 v- 前缀, 但在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用// 参数2： 是一个对象，这个对象身上，有一些指令相干的函数，这些函数能够在特定的阶段，执行相干的操作    Vue.directive('focus', {          // 每当指令绑定到元素上的时候，会立刻执行，只执行一次      bind: function (el, binding) {           // binding的第二个参数,能够输出下面v-color="'green'"里的值        el.style.color = binding.value        // 留神： 在每个函数中，第一个参数，永远是 el ，示意被绑定了指令的那个元素。这个 el 参数，是一个原生的JS对象        // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 办法没有作用       //  因为，一个元素，只有插入DOM之后，能力获取焦点       // el.focus()       // 和款式相干的操作，个别都能够在 bind 执行      },           // 示意元素插入到DOM中的时候，会执行【触发1次】      inserted: function (el) {         el.focus()        // 和JS行为无关的操作，最好在 inserted 中去执行，搁置 JS行为不失效      },          // 当VNode更新的时候，会执行, 可能会触发屡次      updated: function (el) {        }    })        Vue.directive('color', {      bind: function (el, binding) {        el.style.color = binding.value      }    })

自定义公有指令

<div id="app2">    <h3 v-fontweight="900" v-fontsize="50">123</h3> </div> new Vue({      el: '#app2',      directives: {        'fontweight': { // 设置字体粗细的          bind: function (el, binding) {            el.style.fontWeight = binding.value          }        },        'fontsize': function (el, binding) { // 留神：这个 function 等同于 把 代码写到了 bind 和 update 中去          el.style.fontSize = parseInt(binding.value) + 'px'        }      }    })

生命周期

罕用的生命周期钩子
  1. mounted: 发送ajax申请、启动定时器、绑定自定义事件、订阅音讯等【初始化操作】。
  2. beforeDestroy: 革除定时器、解绑自定义事件、勾销订阅音讯等【收尾工作】。
对于销毁Vue实例
  1. 销毁后借助Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会生效，但原生DOM事件仍然无效。
  3. 个别不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。

组件

定义组件

应用Vue.extend(options)创立，其中options和new Vue(options)时传入的那个options简直一样，但也有点区别；

区别如下：

1. el不要写，最终所有的组件都要通过一个vm的治理，由vm中的el决定服务哪个容器。

2. data必须写成函数， 防止组件被复用时，数据存在援用关系。

注册组件

  1. 部分注册：靠new Vue的时候传入components选项
  2. 全局注册：靠Vue.component('组件名',组件)

编写组件标签

<school></school>

VueComponent

  1. school组件实质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
  2. 只须要写<school/>或<school></school>，Vue解析时会帮创立school组件的实例对象，即Vue执行的：new VueComponent(options)
  3. 特地留神：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

  4. VueComponent的实例对象，当前简称vc（也可称之为：组件实例对象）。

    Vue的实例对象，当前简称vm。

  5. 对于this指向：

    (1).组件配置中：

    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

    (2).new Vue(options)配置中：

    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

内置关系：VueComponent.prototype.proto === Vue.prototype，为了让组件实例对象（vc）能够拜访到 Vue原型上的属性、办法。

本文由mdnice多平台公布