Vue模板语法

模板语法

一、概要

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

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

二、插值

1、说明

将数据插入到html文档中，包含 文本、html元素、元素属性等相当于我们Jquery里的DOM操作

2、文本插值

1. 说明

   文本插值中用得最多的就是用双大括号{{变量}}的形式

2. 示例代码

   
    
   {{title}}
    
     

3、HTML插值

1. 说明

   是在HTML标签中插入内容,被插入的内容都会被当做 HTML 数据绑定会被忽略。语法格式 v-html="变量" 的方式

2. 示例代码

3. 渲染效果图

   Vue

4. 注意

   你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元

三、其它指令(v-)

1、说明

指令 (Directives) 是带有 v- 前缀的特殊属性

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

语法格式 v-指令 : [参数.[修饰符] ]= "值", 大部分指令接受一个参数,值的话就是Vue实例data中的变量,也支持简单js表达式

2、v-text

1. 说明

   更新元素的的内容,作用等同于{{ }}

2. 语法格式

   v-text="val"

3. 参数说明

   对应Vue对象中的中data的属性

4. 示例代码

   
    
   价格：{{ price }}
    
   
    
    
    ​

5. 注意

   • 在Vue中要想输出字符串，必须添加单引号，否则会报错。比如

     。

   • {{}}代表的就是""，所以在v-text=""中，我们在内容里面就不需要再写{{}}了，直接写数据属性就行了。

6. 区别

   • {{text}}：将数据解析为纯文本，不能输出真正的html，在页面加载时显示{{}}，所以通常使用v-html和v-text代替，且花括号方式在以后可能被取消

   • v-html="html"：输出真正的html

   • v-text="text"：将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示{{}}

3、v-bind

1. 说明

   当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

2. 语法格式

   v-bind:property="val"
    // 或者简写方式
    :property="val"

3. 参数

   • property

     html元素的属性

   • val

     对应vue对象里的data的变量名

4. 示例代码

5. 后接值

   对于v-bind:后接的属性值，不同的表单控件是不同的，如：

   • input的checkbox，使用true-value和false-value

   • input的radio，使用pick

   • select的情况下，使用selected

   • 其他的文本类，使用value

4、v-on

1. 说明

   给元素绑定事件,绑定的事件从methods中获取.

2. 语法格式

   v-on:event="fun"
    // or
    v-on:event="fun(param,...)"
    // or 简写方式
    @event="fun"
    //绑定多个事件,多个事件以‘，’号隔开
    v-on={event:fun,event:fun,....}

3. 参数说明

   • event

     事件名

   • fun

     定义在vue对象里methods里的方法,如果方法没有参数,可以省略()

   • param

     方法中的参数

4. 备注

   支持的事件类型参考

   常见的事件有@click ，@focus，@blur，@submit，@mousemove，@mouseleave，@mouseout等

5. 示例代码

   
    
   
    
    
    
    
    结算
    
    结算
    
   小计: {{ total }}
    
    传递参数
    
    ​
    

6. 事件修饰符

   • .stop 阻止冒泡，调用 event.stopPropagation()

   • .prevent 阻止默认事件，调用 event.preventDefault()

   • .capture 添加事件侦听器时使用事件捕获模式

   • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

   • .once 事件只触发一次

7. 示例代码

5、v-model

1. 说明

   在表单元素上创建双向数据绑定, 监听用户的输入事件以更新数据

   v-model会忽略所有表单元素的value/checked/selected特性的初始值，应该通过js在组件的data中声明初始值

2. 语法格式

   v-model="val"

3. 参数

   • val

4. 示例代码

5. 修饰符

   • lazy

     v-model.lazy:自动延迟事件作用

   • number

     v-model.number:自动将用户输入的值转为Number类型

   • trim:

     v-model.trim:自动过滤用户输入的首尾空格

6、v-for

1. 说明

   当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令

   也支持用在templete（包裹元素）元素上的，以此来进行多个元素的渲染

2. 语法格式

   // 遍历数组 index 可选
    v-for = "item in items"
    v-for = "(item,[index]) in items"
    // 遍历对象
    v-for =" (item,[key],[index]) in items"

3. 参数说明

   • 括号及其内的遍历结果信息（item, key, index）

     item 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="item in items"；

   • 遍历关键词 in

     in 可以使用 of 替代，官方的说法是它是最接近 JavaScript 迭代器的语法，但其实使用上并没有任何区别；

   • 被遍历对象items

     items 是绑定在实例 data 属性上的一个属性

4. 示例代码

   
    
   
    
    
   
    {{index + ' : ' + item}}
    
    
    
   
    {{index + ' : ' + key + ' : ' + item}}
    
    
    
   
    {{item}}
    
    
    
   
    {{item}}
    
    
    

5. 增强数组更新的方法

   官方说明

   Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新

   • push()

     向数组的末尾添加一个或更多元素

   • pop()

     删除并返回数组的最后一个元素

   • shift()

     数组的第一个元素从其中删除

   • unshift()

     向数组的开头添加一个或更多元素

   • splice()

     向/从数组中添加/删除

   • sort()

     对数组的元素进行排序

   • reverse()

     颠倒数组中元素的顺序

   注意: 通过数组下标来修改或者添加是无效的，页面不会重新渲染，即使数据已经改变了。

   app.numbs.push(6)
    
   其它方法跟js的数组操作方法一样

6. 关于设置key

   使用v-for更新已渲染的元素列表时,默认使用复用策略;当列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;

8、v-show

1. 说明

   与v-if语句一样都是简单的理解都是用来做显示隐藏元素,

   vue-show通过标签display属性设置为none，控制隐藏,

   v-if动态的向DOM树内添加或者删除DOM元素

2. 语法格式

   v-show="expression"

3. 参数说明

   是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式

4. 示例代码

   
    
   条件为TRUE，输出
    
   条件为false，不输出
    
   10大于5，输出!
    
   不大于10，不输出!
    
    

5. 区别

   1、实现本质方法区别

   • vue-show本质就是标签display设置为none，控制隐藏

   • vue-if是动态的向DOM树内添加或者删除DOM元素

   2、编译的区别

   • v-show其实就是在控制css

   • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

   3、编译的条件

   • v-show都会编译，初始值为false，只是将display设为none，

   • v-if初始值为false，就不会编译了

   4、性能

   • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故在某些情况下v-show性能更好一点。

9、v-once

1. 说明

   只渲染元素和组件一次，当数据改变时，插值处的内容不会继续更新，使用了此指令的元素/组件及其所有的子节点，不会在渲染，这可以用于优化更新性能

2. 语法格式

   v-once

3. 示例代码