Vue入门
1.Vue的定义
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript">
function hello(){
person.sayHello();
}
//定义对象的方式一：
// var person=new Object();
// person.pid="p001";
// person.pname="jim";
// person.sayhello = function () {
// alert ("HELLO WORLD");
// };
//定义对象的方式二：
var person={
"pid":"p001",
"pname":"jim",
"sayHello": function () {
alert("hello world");
},
}
window.onload=function (){
var vue=new Vue({
});
}
</script>
</head>
<body>
<div id="div0" >
<span>HELLO</span>
<input type="button" value="打招呼" onclick="hello()"/>
</div>
</body>
</html>
2.v-bind
<!-- v-bind 表示绑定value属性，v-dind可以省略-->
<!-- v-bind 表示绑定value属性，v-dind可以省略-->
<!-- input type="text" : value="uname"-->
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
var vue=new Vue({
"el":"#div0",
data:{
msg:"hello World!!!",
uname:"张三丰"
}
});
}
</script>
<div id="div0" >
<span>{{msg}}</span>
<!-- v-bind 表示绑定value属性，v-dind可以省略-->
<input type="text" v-bind:value="uname "/>
</div>
3.v-model
<!--v-model指的是双向绑定， 也就是之前的v-bind是单向绑定，是通过msg这个变量的值来控制input输入框 现在v-model 不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值-->
<!-- :value可以省略-->
<input type="text" v-model="msg"/>
<!-- .trim可以去除收尾空格-->
<input type="text" v-model.trim="msg"/>
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
var vue=new Vue({
"el":"#div0",
data:{
msg:"hello World!!!",
}
});
}
</script>
<div id="div0" >
<span>{{msg}}</span><br/>
<!-- v-model指的是双向绑定，
也就是之前的v-bind是单向绑定，是通过msg这个变量的值来控制input输入框
现在v-model 不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值-->
<input type="text" v-model:value="msg"/>
</div>
4.v-if、v-else、v-show
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
var vue=new Vue({
"el":"#div0",
data:{
num:2
}
});
}
</script>
<div id="div0" >
<input type="text" v-model="num"/>
<!-- v-if和v-else之间不可以有其他节点-->
<div v-if="num%2==0" > </div>
<div v-else="num%2==0" > </div>
<!-- v-show 是通过dispaly这个属性来控制是否显示-->
<div v-show="num%2==0" > </div>
</div>
5.v-for
v-for表示迭代
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
var vue=new Vue({
"el":"#div0",
data:{
fruitList:[{fname:"苹果",price:5,fcount:100,remark:"苹果很好吃"},
{fname:"菠萝",price:3,fcount:120,remark:"菠萝很好吃"},
{fname:"香蕉",price:4,fcount:50,remark:"香蕉很好吃"},
{fname:"西瓜",price:6,fcount:100,remark:"西瓜很好吃"}
]
}
});
}
</script>
<div id="div0" >
<table border="1" width="400" cellpadding="4 " cellspacing="0">
<tr>
<th>名称</th>
<th>单价</th>
<th>库存</th>
<th>备注</th>
</tr>
<tr v-for="fruit in fruitList">
<td>{{fruit.fname}}</td>
<td>{{fruit.price}}</td>
<td>{{fruit.fcount}}</td>
<td>{{fruit.remark}}</td>
</tr>
</table>
</div>
6.watch 事件侦听
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
var vue=new Vue({
"el":"#div0",
data:{
num1:1,
num2:2,
num3:0
},
watch:{
num1: function (newValue) {
this.num3=parseInt( newValue)+parseInt(this.num2);
},
num2: function (newValue) {
this.num3=parseInt( newValue)+parseInt(this.num1);
},
}
});
}
</script>
<div id="div0" >
<input type="text" v-model="num1 " size="2 "/>
+
<input type="text"v-model="num2 " size="2 "/>
=
<span>{{num3}}</span>
</div>
7.vue的生命周期
//vue对象创建之前
beforeCreate
//vue对象创建之后
created
//数据装载之前
beforeMount
//数据转载完成
mounted
//数据更新之前
beforeUpdate
//数据更新完成
updated
浙公网安备 33010602011771号