Vue常用系统指令
v-text渲染普通的字符串
v-text可以将一段文本渲染到指定的元素中,例如:
<div id="app">
<!-- 所谓的指令也就是标签上的属性 -->
<!-- 如果需要把标签里面的内容完全覆盖掉,使用v-text -->
<p v-text="message">标题:</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello vue"
}
});
</script>
v-html处理html富文本字符串
差值表达式和v-text会将数据解释为纯文本,而非 HTML 。
为了输出真正的 HTML ,你需要使用 v-html 指令:
<div id="app">
<!-- 如果要渲染html字符串,使用v-html,渲染方式和v-text一样会覆盖标签的内容 -->
<p v-html="message">标题:</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: `<span style="color:red">hello vue</span>`
}
});
</script>
被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}
v-bind属性绑定
如果需要修改标签的属性值,比如图片的src
<div id="app">
<img v-bind:src="image">
<input v-bind:value="inputValue">
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
image: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
inputValue: "123"
}
});
</script>
v-for列表渲染
for循环有3中常见的结构,常用第二,三种循环
<div id="app">
<ul>
<!-- 1.简单的循环 -->
<!-- 可以使用v-for指令循环渲染出多条标签,哪个标签需要渲染出多个就给哪个标签使用v-for -->
<!-- item就是数组的当前项,可以直接在模板中渲染 -->
<!-- in是模板的关键字,不能修改 -->
<!-- goods是要循环的数据,来自于data -->
<!-- <li v-for="item in goods">
{{item}}
</li> -->
<!-- 2.在循环体中获取到下标,(常用的渲染方法,后面使用webpack时候必须要用到这种方式) -->
<!-- 使用括号声明多个变量,第二个变量就是下标 -->
<!-- <li v-for="(item, index) in goods">
{{index}} {{item}}
</li> -->
<!-- 3.循环渲染对象 -->
<li v-for="(item, key, index) in goods">
{{index}} {{key}} {{item.price}}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
// 商品数据
// 如果数据是来自于后台接口的话,是不能确定到底有多少条数据
// goods: [
// "iphoneXs",
// "huawei p30",
// "sanxing fold",
// "xiaomi 9"
// ]
goods: {
iphone: { price: 10000 },
huawei: { price: 8000 },
xiaomi: { price: 3000 },
}
}
});
</script>
v-if和v-show
v-if和v-show指令都是通过判断表达式的值来控制页面是否渲染该元素,表达式为true则显示,为false则隐藏,两个指令在隐藏元素所采用的方式有区别
<div id="app">
<!-- 使用v-if指令控制该元素是否展示,如果if的值是false,dom结构不会渲染并且不会生成在dom结构中 -->
<!-- v-if的判断表达式和普通的if判断是一样的,并不一定需要去读取data的值,可以和普通的js运算一样 -->
<!-- <p v-if="1 > 2">hello vue</p> -->
<!-- v-show的用法和v-if是一样,不一样的地方是隐藏的方式不一样 -->
<!-- v-show的隐藏方式采用css的display:none来隐藏,会生成到dom树中 -->
<p v-show="1 > 2">hello vue</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
// isShow: true
}
});
</script>
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-model双向数据绑定
双向数据绑定,
1.会读取data的值,并且会设置为value的值
2.如果修改了输入的value值,这个值会同步data
3.通常双向数据绑定只能用于有value值的标签,一般只有表单元素才有值,可以认为v-model常用于表单元素
<div id="app">
<input v-model="message"> {{message}}
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "请输入手机号码"
}
});
</script>
v-on事件绑定
v-on指令可以给元素绑定事件,可以缩写成@符号;
比如v-on:click,click是事件名,事件名和普通的dom事件名是一样的, 后面的值是事件处理函数名,事件处理函数在实例的methods配置中声明
div id="app">
<!-- v-on:click后面的值是事件处理函数名,事件在实例的methods配置中声明 -->
<!-- click其实就是普通的dom的事件名 -->
<button id="btn" v-on:click="handleClick">提交</button>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {},
// 声明模板的方法或者事件方法
methods: {
handleClick: function(){
alert(123)
}
}
});
</script>
v-on可以缩写成@符号
小案例
#app{
width:500px;
border:1px #eee solid;
padding:10px 20px;
margin:0 auto;
}
#app>div{
display: flex;
justify-content: space-between;
padding:10px 0;
border-bottom:1px #eee solid;
}
table{
width:500px;
padding:10px 0;
}
table td{
border-bottom: 1px #eee solid;
padding:10px;
}
<div id="app">
<div>当前预算金额:{{money}}</div>
<div>
<!-- 因为v-model每次输入都会同步到data,体验不好 -->
<span>请输入最新的预算金额: <input @keyup.enter="handleEnter"/></span>
</div>
<table>
<thead>
<td>id</td>
<td>型号</td>
<td>价格</td>
<td>操作</td>
</thead>
<tbody>
<!-- goods有多少条数据,就渲染出多少个tr -->
<!-- 预算金额的条件 money >= item.price -->
<tr v-for="(item, index) in goods" v-if="money >= item.price">
<td>{{index}}</td>
<td>{{item.model}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleDelete(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
// 指定模板
el: "#app",
data: {
// 商品列表
goods: [
{ model: "iphonexs", price: 10000 },
{ model: "huawei", price: 8000 },
{ model: "xiaomi", price: 6000 }
],
// 预算金额
money: 8000
},
methods: {
// 删除指定的goods商品
handleDelete: function(index){
this.goods.splice(index, 1);
},
// 预算金额输入
handleEnter: function(event){
// 获取到input的值
var value = event.target.value;
// 把这个值赋值给 money
this.money = value;
}
}
});
</script>