【Vue】基本交互指令

Vue

el挂载点

<div id="app">{{message}}
</div>
<script>var app = new Vue({el:"#app",data:{message:"hello"}})
</script>

• Vue实例的作用范围：管理el选项命中的元素及其内部的后代元素
• 使用其他的选择器？：可以，建议用ID选择器
• 设置其他的dom元素？：可以使用双标签，不能使用HTML和BODY

data数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据
• 渲染复杂类型数据时，要遵守js的语法

本地应用

• 通过Vue实现常见的网页效果
• Vue指令：以v-开头的一组特殊语法

v-text

作用：设置标签的内容

默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

内部支持写表达式

//全部内容
<h2 v-text="message"></h2>
//部分内容
<h2>{{message}}</h2>
//表达式，字符串拼接
<p v-text="message"+"!"></p>

v-html

作用：设置元素的innerHTML

内容中有html结构会被解析为标签

v-text无论内容是什么，只会解析为文本

解析文本使用v-text，解析html结构使用v-html

<p v-html="content"></p>
//content为超链接时，解析为超链接

v-on

作用：为元素绑定事件

事件名不需要写on

指令可以简写为：@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中的数据

<div id="app"><input type="button" value="v-on test" @click="doit">
</dive><script>var app=new Vue({el:"#app",data:{message:"vegetable"}methods:{doit:function(){alert("do it!")this.message+="!"}}})
</script>

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时，需要定义形参来接受传入的实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有多种

<input type="text" @keyup.enter="sayhello">

v-show

作用：根据真假切换元素的显示状态

原理：修改元素的display，实现显示隐藏

内容最终解析为布尔值

true——元素显示，false——元素隐藏

数据改变后，对应元素的显示状态同步更新

v-if

作用：根据表达式的真假，切换元素的显示状态

本质：通过操纵dom元素来切换显示状态

true——元素存在于dom树中，false——从dom树中移除

频繁切换使用v-show，否则使用v-if，前者切换消耗小

v-bind

作用：为元素绑定属性

完整写法是v-bind:属性名

简写是 :属性名，即省略v-bind字样

需要动态的删增class，最好使用对象的方式

<img :class="{active:isActive}" @click="toggleActive">
//对象方法<img :class="isActive ? 'active' : ''" @click="toggleActive">
//三目运算方法

v-for

作用：根据数据生成列表结构

数组经常和v-for结合使用

语法是(item,index) in 数据

item和index可以结合其他指令一起使用

<ul><li v-for="(it,index) in arr">{{index+1}} 是 {{it}}</li>
</ul>//结合其他指令
<h2 v-for="item in arr" v-bind:title="item.name">{{item.name}}
</h2>

v-model

作用：便捷地设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据<==>表单元素的值（双向修改）