什么是vue
vue生态系统/vue技术栈/vue全家桶: vuejs / vuex / axios /vue-router / element-ui (pc) / vant ui(移动端) / 服务端渲染(seo问题)
一vue的介绍
1.什么是框架:
具有约束性的项目管理结构或者写法,能更好的管理项目,让程序员更专注于业务逻辑
2.什么是vue
是一套构建用户界面的渐进式js框架;与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计
渐进式:主张最少
渐进式框架还有:angular.js ,react.js
自底向上:先编写出基础程序段,然后再逐步扩大规模、补充和升级某些功能
二单页面应用
vue react angular:主要都是单页面应用
一.单页面应用:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用
对单页应用来说模块化的开发和设计显得相当重要
优点:
1.分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起;
2.减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
3.同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端
缺点:
1.SEO问题,现在可以通过Prerender等技术解决一部分
2.前进、后退、地址栏等,需要程序进行管理
二.MVVM构架
M:js存储的数据
VM::是实现vue双向数据绑定的核心技术
V:视图 HTML展示
另:
MVC架构:
M: 数据层,提供数据
V: 视图,和用户交互,显示页面
C: 控制层 (业务逻辑)
MVP架构
三.vue的使用
1.官网下载vue.js文件
2.引用vue.js文件
自动挂载
let vm = new Vue({
el:"#app", // id为app的元素,将vue进行管理(viewModel )
data:{ //要显示在id为app内的页面元素
message:“vue是个可爱的框架”
}
});
手动挂载
let vm = new Vue({
data:{ //要显示在id为app内的页面元素
message:“vue是个可爱的框架”
}
}).$mount("#app");
vue可以应用于多页面开发
四.vue的属性和方法
1.全局属性
Vue.config
2.全局方法
Vue.filter()
Vue.minin()
3.实例属性
vm.
d
a
t
a
返
回
的
是
一
个
对
象
,
v
m
.
键
名
相
当
于
‘
v
m
.
data 返回的是一个对象, vm.键名 相当于` vm.
data返回的是一个对象,vm.键名相当于‘vm.data.message`
vm.$el 挂载的节点,返回的是一个dom对象;
注: vue2.0 起就不能挂载在html 和body上
4.实例方法
vm.$mount()
vm.$set(); // 修改数据,特点,修改数据后,dom会重新渲染
vm.$nextTick(); // dom更新完成,执行
vm.$watch(); // 监视某个值的值
五.vue的指令
v-text:显示成文本
<body>
<div id="app">
<span v-text="msg"></span>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
data:{ //实例对象有的数据就写在data里面
msg:"vue是个可爱的框架"
}
}).$mount("#app") //将实例对象挂载到app那里
</script>
</body>
v-html:可以解析html标签
v-show:是否显示 , true表示显示 ,false:隐藏(display:none)
v-if :判断,条件为真,显示,为假:不渲染
v-else: 否则
v-else-if: 否则如果
示例: 根据一个分数 ,显示 对应的A,B,C,D,E
v-for:
注:最好写上key属性,如果有唯一id,就绑定id, 没有可以用index
循环对象时:
v-bind:
绑定元素的属性
.pink{ color: pink; } .blue{ color: cornflowerblue; }
六、vue的生命周期函数
钩子函数:
beforeCreate:创建前
created: 创建后
beforeMount: 挂载前
mounted: 挂载后
beforeUpdate:更新前
updated:更新后
beforeDestory:销毁前
destoryed:销毁后
<script src="js/vue.js"></script>
<script type="text/javascript">
var myVue = new Vue({
el: "#app",
data: {
a: "Vue.js"
},
beforeCreate: function() {
console.log("创建前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("创建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function() {
console.log("销毁前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function() {
console.log("已销毁");
console.log(this.a)
console.log(this.$el)
}
});
</script>
七、事件绑定
v-on: 绑定事件,简写@;
事件对象使用$event
修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<div @click="foo('yeye',$event)">
爷爷
<div @click="foo('baba')">
爸爸
<div @click.stop="foo('haizi')">
孩子
</div>
</div>
</div>
八.Vue过滤器
过滤器本质是函数,函数有参数且有返回值
使用方法,在绑定的属性后面加"| 过滤器名字";绑定的属性,将会作为参数传给过滤器,处理后,返回结果;显示在当前位置