二 Vue 模板语法

一、概要

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

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

二、插值

1、说明

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

2、文本插值

1. 说明

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

2. 示例代码

   <div id="app">
        <h1>{{title}}</h1>
   </div>
   <script>
       new Vue({
               el: "#app",
               //数据绑定区
               data: {
                   title: "就是这么简单",
               },
           });
   </script> 
   

3、HTML插值

1. 说明

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

2. 示例代码

   <div id="app">
       <p v-html="msg"></p>
   </div>
   <script>
       new Vue({
           el: "#app",
           data: {
               msg: "<span>在标签中插入的内容</span>",
           }
       })
   </script>
   

3. 渲染效果图

   

4. 注意

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

三、指令

1、说明

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

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

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

2、v-text

1. 说明

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

2. 语法格式

   v-text="val"
   

3. 参数说明

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

4. 示例代码

   <div id="app">
       <p>价格：{{ price }}</p>
       <p v-text="'价格：' + price"></p>
   </div>
   <script>
       let vm = new Vue({
           el: "#app",
           data: {
               price: 99.00,
           }
       })
   </script>
   
   

5. 注意

   • 在Vue中要想输出字符串，必须添加单引号，否则会报错。比如<h1 v-text="'文本内容：' +text"></h1>。

   • {{}}代表的就是""，所以在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. 示例代码

   <div id="app">
       <!-- 完整语法 -->
       <a v-bind:href="url" v-text="content"></a>
       <!-- 缩写 -->
       <a :href="url" v-text="content"></a>
       <img :img="img" >
   </div>
   <script>
       var vm = new Vue({
         el: '#app',
         data: {
           content:"百度一下",
           url: 'https://www.baidu.com',
           img:"http://ts.51ui.cn/pc/9-160Q2215F4.jpg"
         }
       })
     </script>
   

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. 示例代码

   <div id="app">
       <p>
           <span v-text="'价格:' + price"></span>
           <span v-text="'数量:' + num"></span>
       </p>
       <!-- 完整语法 -->
       <button v-on:click="btn">结算</button>
       <!-- 简写方式 -->
       <button @click="btn">结算</button>
       <p>总金额: {{ total }}</p>
   	<!-- 传递参数 -->
       <button @click="add(1,2)">传递参数</button>
   </div>
   
   <script>
       new Vue({
           el: '#app',
           data: {
               total: 0,
               num: 1,
               price: 20.00,
               numbers: 1
           },
           methods: {
               btn: function () {
                   this.total = this.num * this.price
               },
               add: function (n1, n2) {
                   alert(n1 + n2)
               }
           }
       })
   </script>
   

6. 事件修饰符

   • .stop 阻止冒泡，调用 event.stopPropagation()
   • .prevent 阻止默认事件，调用 event.preventDefault()
   • .capture 添加事件侦听器时使用事件捕获模式
   • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
   • .once 事件只触发一次

7. 示例代码

   <!-- 停止冒泡 -->
   <button @click.stop="do"></button>
   <!-- 阻止默认行为 -->
   <button @click.prevent="do"></button>
   <!-- 阻止默认行为，没有表达式 -->
   <form @submit.prevent></form>
   <!--  多个修饰符 -->
   <button @click.stop.prevent="do"></button>
   <!-- 点击回调只会触发一次 -->
   <button v-on:click.once="do"></button>
   

5、v-model

1. 说明

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

2. 语法格式

   v-model="val"
   

3. 参数

   • val

4. 示例代码

   <div id="app">
       <span v-text="msg"></span>
       <input type="text" v-model="msg">
   </div>
   
   <script>
       new Vue({
           el: "#app",
           data: {
               msg: "msg",
           }
       })
   </script>
   

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. 示例代码

   <!--基础使用--> 
   <div id="app">
       <!--数组-->
       <p v-for="(item,index) in nums">
           {{index + ' : ' + item}}
       </p>
       <!--对象-->
       <p v-for="(item, key, index) in user">
           {{index + ' : ' + key + ' : ' + item}}
       </p>
       <!--字符串-->
       <p v-for="item in name">
           {{item}}
       </p>
       <!--数字 遍历数字是从1遍历到指定值-->
       <p v-for="item in num">
           {{item}}
       </p>
   </div>
   <script>
       new Vue({
           el: '#app',
           data: {
               nums: [10, 20, 30, 40, 50],
               user: {name: '娇娇', age: 18},
               name: '小明',
               num: 4
           }
       })
   </script>
   

   <!--元素的渲染-->
   <div id="app">
       <ul>
           <li v-for="num in nums">
               <p v-text="num"></p>
           </li>
       </ul>
   </div>
   
   <script>
       let app = new Vue({
           el: '#app',
           data: {
               nums: [10, 20, 30, 40, 50],
           }
       })
   </script>
   

5. 增强数组更新的方法

   官方说明

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

   • push()

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

   • pop()

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

   • shift()

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

   • unshift()

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

   • splice()

     向/从数组中添加/删除

   • sort()

     对数组的元素进行排序

   • reverse()

     颠倒数组中元素的顺序

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

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

6. 关于设置key

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

   <div id="app">
       <ul>
           <!--
   		注意:
   			1> 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的
   			2> key属性尽量使用number或string
   			3> key在使用时，必须v-bind绑定
   		-->
           <li v-for="(shop,index) in shops" :key="shop.id" >
               <p v-text="index + shop.name"></p>
           </li>
       </ul>
   </div>
   <script>
       let app = new Vue({
           el: '#app',
           data: {
               shops: [
                   {
                       id: 1,
                       name: "Apple iPhone XS Max"
                   },
                   {
                       id: 2,
                       name: "小米8"
                   },
               ]
           }
       })
   

7、v-if

1. 说明

   v-if是条件渲染指令，它根据表达式的真假来删除和插入元素

2. 语法格式

   v-if="expression"
   v-else-if="expression"
   v-else
   

3. 参数说明

   • expression

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

4. 示例代码

   <div id="app">
   
       <!--登录成功后显示-->
       <div v-if="isLogin">
           <p v-text="user.name"></p>
       </div>
       <!--未登录显示-->
       <div v-else>
           <a href="#">登录</a>
           <a href="#">注册</a>
       </div>
   </div>
   
   <script>
       let app = new Vue({
           el: "#app",
           data: {
               isLogin: false,
               user: {
                   name: 'vue'
               },
           }
       })
   </script>
   
   <!-- 在控制台可以输入  app.isLogin=true -->
   

8、v-show

1. 说明

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

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

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

2. 语法格式

   v-show="expression"
   

3. 参数说明

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

4. 示例代码

   <div id="app">
       <h1 v-show="ok">条件为TRUE，输出</h1> 
       <h1 v-show="error">条件为false，不输出</h1>  
       <h1 v-show="10>5">10大于5，输出!</h1>   
       <h1 v-show="2>10">不大于10，不输出!</h1>
   </div>
   <script>
       new Vue({
         el: '#app',
         data: {
           ok: true,
           error: false
         }
       })
   </script>
   

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性能更好一点。