目录
1、什么是Vue.js
2、Vue的优点
3、Vue的安装
4、Vue程序
5、Vue指令
代码演示:
6、Vue实例的生命周期
1、什么是Vue.js
Vue (读音 /vjuː /,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三大主流框架!
2、Vue的优点
-
体积小:压缩后33K
-
高效率:基于虚拟dom,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,最后在计算完毕才真正将DOM操作提交。
-
双向数据绑定,简化Dom操作:通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上
-
生态丰富,学习成本低
3、Vue的安装
直接用<script>引入
下载 Vue.js 并导入 <script src="js/v2.6.10/vue.min.js"></script> 文件
4、Vue程序
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><body><!-- 创建一个标签{{message}} 插入一个值,不影响标签中的其他内容 --><!-- v-html="message”,v-text="message”会覆斋标签中其他内容{{message}},v-text="message”不能解析内容中html频签v-html="message”可以解析内容中html标签--><div id="app"><p>{{message}} aaaaa</p><p v-html="message">bbbbb</p><p v-text="message">aaaa</p></div><script>// 创建一个vue对象var app=new Vue({el:'#app',data:{message: '<b>hello Vue!</b>'}})</script></body>
</html>
5、Vue指令
Vue指令 | 作用 |
v-text | 设置标签的文本内容。 默认写法会替换全部内容,使用差值表达式可以提高指定内容。 |
v-html | 设置元素的innerHTML 内容中有html结构会被解析为标签 |
v-on | 元素绑定事件 事件名不需要写on指令可以写成@ 绑定的方法定义在methods属性中,可以传入自定义参数 |
v-model | 便捷的设置和获取表单元素的值. 绑定的数据会和表单的数据值相关联。 绑定的数据<--->表单元素的值 ,双向的数据绑定。 |
v-show | 根据真假切换元素的显示状态。 原理是修改元素的display,实现显示隐藏。 指令后面的内容,最终都会解释为布尔值。 值为true元素显示,值为false元素隐藏。 数据改变之后,对应元素的显示状态会同步更新 |
v-if | 根据表达式的真假切换元素的显示状态。 本质通过操作dom元素来切换。 显示状态表达式的值为true,元素存在于dom中,为false,从dom中移出。 频繁的切换v-show,反之使用v-if,前者的切换消耗小。 |
v-bind | 为元素绑定数据属性。 完整写法是v-bind:属性名(:属性名) |
v-for | 根据数据生成列表结构。 数据经常和v-for结合。 使用语法是(item,index)in 数据,item和index可以结合其他指令一起使用。 数据长度的更新会同步到页面上是响应式的。 为循环绑定一个key值:key="值" 尽可能唯一。 |
代码演示:
v-html , v-text
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><body><!-- 创建一个标签{{message}} 插入一个值,不影响标签中的其他内容 --><!-- v-html="message”,v-text="message”会覆斋标签中其他内容{{message}},v-text="message”不能解析内容中html频签v-html="message”可以解析内容中html标签--><div id="app"><p>{{message}} aaaaa</p><p v-html="message">bbbbb</p><p v-text="message">aaaa</p></div><script>// 创建一个vue对象var app=new Vue({el:'#app',data:{message: '<b>hello Vue!</b>'}})</script></body>
</html>
v-on/@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><!-- v-on为标签添加事件 --><body><div id="app"><input type="button" value="按钮1" v-on:click="test1(1)" /><input type="button" value="按钮2" @click="test2(2)"/></div><script>var app=new Vue({el:'#app',data:{messgae:'<b>Hello Vuel</b>',name:""},methods:{test1(a){alert(this.messgae+":"+a);},test2(a){alert(this.messgae+":"+a);}}})</script></body>
</html>
v-model
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- --><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app">{{ message }},{{name}}<input v-model="name"/></div><script>var app=new Vue({el:'#app',data:{message: 'hello vuel',name: "jim"}})</script></body>
</html>
v-show
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script><!-- v-show根据真假切换元素的显示状态 通过修改元素的display,实现显示隐藏 ,效率高--></head><body><div id="app"><img v-show="isShow" src="../img/1.jpg" /><img v-show="age>16" src="../img/2.jpg" /><div>sss</div><input type="button" @click="oper()" value="操作" /></div></body><script>var app = new Vue({el: '#app',data: {isShow: true,age: 11},methods: {oper() {this.isShow = !this.isShow;this.age = 19;}}})</script>
</html>
v-if
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script><!-- v-if根据真假切换元素的显示状态(与v-show不同,他是直接彻底删除,显示时重新创建)效率低v-if 可以 v-else 联合使用 两个必须紧挨着--></head><body><div id="app"><img v-if="isShow" src="../img/4.jpg"><img v-if="age>18" src="../img/5.jpg"/><img v-else src="../img/3.jpg"/><input type="button" @click="oper()" value="操作"/></div></body><script>var app=new Vue({el:'#app',data:{isShow:true,age:10},methods:{oper(){this.isShow=!this.isShowthis.age=19;}}})</script>
</html>
v-bind
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script><!-- v-bind是为元素绑定属性v-bind:属性名="变量名" 简写为 :属性名一旦为属性添加v-bind值 就是一个在data中定义的变量了--><style>.active {color: rebeccapurple;background-color: aqua;}</style></head><body><!-- :title="array[index]" 鼠标停留时的提示信息--><div id='app'><img v-bind:src="imgurl[index]" :title="array[index]" /><!-- 我们可以传给 v-bind:class 一个对象,以动态地切换 class: --><div v-bind:class="{ active: isActive }">wwww</div><input type="button" @click="oper()" value="操作" /></div></body><script>var app = new Vue({el: '#app',data: {imgurl: ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg"],array: ["苹果手机", "华为手机"],index: 0,isActive:true},methods: {oper() {this.index++;this.isActive=!this.isActive;}}})</script>
</html>
v-for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><body><div id="app"><ul><li v-for="user in users">姓名:{{user.name}}年龄:{{user.age}}性别:{{user.gender}}</li></ul>{{student.name}}{{student.age}}{{student.gender}}</div></body><script>var app = new Vue({el: '#app',data: { //数组 模拟从后端响应回来的数据 数组 集合users: [{name: "jim",age: 18,gender: "男"},{name: "liu",age: 19,gender: "女"},{name: "mei",age: 15,gender: "男"},{name: "wang",age: 18,gender: "女"}],student: {name: "bei",age: 10,gender: "男"}},methods:{//自定义函数},//vue对象生命周期 钩子函数,在生命周期的每个阶段为我们提供了一个函数,可以自动执行beforeCreate(){console.log("beforeCreate")},created(){console.log("created")},beforeMount(){console.log("beforeMount")},mounted(){//vue 对象创建成功 且 与标签绑定后执行,这是我们常用的,在此自动的与后端交互console.log("created")}})</script>
</html>
6、Vue实例的生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程。
例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
钩子函数,在生命周期的每个阶段为我们提供了一个函数,可以自动执行
beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){ //常用
console.log('mounteda’);
}