将vue.js正确引入到项目中;
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>Vue导入与实例化</title>
</head>
<body>
<script src="../vue.v2.5.17.js"></script>
<script>
//vue实例化
var vm = new Vue({
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2问答:什么是vue.js中的模型对象，本质是什么，如果在实例中声明的？
vuejs模型对象就是实例化vue得到的js表达式.
3.实例演示: v-text,v-html变量渲染时的区别；
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>v-text与v-html</title>
</head>
<body>
<div id="box">
<p v-text="message1"></p>
<div v-html="message2">
</div>
</div>
<script src="../vue.v2.5.17.js"></script>
<script>
//vue实例化
new Vue({
el:'#box',
data:{
message1:'v-text内容:php中文网',
message2:'<h3 style="color:red">v-html内容</h3>'
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.属性绑定v-bind和事件绑定v-on的使用方法
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>Vue的v-bind与v-on</title>
</head>
<script src="../vue.v2.5.17.js"></script>
<body>
<div id="box">
<!--<h1 v-bind="message1"></h1>-->
<!--v-bind:属性名="属性值(变量)" v-bind可以省略用:即可-->
<p v-bind:style="red">{{message1}}</p>
<button type="button" v-on:click="alert">测试v-on</button>
</div>
<script>
//vue实例化
new Vue({
el:'#box',
data:{
message1:'php中文网',
red:'color:red'
},
methods:{
alert:function () {
alert('v-on事件弹出成功')
}
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.双向数据绑定的原理与实现: v-model指令
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>双向数据绑定的原理与实现: v-model指令</title>
</head>
<script src="../vue.v2.5.17.js"></script>
<body>
<div id="box">
<!--v-model 指令用来在 input、select、text、checkbox、radio
等表单控件元素上创建双向数据绑定，
根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。-->
<input v-model="message1">
<p>输入的内容为:{{message1}}</p>
</div>
<script>
//vue实例化
new Vue({
el:'#box',
data:{
message1:'初始值'
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6.观察者/侦听器的实现机制与实例演示
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>观察者/侦听器的实现机制与实例演示</title>
</head>
<style>
input{
width:100px;
text-align: center;
}
</style>
<body>
<div id="box">
<input type="text" v-model="num1">*
<input type="text" v-model="num2">=
<span >{{result}}</span>
</div>
<script src="../vue.v2.5.17.js"></script>
<script>
//vue实例化
new Vue({
el:'#box',
data:{
num1:1,
num2:2,
result:2
},
watch:{
num1:function (value) {
this.num1 = value;
this.result = value * this.num2;
},
num2:function (value) {
this.num2 = value;
this.result = value * this.num1;
}
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
