视频7 v-text:绑定文本，会被data中属性名与v-text的相同属性值名所绑定替换，v-text写在标签内部。也可以写在标签外面，写在外面用两个大括号绑定，即插值表达式。v-text也可以逻辑表达式，如字符串拼接
<div id="app">
<h2 v-text="message+'!'">深圳</h2>
<h2 v-text="infor+'!'">深圳</h2>
<h2>{{message+'!'}}深圳</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员!!!",
infor:"前端与移动教研室"
}
})
视频8 v-html：解析html，即设置元素的innerTHML。 v-text只能解析文本，v-html所绑定数据，则需要是HTML结构。
<div id="app">
<p v-text="content"></p>
<a v-html="content"></a>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
//content:"黑马程序员"
content:"<a href='http://qiuzhe.top/'>智慧彩云</a>"
}
})
视频9 v-on:绑定事件，如，点击事件，鼠标移入事件，双击事件 格式：v-on：事件名=方法名，方法写在vue实例methods，对方法进行定义，绑定后执行方法里的逻辑。也可以简写@事件名。 通过this关键字获取data中数据，即this.数据名。
<div id="app">
<input type="button" value="点击" v-on:click="doIt">
<input type="button" value="点击" @click="doIt">
<input type="button" value="双击" @dblclick="doIt">
<h2 @click="changeFood">{{Food}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
Food:"西兰花炒蛋"
},
methods:{
doIt:function(){
alert("做It")
},
changeFood:function(){
// console.log(this.Food);
this.Food+="好好吃！"
}
}
})
</script>
视频10 实例：计数器 功能：再1到10之间计数，小于0时提示最小啦，大于10时提示最大啦 代码：一个减按钮，一个加按钮，中间数据显示加减一个
标签 data，数据绑定。methods，事件定义绑定，事件绑定中if-else逻辑，alert，网页提示弹框
<div id="app">
<button @click="sub">-</button>
<p>{{num}}</p>
<button @click="add">+</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:"1"
},
methods:{
sub:function(){
if(this.num>0){
this.num--
}
else{
alert("最小啦，别点啦！")
}
},
add:function(){
if(this.num<10){
this.num++
}
else{
alert("最大啦，别点啦！")
}
}
}
})
</script>
