篇首语：本文由编程笔记#小编为大家整理，主要介绍了02-vue常用指令的基本使用相关的知识，希望对你有一定的参考价值。

1.1 v-on指令绑定事件&＃xff1a;v-on:事件&＃61;“事件处理程序”

1.2 &＃64;符号简写方式绑定事件&＃xff1a;&＃64;&＃43;事件&＃xff08;如&＃xff1a;&＃64;click&＃xff09;往后的程序中常用简写方式来实现事件的绑定

【说明】以上案例使用的&＃64;click来实现一个元素单击事件的绑定&＃xff0c;往后所有事件都可以使用“&＃64;&＃43;事件”这样的方式来绑定一个事件&＃xff0c;事件的实现简单而快捷。

1.3 v-show显示或隐藏指令&＃xff1a;

根据条件显示或隐藏元素&＃xff0c;元素始终会被渲染并保留在 DOM 中。v-show 只是简单地使用display切换元素的none或block

1.4 v-if条件指令

元素会根据v-if的条件&＃xff0c;在页面中对当前指令下的节点作删除或添加操作

1.5 v-bind指令&＃xff1a;动态绑定

v-bind指令可以将任何元素的属性绑定到vue上来&＃xff0c;使得属性值可以使用vue的模型变量来处理。

如&＃xff1a;使用v-bind:class来将class属性绑定到vue中&＃xff0c;根据isActive的条件来决定使用active类还是on类&＃xff0c;当isActive为true&＃xff0c;解析为active类显示&＃xff0c;反之为on类显示。

注&＃xff1a;active和on为class的值&＃xff0c;需要加引号&＃xff0c;表示这字符串显示

<div v-bind:class&＃61;"isActive?&＃39;active&＃39;:&＃39;on&＃39;">测试内容div>


v-bind还提供了冒号写法的简写方式 &＃xff1a;“:属性&＃61;值”&＃xff0c;简写方式为以后开发中的常用方式

<div :class&＃61;"isActive?&＃39;active&＃39;:&＃39;on&＃39;">测试内容div>


w3c规范的属性都可以使用v-bind或冒号方式来管理

1.6 v-for循环指令

v-for指令用于循环遍历一个列表&＃xff1a;v-for&＃61;"(item,index) in list"

注&＃xff1a;item和index作为内容输出&＃xff0c;需要使用item或index

PS:元素行内指令中的模型&＃xff08;变量&＃xff09;不需要双花括号来渲染&＃xff0c;因为指令本身具有渲染解析的功能&＃xff0c;在元素中的内容中&＃xff0c;要渲染一个模型(变量等)&＃xff0c;必需使用双花括号。

1.7 事件对象的获取

在使用&＃64;绑定一个事件的时候&＃xff0c;调用模型中的事件处理函数&＃xff0c;如果函数不使用小括号的方式调用&＃xff0c;程序会自动传递一个事件对象给函数&＃xff0c;如下

<input type&＃61;"text" &＃64;input&＃61;"handleInput">//handleInput函数调用不加小括号


methods:
handleInput(eve)
console.log(eve)//获取了事件对象
var val &＃61; eve.target.value//获取当前input的value值




1.8 通过点击一个button来获取input的值

​ 以上方式获取input的value太复杂&＃xff0c;还可以使用更简单的方式。

1.8 v-model指令&＃xff1a;双向数据绑定指令

1.10 使用v-model修改获取input的value值的例子

1.11 简易的todoList案例

• 视图渲染

<div id&＃61;"box">

<input type&＃61;"text" v-model&＃61;"inData">
<button &＃64;click&＃61;"handleClick()">addbutton>
<ul>

<li v-for&＃61;"(item,index) in dataList">
item

<button &＃64;click&＃61;"handelDel(index)">Delbutton>
li>
ul>
div>


• js

<script>
var vm &＃61; new Vue(
el:"#box",
data:
dataList:[],//数据列表
inData:""//保存input更新的数据
,
methods:
handleClick()
//点击add时获取input的value,将value内容添加到dataList列表中&＃xff0c;页面会自动渲染更新
this.dataList.push(this.inData)
//清空原内容
this.inData &＃61; ""
,
handelDel(index)
//单击删除按钮时&＃xff0c;根据index索引删除对应dataList中的数据&＃xff0c;页面会自动渲染更新
this.dataList.splice(index,1)


)
</script>


1.12 v-html指令

更新元素的 innerHTML。注意&＃xff1a;内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板&＃xff0c;可以重新考虑是否通过使用组件来替代。

<div id&＃61;"box">

html

<div v-html&＃61;"html">div>
div>
<script>
var vm &＃61; new Vue(
el:"#box",
data:
html:"

带有标签的数据模版

【说明】在网站上动态渲染任意 HTML 是非常危险的&＃xff0c;因为容易导致 XSS 攻击。只在可信内容上使用 v-html&＃xff0c;永不用在用户提交的内容上。