vue.js常用命令
1.v-model: 实现双向数据绑定
1) 由模型数据绑定到dom对象,模型数据的值改变,Dom对象的值跟着改变
2) 由Dom对象绑定到模型数据,Dom对象的值改变,模型数据的值跟着改变
注意:v-model这个命令的应用范围由局限性,只能在input输入框,select下拉框,textarea文本输入框,components(vue中的组件)
2.v-text:解决闪烁的问题
v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题
3.v-on:监听用户的事件
4.v-bind:可以将数据对象绑定在dom的任意属性中,v-bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class,但是无法双向数据绑定,只能把模型数据绑定到dom对象上
5.v-if:判断,如果要显示所有的内容,一般和v-else一起使用
6.v-for:循环调用
小demo
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
</head>
<body>
<!--body体里面的内容是MVVM中view视图部分的内容-->
<div id="app">
<!--{{name}}-->
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<input type="text" v-model="num1"/> +
<input type="text" v-model="num2"/> =
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<!--<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<span v-text="result"></span>
<button v-on:click="change">点击计算</button>
<div v-bind:style="{fontSize: size + 'px'}">java</div>
</div>
</body>
<script src="vue.min.js"></script><!--导入vue.js类库-->
<script>
//script里面编写MVVM中model和viewmodel中的内容
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
name:'好好学习,天天向上!',
num1:0,
num2:0,
result:0,
url:'https://www.baidu.com',
size:33
},
methods:{
change:function () {
this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2)
}
}
})
</script>
</html>
demo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
</head>
<body>
<!--body体里面的内容是MVVM中view视图部分的内容-->
<div id="app">
<ul>
<!--遍历list集合,只显示下标为偶数的行-->
<li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{{index}} -- {{item}}</li>
<li v-for="(value,key) in user">{{key}} -- {{value}}</li>
<li v-for="(item,index) in userList" :key="item.user.uname" v-if="item.user.age >= 6">
<div v-if="item.user.uname == 'tom'" style="background: #ff00ff">
{{index}}--{{item.user.uname}}--{{item.user.age}}
</div>
<div v-else="">
{{index}}--{{item.user.uname}}--{{item.user.age}}
</div>
</li>
</ul>
</div>
</body>
<script src="vue.min.js"></script><!--导入vue.js类库-->
<script>
//script里面编写MVVM中model和viewmodel中的内容
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
list:[1,2,3,4,5,6],
user:{uname:'tom',age:10},
userList:[
{user:{uname:'tom',age:10}},
{user:{uname:'anmy',age:6}},
{user:{uname:'jack',age:18}}
]
}
})
</script>
</html>