1.1、vue基本语法
1.v-bind
-
v-bind:value
表示绑定value
属性,v-bind
可以省略,也就是:value
-
v-bind:value
表示单向绑定 -
{{}}
相当于innerText
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload = function() {
var vue = new Vue({
"el":"#div0",
data:{
msg: "hello world!",
uname:"张三"
}
});
}
</script>
</head>
<body>
<div id="div0">
<span>{{msg}}</span>
<!--v-bind:value表示绑定value属性,v-bind可以省略,也就是:value-->
<!--<input type="text" v-bind:value="uname"/>-->
<input type="text" :value="uname"/>
</div>
</body>
2.v-model
-
v-model:value
表示双向绑定,:value
可以省略 -
v-bind
是通过msg
这个变量的值来控制input
输入框,现在v-model
不仅msg
来控制input
输入框,反过来,input
输入框的内容也会改变msg
的值。
<div id="div0">
<span>{{msg}}</span><br/>
<!--<input type="text" v-model:value="msg"/>-->
<input type="text" v-model="msg"/>
</div>
.trim
可以去除首尾空格
<div id="div0">
<span>{{msg}}</span><br/>
<input type="text" v-model.trim="msg"/>
</div>
3.v-if
和v-else
- 两者之间不可以插入其他结点
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload = function() {
var vue = new Vue({
"el":"#div0",
data:{
num: 2
}
});
}
</script>
</head>
<body>
<div id="div0">
<input type="text" v-model="num"/>
<!--如果num为偶数,则显示该颜色,否则显示另一个颜色-->
<div v-if="num%2==0"style="width:200px;height:200px;background-color: aquamarine;"> </div>
<!--<br/> -->
<div v-else="num%2==0"style="width:200px;height:200px;background-color: aqua"> </div>
</div>
</body>
4.v-show
v-show
是通过display
属性来控制这个div
是否显示
<div id="div0">
<input type="text" v-model="num"/>
<div v-show="num%2==0" style="width:200px;height:200px;background-color: cadetblue;"> </div>
</div>
5.v-for
v-for
表示迭代
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload = function() {
var vue = new Vue({
"el":"#div0",
data:{
fruitList:[
{fname:"苹果",price:5,fcount:100,remark:"苹果很好吃"},
{fname:"香蕉",price:6,fcount:80,remark:"香蕉很好吃"},
{fname:"菠萝",price:4,fcount:120,remark:"菠萝很好吃"},
{fname:"西瓜",price:8,fcount:90,remark:"西瓜很好吃"}
]
}
});
}
</script>
</head>
<body>
<div id="div0">
<table border="1" width="400" cellpadding="4" cellspacing="0">
<tr>
<th>名称</th>
<th>单价</th>
<th>库存</th>
<th>备注</th>
</tr>
<tr align="center" v-for="fruit in fruitList">
<td>{{fruit.fname}}</td>
<td>{{fruit.price}}</td>
<td>{{fruit.fcount}}</td>
<td>{{fruit.remark}}</td>
</tr>
</table>
</div>
</body>
6.v-on:click
:实现字符串顺序反转
v-on:click
表示绑定点击事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload = function() {
var vue = new Vue({
"el":"#div0",
data:{
msg:"hello world!"
},
methods:{
myReverse:function () {
//将msg先以""分割,再反转,最后再以""拼接
this.msg = this.msg.split("").reverse().join("");
}
}
});
}
</script>
</head>
<body>
<div id="div0">
<span>{{msg}}</span><br/>
<!--v-on:click 表示绑定点击事件-->
<input type="button" value="反转" v-on:click="myReverse"/>
</div>
</body>
v-on
可以省略,变成@click
<div id="div0">
<span>{{msg}}</span><br/>
<!--v-on可以省略,变成@click-->
<!--<input type="button" value="反转" v-on:click="myReverse"/>-->
<input type="button" value="反转" @click="myReverse"/>
</div>
6.watch
:侦听属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload = function() {
var vue = new Vue({
"el":"#div0",
data: {
num1: 1,
num2: 2,
num3: 0
},
watch:{
//侦听属性num1和num2
//当num1的值有改动时,需要调用后面定义的方法,newValue指的是num1的新值
num1:function (newValue) {
this.num3 = parseInt(newValue) + parseInt(this.num2);
},
num2:function (newValue) {
this.num3 = parseInt(this.num1) + parseInt(newValue);
}
}
});
}
</script>
</head>
<body>
<div id="div0">
<input type="text" v-model:value="num1" size="2"/>
+
<input type="text" v-model:value="num2" size="2"/>
=
<span>{{num3}}</span>
</div>
</body>
2.2、Vue对象的生命周期
代码演示:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload = function() {
var vue = new Vue({
"el":"#div0",
data: {
msg:1
},
methods:{
changeMsg:function (){
this.msg = this.msg + 1;
}
},
/*vue对象创建之前*/
beforeCreate:function () {
console.log("beforeCreate:vue对象创建之前......");
console.log("msg:" + this.msg);
},
/*vue对象创建完成*/
created:function () {
console.log("created:vue对象创建完成......");
console.log("msg:" + this.msg);
},
/*数据装载之前*/
beforeMount:function (){
console.log("beforeMount:数据装载之前......");
console.log("span:" + document.getElementById("span").innerText);
},
/*数据装载完成*/
mounted:function (){
console.log("mounted:数据装载完成......");
console.log("span:" + document.getElementById("span").innerText);
},
/*数据更新之前*/
beforeUpdate:function (){
console.log("beforeUpdate:数据更新之前......");
console.log("msg:" + this.msg);
console.log("span:" + document.getElementById("span").innerText);
},
/*数据更新完成*/
updated:function (){
console.log("updated:数据更新完成......");
console.log("msg:" + this.msg);
console.log("span:" + document.getElementById("span").innerText);
}
});
}
</script>
</head>
<body>
<div id="div0">
<span id="span">{{msg}}</span><br/>
<input type="button" value="改变msg的值" @click="changeMsg">
</div>
</body>
演示结果: