这一节课主要讲的是vue.js的开发基础，主要内容有vue.js的导入与实例化，挂载点与变量的渲染，模板渲染属性添加与事件方法，模型数据与页面的双向绑定，倾听器对页面的变化做出响应
什么是vue.js中的模型对象，本质是什么，如何在实例中声明的？
vue.js是一个用来快速构造Web界面的javascri库,通过简洁的API提供高效的数据双向绑定和灵活的组件式开发系统。Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();
代码
实例
<!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>Document</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="box">
{{message1}}
<p v-text="message1"></p>
<p v-html="message2"></p>
</div>
<script>
new Vue({
el:'#box',
data:{
message1:'php',
message2:'<h3>php</h3>'
}
})
</script>
</body>
</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>Document</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="box">
<h2 v-bind:style="style">{{message}}</h2>
<h2 :style="style1">{{message}}</h2>
<h2 v-on:click="change">{{message}}</h2>
</div>
<script>
new Vue({
el:'#box',
data:{
message:'学习基础',
style:'color:red',
style1:'color:blue'
},
methods:{
change:function () {
this.message="vue.js学习基础"
}
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
![[D[N61GVUM8`J6]7~Q~HHQ4.png](https://img.php.cn//upload/image/348/150/611/1538276930239259.png "1538276930239259.png")
代码
实例
<!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>Document</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
<script>
new Vue({
el:'#box',
data:{
info:'123',
}
})
</script>
</body>
</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>Document</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="info">
<p>{{length}}</p>
<p v-show="isshow" :style="warning">{{message}}</p>
</div>
<script>
new Vue({
el:'#box',
data:{
info:'',
length:'0',
message:'用户名太短',
isshow:false,
warning:'color:red'
},
watch:{
info:function () {
this.length++;
if(this.length<6){
this.isshow=true;
}else {
this.isshow=false;
}
}
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
![5{NR[V9M]WZJ85((LSVUGQ7.png](https://img.php.cn//upload/image/366/904/575/1538276984416914.png "1538276984416914.png")
总结
1、Vue.js是一个用来快速构造Web界面的javascri库,通过简洁的API提供高效 的数据双向绑定和灵活的组件式开发系统。
2、基本术语:1. 实例: Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue(); 2. 实例参数: Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置;3. 挂载点: Vue实例的作用域,本质上就是通过css选择器获取到的页面元素;4. 模板: 带有html标签的字符串;5. 值/变量: 挂载点中的文本内容;6. 属性: 描述模板或html标签;7. 事件: 模板或元素上发生的系统或用户事件,例如点击,移动等;