03vue模板语法

一、模板语法概述

1. 前端渲染：把数据填充到HTML标签中。
2. 前端渲染方式：

• 原生js拼接字符串（不利于维护）
• 使用前端模板引擎（art-template）
• 使用vue特有的模板语法

3. 模板语法概览

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

二、指令

• 自定义属性
• 指令的本质就是自定义属性
• 指令的格式：以v-开始（如：v-cloak）

1. v-cloak

• 插值表达式存在闪动的问题：会先原封不动的显示div中的内容，然后迅速变换成vue的内容。
• 利用v-cloak来解决
• 原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好以后再显示最后的结果
• v-cloak 指令的用法：

 1.提供样式
 [v-cloak]{
  display:none;
 }
 2.在差值表达式所在的标签中添加v-cloak指令
 3.原理： 先通过样式隐藏内容，然后在内存中进行值的替换，替换好以后再显示最后的结果

代码部分

<div id="app">
	 <div v-cloak>{{msg}}</div>
	 <div v-cloak>{{1+2}}</div>
	 <div v-cloak>{{msg+'----'+'123'}}</div>
</div>

	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
  		/*
		   v-cloak 指令的用法
		   1.提供样式
		   [v-cloak]{
		    display:none;
 		  }
 		  2.在差值表达式所在的标签中添加v-cloak指令
  		 3.原理： 先通过样式隐藏内容，然后在内存中进行值的替换，替换好以后再显示最后的结果
  		*/
 	 var vm = new Vue({
   	el:'#app', //告诉vue,你要把这个数据填充到什么位置
    		    //严格的id选择器
  	 data: {  //用于提供数据
  	  msg:'hello vue'
  	 }
 	 }); //用于存储vue的实例
 	</script>

浏览器显示

网页链接v-cloak

2. v-text

• 无闪动问题

代码部分

<div id="app">
	 <div v-cloak>{{msg}}</div>
	 <div v-text='msg'>{{1+2}}</div>
</div>

浏览器显示

网页链接v-text

3. 数据绑定指令

v-text 填充纯文本

• 相比差值更加简洁

v-html 填充HTML片段

• 存在安全问题
• 本网站内部数据可以使用，来自第三方的数据不可以使用

代码部分

<div id="app">
 <div>{{msg}}</div>
 <div v-text='msg'></div>
 <div v-html='msg1'></div>
</div>

 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
	  var vm = new Vue({
	   el:'#app', //告诉vue,你要把这个数据填充到什么位置
 	       //严格的id选择器
	   data: {  //用于提供数据
	    msg:'hello vue',
	    msg1:'<h1>HTML</h1>' //此处带了样式
	   }
	  }); //用于存储vue的实例
 </script>

浏览器部分

网址v-html

v-pre填充原始信息

• 显示原始信息，跳过编译

网址v-pre

4. 数据响应式

• 响应式：
  a. 数据的响应式：数据的变化导致页面内容的变化（在console修改数据，浏览器显示的数据会立刻发生变化）
  
  b. html5中的响应式：屏幕尺寸的变化导致页面内容的变化

• 数据绑定：将数据填充到标签中

• 数据绑定：将数据填充到标签中

v-once

• 只编译一次（显示内容以后不再具有响应式功能）：后续信息不需要再修改，可以提高性能。

三、双向数据绑定（用户的交互）

v-model

用法：

 <div>
 	 <input type="text" v-model="msg">
 </div>

• 双向数据绑定：用户修改表单输入域当中的内容，数据会发生变化；修改数据，表单中的内容也会发生变化。

1. MVVM设计思想

ModelViewView-Model

2. 事件绑定

1. V-on（Vue处理事件）

<button v-on:click='num++'>点击</button>

可简写为：

<button @click='num++'>点击</button>

2.函数调用形式

1. 直接绑定函数名称

<button @click='handle'>点击3</button>

2. 调用函数

<button @click='handle()'>点击3</button>

<div id="app">
 <div>{{num}}</div>
 <div>
  <button @click='num--'>点击</button>
  <button @click='num++'>点击1</button>
  <button @click='handle'>点击2</button>
  <button @click='handle()'>点击3</button>
 </div>
</div>

 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
  var vm = new Vue({
   el:'#app', //告诉vue,你要把这个数据填充到什么位置
        //严格的id选择器
   data: {  //用于提供数据
    num:0
   },
   methods:{
    handle:function(){
     //这里的this是Vue的实例对象
     console.log(this === vm)
     this.num++;
    }
   }
  }); //用于存储vue的实例
 </script>

3.事件函数参数传递

1. 普通函数和事件对象

事件绑定-参数传递

1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<div id="app">
 <div>{{num}}</div>
 <div>
  <button @click='num--'>点击</button>
  <button @click='num++'>点击1</button>
  <button @click='handle1'>点击2</button>
  <button @click='handle2(123,456,$event)'>点击3</button>
 </div>
</div>

 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
 /*
  事件绑定-参数传递
  1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
  2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
 */
  var vm = new Vue({
   el:'#app', //告诉vue,你要把这个数据填充到什么位置
        //严格的id选择器
   data: {  //用于提供数据
    num:0
   },
   methods:{
    handle2:function(p,q,event){
     //这里的this是Vue的实例对象
     console.log(p,q)
     console.log(event.target.innerHTML)
     this.num++;
    },
    handle1:function(event){
     console.log(event.target.innerHTML)
    }
   }
  }); //用于存储vue的实例
 </script>

4.事件修饰符

事件修饰符vue.js

.stop =>阻止冒泡

stopPropagation

handle1:function(event){
     //阻止冒泡
     //propagation：传播; 扩展; 宣传; 培养;
     event.stopPropagation();
     //未阻止冒泡时，点击按钮会因冒泡原因num++
    },
    ```

```javascript
<button @click.stop='handle1'>点击3</button>

.prevent =>阻止跳转

preventDefault

handle2:function(event){
     	event.preventDefault();
    }

4.按键修饰符