Vue模板语法

模板语法

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

一、指令

1. v-cloak 指令用法

<div v-cloak>  {{ msg }}  </div>

• 插值表达式存在的问题：“闪动”
• 如何解决该问题：使用 v-cloak 指令
• 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

2. 数据绑定指令

• v-text
  ① 相比插值表达式更加简洁
• v-html
  ① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用
• v-pre
  ① 显示原始信息，跳过编译过程（分析编译过程）

<div id="app" >
    <p v-text= "msg" >哈哈哈</p>
    <p v-html= "msg" >哈哈哈</p>
    <p v-pre= "msg" >哈哈哈</p>
</div>



<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app", //element的缩写，选择器
        data: { //定义数据模型
        	msg: "<span style='color: red'>小张</span>",
        }
	});
</script>

页面显示：

3. 双向数据绑定指令

• v-model

<input type='text' v-model='name'/>

eg:

• v-once 只编译一次

<div id="app">
	<p v-once>原始值：{{ msg }}</p>
    <p>更改值：{{ msg }}</p>
    <input type="text" v-model="msg">
</div>


<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app", //element的缩写，选择器
        data: { //定义数据模型
        	msg: "Hello World！",
        }
	});
</script>

页面效果：

二、事件绑定

eg：简单加法计算器

1. Vue如何处理事件

• v-on指令用法

<input type='button' v-on:click='num++'/>

• v-on指令简写

<input type='button' @click='num++'/>

2. 事件函数的调用方式

• 直接绑定函数名称

<button v-on:click='say'>Hello</button>

• 调用函数

<button v-on:click='say()'>Hello</button>

3. 事件函数参数传递

• 普通参数和事件对象

<button v-on:click='say("hi",$event)'>Say hi</button>

4. 事件修饰符

• .stop 阻止冒泡

<a v-on:click.stop= "handle"> 跳转 </a>

• .prevent 阻止默认行为

<a v-on:click.prevent= "handle"> 跳转 </a>

5. 按键修饰符

• .enter 回车键

<input v-on:keyup.enter='submit'>

• .delete 删除键

<input v-on:keyup.delete='submit'>

6. 自定义按键修饰符

• 全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

三、属性绑定

1. Vue如何动态处理属性

• v-bind指令用法

<a v-bind:href='url'> 跳转 </a>

• 缩写

<a :href='url'> 跳转 </a>

2. v-model 的低层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

四、样式绑定

1. class样式处理

• 对象语法

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

• 数组语法

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

2. style样式处理

• 对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

• 数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

五、分支循环结构

1. 分支结构

• v-if
• v-else
• v-else-if
• v-show

<p v-show="true">输入的成绩对应的等级是：</p>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=70">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>

2. v-if 与 v-show 的区别

• v-if 控制元素是否渲染到页面

• v-show 控制元素是否显示（已经渲染到了页面）

3. 循环结构

• v-for 遍历数组

<li v-for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}} + '------' +{{index}}</li>

• key 的作用：帮助 Vue 区分不同的元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}} + ' '------' {{index}}</li>

• v-for 遍历对象

<div v-for='(value, key, index) in object'></div>

注意

• v-if 和 v-for 最好不要结合使用 参考

<div v-if='value==12' v-for='(value, key, index) in object'></div>