![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
1：将vue.js正确引入到项目中;
<!doctype html> <html lang="en"> <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正确引入and实例化</title> </head> <body> <script src="../Vue.js"></script> <script > new Vue(); </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
2：问答:什么是vue.js中的模型对象，本质是什么，如果在实例中声明的？
模型对象就是将导入的Vue.js进行实例化，然后在实例化对象中用data:{}属性，创建数据模型，就形成了模型对象。
3：实例演示: v-text,v-html变量渲染时的区别；
<!doctype html>
<html lang="en">
<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正确引入and实例化</title>
</head>
<body>
<div id="guazai">
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg1"></p>
</div>
<script src="../Vue.js"></script>
<script >
new Vue({
el:'#guazai',
data:{
msg:'大家国庆节快乐',
msg1:'<h3 style="color: olive">大家国庆节快乐</h3>'
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4：属性绑定v-bind和事件绑定v-on的使用方法
<!doctype html>
<html lang="en">
<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正确引入and实例化</title>
</head>
<body>
<div id="guazai">
<!--<h3 v-bind:style="style">{{msg}}</h3>-->
<h3 :style="style + 'font-size: 2rem;'">{{msg}}</h3>
<!--<h3 v-on:click="changmsg">{{msg}}</h3>-->
<h3 @click="changmsg">{{msg}}</h3>
</div>
<script src="../Vue.js"></script>
<script >
new Vue({
el:'#guazai',
data:{
msg:'大家国庆节快乐！',
style:'color:blue;'
},
methods:{
changmsg:function () {
this.msg = '堵车不堵心，祝大家旅途平安！'
}
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5：双向数据绑定的原理与实现: v-model指令
<!doctype html>
<html lang="en">
<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>双向数据绑定</title>
</head>
<body>
<div id="guazai">
<input type="text" v-model="info">
<h3>{{info}}</h3>
</div>
<script src="../Vue.js"></script>
<script >
new Vue({
el:'#guazai',
data:{
info:'admin'
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6：观察者/侦听器的实现机制与实例演示
<!doctype html>
<html lang="en">
<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>观察者/侦听器</title>
</head>
<body>
<div id="guazai">
用户名：<input type="text" v-model="name">
<h3>{{length}}</h3>
<h3 v-show="isshow" :style="warning">{{msg}}</h3>
</div>
<script src="../Vue.js"></script>
<script >
new Vue({
el:'#guazai',
data:{
name:'',
length:0,
msg:'用户名太短了',
isshow:false,
warning:'color:red'
},
watch:{
name:function () {
this.length++;
if (this.length <6){
this.isshow = true;
}else {
this.isshow = false;
}
}
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：Vue.js很小，很实用，是以后的秘密武器，必须要学会！