第19章 Vue.js开发基础入门
时间：2018年10月20号 天气：晴
1,问答:什么是vue.js中的模型对象，本质是什么，如何在实例中声明的
答：vue.js类似于jQuery，本质上是js的封装库，而vue.js采用了MVVM的思想，即：Vue.js的模型对象是Model层，它的本质是JavaScript的对象数据或模型，而它的声明是在new Vue({data:{一系列数据对象}})；
2.实例演示: v-text,v-html变量渲染时的区别
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> v-text,v-html变量渲染时的区别</title>
</head>
<body>
<div class="box">
{{message}}
<br>
{{message1}}
<br>
<!--v-text与v-html的区别在于后者能解析html代码-->
<p v-text="message"></p><br>
<p v-html="message1"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
console.log(new Vue());
new Vue({
el:'.box',
data:{
message:'我是纯文本',
message1:'<p style="color: red">我是带有HTML代码的文本</p>',
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.属性绑定v-bind和事件绑定v-on的使用方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定v-bind和事件绑定v-on的使用方法</title>
</head>
<body>
<div class="box">
<p :style="style">认真学好PHP</p>
<p v-bind:style="style +';'+'font-size:1rem;'">{{message}}</p>
<h3 v-bind:style="style">{{message}}</h3>
<!--<input type="text" placeholder="点击会显示文本">-->
<button v-on:click ="input">提交</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// console.log(new Vue());
new Vue({
el: '.box',
data: {
message: '学会Vue.js的用法',
style: 'color:red',
},
methods: {
input:function () {
alert('你点击了提交按钮');}
},
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.双向数据绑定的原理与实现: v-model指令
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向数据绑定的原理与实现: v-model指令</title>
</head>
<body>
<div class="box">
<!--想实现这么一个小功能
1，当点击选择文本框的所选择的颜色，而相应的文本框全球内部字体颜色变为所选择的颜色，
2，具体实现思路：先选择点击所选择的颜色的value值-》进行字符串拼接（info='style=color:value值，'）-》数据双向绑定-》data中的color为默认。
3，问题实现不了。
-->
<!--选择颜色：<select name="" id="" v-mode="info" style="color: red">-->
<!--<option value="">请选择</option>-->
<!--<option value="">red</option>-->
<!--<option value="">pink</option>-->
<!--<option value="">yellow</option>-->
<!--<option value="">blue</option>-->
<!--</select>-->
<input type="text" placeholder="输入文本" v-model="info">
<h3>{{info}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
el:'.box',
data:{
info:'你随便写点什么'
},
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.观察者/侦听器的实现机制与实例演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者/侦听器的实现机制与实例演示</title>
</head>
<body>
<div class="box">
文本：<input type="text" placeholder="随便输如点东西" v-model="wenben">
<h4>{{length}}</h4>
<h4 v-show="show" :style="style">{{message}}</h4>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
el:'.box',
data:{
wenben:'',
length:0,
message:'字符太少了！！！',
style:'color:red',
show:'false',
},
watch:{
wenben:function () {
this.length++;
if (this.length<6) {
this.show=true;
}else {
this.show=false;
}
}
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
