# Vue笔记

shijiaxin
121 阅读4分钟

vue 模版语法

Vue.js 使用了基于html的模版语法。允许开发者声明式地将Dom绑定至底层vue实例的数据，所以有vue.js的模版都是合法的html,所以能被遵循规范的浏览器和html解析器解析

差值文本

数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本差值。实例 差值文本 -->{{title}}

html特性不能用Mustache语法，应该使用V-bind指令。简写方式为 “：”。**实例

<h2 v-bind:title='title'></h2>. <h2 v:title='title'></h2>.**
列表渲染

我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法 其中items 是原数据数组 而item 则是别迭代的数组元素的别名。实例

<p. v-for='c in courses'> {{c}}   </p>
表单输入绑定

可以使用v-model指令在表单 及元素上创建双向数据绑定。他会根据控价类型自动选取正确的方式来更新元素。v-model 本质是语法糖 他将转换为输入事件以更新数据，并对一些极端场景进行一些特殊的处理。实例

  • v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

    • text 和 textarea 元素使用 value 属性和 input 事件；

    • checkbox 和 radio 使用 checked 属性和 change 事件；

    • select 字段将 value 作为 prop 并将 change 作为事件。

      实现原理

      • v-model只不过是一个语法糖而已,真正的实现靠的还是
        • v-bind:绑定响应式数据
        • 触发oninput 事件并传递数据
事件处理

可以使用v-on 指令监听Dom事件，并在触发时运行一些javascript 代码。 实例

<button v-on:click='text'></button>

** 简写方式**

<button @click='text'></button>
class与style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为他们都是属性，所以我们可以使用v-bind来处理他们：只需要通过表达式计算出字符串结果即可，不过，字符串拼接麻烦且易错。因此，再将v-bind用于class和style时，vu e.js做了专门的增强，表达好似结果的类型除了字符串之外，还可以是对象或数组

class对象语法

“<div v-bind:class="{ active: isActive }"></div>”

class数组语法

“<div v-bind:class="[activeClass, errorClass]"></div>”

style对象语法

“<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>”

style 数组语法

“<div v-bind:style="[baseStyles, overridingStyles]"></div>”、
计算属性和监听器

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，此时就可以考虑计算属性和监听器。

计算属性VS监听器

监听器更通用，理论上计算属性能实现的侦听器也能实现

处理数据的场景不同，监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数据影响

计算属性有缓存性，计算所得的值如果没有变化不会重复执行

监听器适合执行异步操作或较大开销操作的情况

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }

模版语法的实现

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少

输出vue替我们生成的渲染函数一窥究竟console.log(app.$options.render)

它长这个样子(function anonymous(){with(this){return_c('div',{attrs:{"id":"app"}},[_c('h2',{attrs:{"title":title}},[_v("\n"+_s(title)+"\n")]),_v(""),_c('input',{directives:[{name:"model",rawName:"v-model",value:(course),expression:"course"}],attrs:{"type":"text"},domProps:{"value":(course)},on:{"keydown":function(event){if(!event.type.indexOf('key')&&_k(event.keyCode,"enter",13,event.keyCode,"enter",13,event.key,"Enter"))returnnull;returnaddCourse(event)},"input":function(event){if(event.target.composing)return;course=event.target.composing)return;course=event.target.value}}}),_v(""),_c('button',{on:{"click":addCourse}},[_v("新增课程")]),_v(""),(courses.length==0)?_c('p',[_v("没有任何课程信息")]):_e(),_v(""),_c('ul',_l((courses),function(c){return_c('li',{class:{active:(selectedCourse===c)},on:{"click":function($event){selectedCourse=c}}},[_v(_s(c))])}),0)])}})

结论：Vue通过它的编译器将模板编译成渲染函数，在数据发生变化的时候再次执行渲染函数，通过对比两次执行结果得出要做的dom操作，模板中的神奇魔法得以实现。

v-model的原理简单描述

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。

v-model是什么

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

为什么使用v-model

v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

avatar
文章
阅读
粉丝