Vue.js
- 优点:体积小、运行效率高、双向数据绑定、 生态丰富、学习成本低。
运行效率高是因为基于虚拟DOM,即预先通过JavaScript进行各种计算并优化完毕后才提交DOM操作,将DOM操作变化反映到DOM树上。(对DOM树进行预处理操作,并没有真实的操作DOM)
双向绑定即通过 MVVM 思想实现数据的双向绑定。
v-model
便捷的设置和获取表单元素的值,用于双向数据绑定。
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
<div id="app">
<span>{{message}}</span><!-- 插值表达式(模板语法)获取数据 -->
<input v-model="message"/><!-- v-model指令的作用是便捷的设置和获取表单元素的值 -->
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
data:{ // model数据
message:"Hello vue!"
}
});
</script>
注:将以上代码写入body标签中并导入vue.js文件(初学者建议直接在vue官网下载vue.js文件放在指定的文件夹下即可)。
v-bind
为元素绑定属性。
<div id="app">
<font v-bind:color="col">字标签</font>
<a :href="hr">百度</a>
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
data:{ // model数据
col:"blue",
hr:"https://www.baidu.com/"
}
});
</script>
v-text与v-html
- v-text设置标签的文本内容。
- v-html设置元素的innerHTML。(会解析html中的标签)
<div id="app">
<span>{{message}} vue!</span><br /><!-- 只是插入值,不解析标签 -->
<!-- 直接覆盖标签中的内容 -->
<span v-text="message"> vue! vue!</span><br /><!-- 不能解析标签 -->
<span v-html="message"> vue!</span><!-- 解析标签 -->
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
data:{ // model数据
message:"<b>hello</b>"
}
});
</script>
v-on
用于元素绑定事件。(可以简写为@)
<div id="app">
<button v-on:click="test('v-on')">v-on</button>
<button @click="test('@')">@</button>
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
methods:{// 方法
test(a){
alert(a);// 弹框提示
}
}
});
</script>
v-show
根据真假切换元素的显示状态。(实质是修改元素的display)
<div id="app">
<span v-show="age>18">成年</span><br />
<span v-show="bol">真</span>
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
data:{ // model数据
age:12,
bol:true
}
});
</script>
F12打开Elemets进行查看。
v-if
根据表达式的真假切换元素的显示状态。(实质是操作DOM元素)
<div id="app">
<span v-if="age>18">成年</span><br />
<span v-if="bol">真</span>
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
data:{ // model数据
age:12,
bol:true
}
});
</script>
F12打开Elemets进行查看。
v-for
循环遍历数据。(常与数组结合使用)
<div id="app">
<span v-for="(item,index) in users">
{{index}},姓名:{{item.name}},年龄:{{item.age}}<br />
</span>
</div>
<script type="text/javascript">
// 创建VUE对象 viewModel
var app = new Vue({
el:"#app",// 挂载的DOM对象
data:{ // model数据
users:[
{name:"Wen",age:23},
{name:"Hua",age:20},
{name:"Jim",age:18},
{name:"Jack",age:25}
]
}
});
</script>