三 Vue 模板语法

目录

1.前期概要与基础
2.模板语法
3.计算属性与侦听器

一、概要

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. 渲染效果图

   
   
   image
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

.00

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. 备注
   支持的事件类型参考
   常见的事件有 @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. 示例代码