一.VUE框架
Vue介绍
vue以数据驱动的web渐进式框架
三大主流框架:Angular React Vue
设计模式:MVVM
1.数据驱动=>不直接操作DOM
2.单页面web应用=>构建的网站其实只有一个页面
3.数据的双向绑定
4.虚拟DOM
文件后缀: .vue =>组件 =>Vue实例
组件化开发
1.vue与jquery区别
- jquery任然是操作DOM的思想,主要jQuery用来写页面特效
- Vue是前端框架(MVVM),对项目进行分层.主要用来处理数据
2.前端框架
- angular google
- react facebook
- vue 全世界
3.单页面应用
4.MVVM
- M 模型层 Model
- V 视图层 View
- VM 控制层 VIE-MODEL
二.Vue实例
2.1挂载元素
<!--挂载元素-->
<div id="app">
<h1>{{title}}</h1>
<hr>
<input type="text" v-model="message">
<hr>
<p>{{message}}</p>
<!--不建议这么做,视图层不需要有逻辑计算-->
<p>{{reverseMessage}}</p> <!--不加括号就是一个function-->
</div>
<script src="../Vue/vue.js"></script>
<script>
//创建实例
let app = new Vue({
el:'#app',
data:{
title:'vue实例',
message:'同志你辛苦了',
},
//方法
methods:{
},
//计算属性,依赖于普通属性,例如reverseMessage对message的依赖
computed: {
//reverseMessage 是个属性,属性的值是function的返回值
reverseMessage:function () {
return this.message.split('').reverse().join('')
}
},
});
console.log(app);
console.log(app.title); //获取title的内容
console.log(app.$el); //获取原生dom
console.log(app.$data.title); //获取title的内容
// app.$watch('title',function () {
// alert('啊,你改变了我')
// }); //监听属性变化,一旦有变化触发回调函数
console.log('')
2.2数据 data
let app = new Vue({
el:'#app',
data:{
title:'vue实例',
message:'同志你辛苦了',
}
})
2.3 方法 methods
let app = new Vue({
el:'#app',
data:{
...
},
methods:{
...
}
})
2.4 计算属性 computed
一个属性变化依赖多个属性变化
let app = new Vue({
el:'#app',
data:{
...
},
methods:{
...
},
//计算属性,依赖于普通属性,例如reverseMessage对message的依赖
computed: {
//reverseMessage 是个属性,属性的值是function的返回值
reverseMessage:function () {
return this.message.split('').reverse().join('')
}
})
2.5 监听器 watch
一个属性变化引起其他多个属性变化
let app = new Vue({
el:'#app',
data:{
...
},
methods:{
...
},
computed: {
},
//监听器,监听属性的变化
watch:{
message: function () {
console.log('改变')
},
title:function () {
this.reverseTitle = this.title.split('').reverse().join('');
},
}
})
监听属性与计算属性的区别
计算属性:适合一个属性受到多个属性的影响
监听属性:多个属性依赖一个属性
2.6 生命周期的钩子函数
beforeCreate
created 此时,vue实例的方法,属性都已经创建,可以再这里获取后端数据
beforeMount
mounted 此时,vue实例已经挂载到元素上,如需操作DOM,在这里使用原生JS操作
beforeUpdate
updated
activated
deactivated
beforeDestory
destoryed