- v-model 通常实现一些表单数据的双向绑定
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app4">
{{price}}<br>
<input v-model="price"><!-- 下行注释的语法糖 -->
<!-- <input :value="price" @input="price = $event.target.value"> -->
</div>
<script>
new Vue({
el: '#app4',
data: {
price: '20'
}
});
</script>
</body>
- {{$data|json}}取出data的数据并格式化输出
- computed对属性值进行计算,通常处理一些需要逻辑处理的属性值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app4">
{{price}}<br>
level:{{level}}
<input v-model="price">
</div>
<script>
new Vue({
el: '#app4',
data: {
price: '20'
}
computed:{
level:function(){
if(this.price>=100){
return 'vip会员'
}
return '普通会员'
}
}
});
</script>
</body>
-
events
绑定点击触发事件,点击数字加1<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <p>{{price}}</p> <input type="button" @click="clickbutton"> </div> <script> new Vue({ el:"#app", data:{ price: 0, }, methods:{ clickbutton:function(){ this.price+=1 }, }, }) </script> </body> </html>
-
component
(1)提供代码复用<html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <p>{{price}}</p> <input type="button" @click="clickbutton"> <conter></conter> <conter></conter> <conter></conter> <conter></conter> </div> <script> Vue.component( 'conter',{ template:'<h1>helloworld</h1>', } ) new Vue({ el:"#app", data:{ price: 0, }, methods:{ clickbutton:function(){ this.price+=1 }, }, }) </script> </body> </html>
(2)组件化标签有变量的情况
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<input type="button" @click="clickbutton">
<conter></conter>
<conter></conter>
</div>
<template id="counter-templet">
<h1>helloworld</h1>
<button @click="count+=1">add{{count}}</button>
</template>
<script>
Vue.component(
'conter',{
template:'#counter-templet',
//
data:function () {
return {count:0}
}
}
)
new Vue({
el:"#app",
})
</script>
</body>
</html>
(3)组件中的props,实现组件具有不同的属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<input type="button" @click="clickbutton">
<conter heading="like" color="red"></conter>
<conter heading="dislike" color="blue"></conter>
</div>
<template id="counter-templet">
<h1>helloworld</h1>
<button @click="count+=1" style="background-color:{{color}}">{{heading}}{{count}}</button>
</template>
<script>
Vue.component(
'conter',{
template:'#counter-templet',
data:function () {
return {count:0}
},
props:['heading','color'],
}
)
new Vue({
el:"#app",
})
</script>
</body>
</html>
-
v-for相关
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <style> .compl{ text-decoration: line-through; } </style> <div id="app"> <ul> <li @click=" change(task)" :class="{'compl':task.compl}" v-for="task in tasks">{{task.body}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ tasks:[ {body:'go to the movie',compl:false}, {body:'leanr vue.js',compl:true}, {body:'go to the shop',compl:false}, ] }, methods:{ change:function (task){ console.log(task.compl) task.compl = ! task.compl } } }) </script> </body> </html>