一.渲染
1. {{}}双大括号插值语法
2. v-text
3. v-html
<body>
<div id="app">
<p>
{{message}}
</p>
<p v-text="text">
</p>
<p v-html="title">
</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
message : "我是数据1，用{{}}渲染出来的" ,
text : "我是数据2，用v-text渲染出来的" ,
title : `<h4>我是数据3，用v-html渲染，还可以解析标签</h4>`
}
})
</script>
二、条件渲染
1. v-if
2. v-if v-else
3. v-show
4.v-if 和v-show 的区别：v-if 为 false 时此元素不存在 v-show 为 false 时 此元素为display :none
<div id="app">
<p v-if="bol">
我可以显示，因为我是true
</p>
<p v-if="boolean">
</p>
<p v-else>
我和v-if只能显示一个，因为它是false所以我显示
</p>
<p v-show="boolean">
虽然我不显示，但是我只是display:none了，所以我跟v-if 有点区别
</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
bol : true ,
boolean : false
}
})
</script>
三、循环语句
1. 数组循环
2. 对象循环
<body>
<div id="app">
<ul>
<li v-for = "(item,index) in obj">
{{index}} - {{item}}
</li>
</ul>
<ul>
<li v-for = "(item,index) in arr">
{{index}} - {{item}}
</li>
</ul>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
obj : {
name : "王思聪" ,
talk : "我超有钱的"
},
arr : ["古天乐","我超帅的"]
}
})
</script>
四、绑定属性
<body>
<div id="app">
<p v-bind:title="tit">
这是动态绑定属性
</p>
<p :title="tit">我是简写</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
tit : "我会动态绑定属性"
}
})
</script>
五、添加事件
<body>
<div id="app">
<p>
{{a}}
</p>
<p>
<button v-on:click="add">+1</button>
</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
a : 100
},
methods : {
add(){
this.a++
}
}
})
</script>
六、input双向绑定
<body>
<div id="app">
<p>
<input type="text" placeholder="请输入..." v-model="a">
</p>
<p>
{{a}}
</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
a :""
},
methods : {
}
})
</script>