一、{{插值表达式}}、v-text、v-html(向HTML插值)
这里我们会用到:{{插值表达式}}、v-text、v-html
1)概述
<div id="root">
<h1>lance {{number}}</h1>
<hr />
</div>
<script>
new Vue({
el: '#root',
data: {
msg:'hello world',
number:123
}
})
</script>
“{{number}}”:我们把{{数据项名称}}叫做插值表达式。
举例:
<div id="root">
<h1>lance {{number}}</h1>
<hr />
<p v-text="number"></p>
<hr />
<p v-html="number"></p>
</div>
在
<p v-text="number"></p>
表示p中的内容由number变量决定,v-text是vue中的一个指令。
当然我们也可以使用v-html指令。
2)v-text和v-html的区别
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el: '#root',
data: {
content:'<h1>hello world</h1>'
}
})
</script>
我们通过这个例子测试出:v-text会被转义,而v-html(正常显示样式)不会被转义。
二、v-on(绑定监听)
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,
如果没有修饰符也可以省略。
1)v-on
是一个模板指令,比如
<div id="root">
<div v-on:click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
content:'hello'
},
methods: {
handleClick: function(){
alert(123);
}
}
})
</script>
给
<div v-on:click="handleClick">{{content}}</div>
标签绑定了一个click事件,在它被触发的时候就会去调用handleClick方法,这个方法
定义在vue实例当中的methods这个对象当中。
2)需求:把hello变成world?
<div id="root">
<div v-on:click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
content:'hello'
},
methods: {
handleClick: function(){
this.content = "world"
}
}
})
</script>
我们只需要在函数中,this.content去改变实例里面的数据,vue实例会监听到你数据的改变。
自动的帮你对模板进行更新,页面就会自动的跟着变化了。
所以说现在我们不是在面向dom变成而是在面向数据编程了。
3)事件绑定的简写
比如:
<div v-on:click="handleClick">{{content}}</div>
简写:
<div @click="handleClick">{{content}}</div>
所以说在之后的编程中绑定某个事件的话,我们直接使用@就可以了。
三、v-bind、v-model(属性绑定和双向数据绑定)
3.1 v-bind(属性绑定)
需求:我希望title中的提示语是可变的
<div id="root">
<div title="this is hello world">hello world</div>
</div>
<script>
new Vue({
el: '#root'
})
</script>
解决:
<div id="root">
<div title="title">hello world</div>
</div>
<script>
new Vue({
el: '#root',
data: {
title: 'this is hello world'
}
})
</script>
但是这样好像是不行的,只会显示title。那要怎么样才能做好属性的绑定呢?
v-bind:这时我们需要使用一个新的模板指令v-bind。
<div v-bind:title="title">hello world</div>
当前这个title这个属性和vue实例中title数据项性绑定,,所以v-bind:title=”title”,
双引号中的title指的就是data中的title。
2)简写
<div :title="title">hello world</div>
使用v-bind:和使用:的效果是一样的
3.2 v-model(双向数据绑定)
1)限制与用法
<input>、<select>、<textarea>、components使用
用法:在表单控件或者组件上创建双向绑定。
2)单向数据绑定
<div id="root">
<div :title="title">hello world</div>
</div>
<hr />
<input />
<div>{{content}}</div>
<script>
new Vue({
el: '#root',
data: {
title: 'this is hello world',
content: 'this is content'
}
})
</script>
数据决定页面的显示,但是页面无法决定你数据里的内容。
3)双向数据绑定
<div id="root">
<div :title="title">hello world</div>
<input :value="content" />
<div>{{content}}</div>
</div>
<hr />
<script>
new Vue({
el: '#root',
data: {
title: 'this is hello world',
content: 'this is content'
}
})
</script>
我们改变input框中的值,但data中的content数据项的内容没有发生改变。
<div id="root">
<div :title="title">hello world</div>
<!--<input v-model:value="content" />-->
<input v-model="content" />
<div>{{content}}</div>
</div>
<hr />
<script>
new Vue({
el: '#root',
data: {
title: 'this is hello world',
content: 'this is content'
}
})
</script>
四、v-if、v-show、v-else、v-else-if(判断)
4.1 v-if、v-show
1)需求
<div id="root">
<div> hello world</div>
<button>点击N下</button>
</div>
<script>
new Vue({
el: '#root'
})
</script>
效果:
当我点击按钮的时候,hello world能关闭,再次点击有可以出来。。。
2)实现
<div id="root">
<div v-if="show"> hello world</div>
<button @click="handleClick">点击N下</button>
</div>
<script>
new Vue({
el: '#root',
data: {
show: true
},
methods:{
handleClick: function(){
this.show = !this.show;
}
}
})
</script>
当然我们也可以使用v-show实现这个功能:
<div id="root">
<!--<div v-if="show"> hello world</div>-->
<div v-show="show"> hello world</div>
<button @click="handleClick">点击N下</button>
</div>
3)v-if与v-show的区别
v-show是在挂载点的节点中添加了display:none;的CSS属性。
而:v-if是直接的注释掉挂载点
分析:当我们频繁:关闭和开启某个节点的时候,性能好的应该是v-show。
因为它不会去频繁增删节点。如果不是很频繁则使用v-if。
4.2 v-else
1)限制
前一兄弟元素必须有 v-if 或 v-else-if
2)用法
为 v-if 或者 v-else-if 添加“else 块”。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
4.3 v-else-if
1)限制
前一兄弟元素必须有 v-if 或 v-else-if。
2)用法
表示 v-if 的 “else if 块”。可以链式调用。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
五、v-for(循环)
5.1 基础概念
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定
语法 alias in expression ,为当前遍历的元素提供别名:
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键):
我们去循环items这个数组,每一项我会放到item中,每一下的坐标我会放到index中去。
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供
一个 key 的特殊属性:
:key属性:可以提升每一项的渲染效率
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
5.2 实例一
html:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
js:
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
5.3 一个对象的v-for
html:
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
js:
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
结果:
你也可以提供第二个的参数为键名:
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
结果:
第三个参数为索引:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
结果: