1.将vue.js正确引入到项目中;
2.问答:什么是vue.js中的模型对象，本质是什么，如果在实例中声明的？
3.实例演示: v-text,v-html变量渲染时的区别；
4.属性绑定v-bind和事件绑定v-on的使用方法
5.双向数据绑定的原理与实现: v-model指令
6.观察者/侦听器的实现机制与实例演示
实例
<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js基础知识</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<!--创建挂载点-->
<div id="box">
<p>{{message1}}</p>
<p v-text="message1"></p>
<p v-html="message2"></p>
<h3 v-on:click="changeText">{{message3}}</h3>
<h4 v-model>{{message4}}</h4>
<input type="text" v-model="info">
<h3>{{info}}</h3>
<input type="text" v-model="username"> <br>
<h3>{{length}}</h3>
<h3 v-show="isShow" :style="warning">{{message5}}</h3>
</div>
<script>
new Vue({
el: '#box',
data: {
message1:'JavaScript1开发基础',
message2:'<h3 style="color:red">Vue.js开发基础</h3>',
message3:'JAVA权威指南',
message4:'我们之间有太多距离',
style:'color:yellow',
info:'html',
length:0,
message5:'用户名太短了',
username:'',
isShow:false,
warning:'color:red',
},
methods: {
changeText:function(){
this.message3='XXXXX';
}
},
watch: {
username:function () {
this.length++;
if (this.length < 6) {
this.isShow = true;
} else {
this.isShow = false;
}
}
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
