Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();
Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置
new Vue({
//绑定挂载点
el: '#box',
//data属性: 创建数据模型:对应MVVM设计模式中的Model层
data: {
//显示一个变量
message1: 'Vue.js开发基础',
//如果变量的内容是一个有html标签的文本
message2: '<h3 style="color:red">php中文网</h3>'
}
});
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v_text/v-html</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<!--挂载点-->
<div id="box">
<!--以插值的方式显示内容-->
{{msg1}}
<p>{{msg2}}</p>
<h2 v-on:click="changeColor" :style="style + 'text-align: center;'">{{msg1}}</h2>
<!--使用模板指令v-text显示一个变量-->
<p v-text="msg1"></p>
<!--如果变量中有html标签-->
<!--v-text指定是将变量内容原样输出,不会解析文本中的html标签-->
<p v-html="msg2" ></p>
<p >{{msg1}}</p>
</div>
<script>
// console.log(new Vue());
new Vue({
el: '#box',
data: {
msg1:'欢迎学习vue.js',
msg2:'<h1 style="color: red;text-align: center;">欢迎学习vue.js</h1>',
style:'color:green;'
},
methods: {
changeColor:function () {
this.style = 'color:orange;'
}
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js双向数据绑定/侦听器</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="box">
用户名：<input type="text" v-model="username">
<p v-show="isShow">{{length}}</p>
<p v-show="isShow" >{{msg}}</p>
</div>
<script>
new Vue({
el: '.box',
data:{
username:'',
length: 0,
msg : '用户名太短',
isShow:false
},
// 侦听器:实时监测页面中数据的变化,实时更新数据模型中的属性,并完成指定的动作
watch:{
username:function () {
this.length++;
if (this.length < 6) {
this.isShow = true;
} else {
this.isShow = false;
}
}
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
