day19
1. vue 与 jQuery 区别
-
jQuery 仍然是操作DOM的思想， 主要jQuery 用来写页面特效
-
Vue是前端框架(MVVM) ,对项目进行分层。 处理数据
2 前端框架
-
angular google
-
react facebook
-
vue 全世界
3 单页面应用
4 MVVM
-
M 模型层 Model
-
V 视图层 View
-
VM (控制层) VIEW-MODEL
2 VUE实例
2.1 挂载元素
<div id="app">
let app = new Vue({ 生成vue对象
el: '#app', vue对象绑定元素 el：元素对象
2.2 数据 data
Vue({
data: {
}
})
2.3 方法 methods
Vue({
methods: {
}
})
2.4 计算属性 computed
Vue({
computed: {
属性名: function(){
}
}
})
2.5 监听属性
Vue({
watch: {
属性名: function(){
}
}
})
监听属性和计算属性
计算属性： 适合一个属性受到多个属性的影响
监听属性： 多个属性依赖于一个属性
2.6 生命周期的钩子函数
beforeCreate
created 此时，Vue实例的方法、属性都都已经创建。 可以在这里获取后端数据
beforeMount
mounted 此时，Vue实例已经挂载到元素上。 操作DOM请在这里
beforeUpdate
updated
activated
deactivated
beforeDestory
destoryed
3 Vue视图
3.1 基本模板语法
文本插值
{{ title }} 值变这里也变
<p v-text="title"> 元素之间不能插值
<p v-once>{{ title }}</p> message变化，这里不会改变
HTML
<div v-html="message"> 识别html标签
绑定属性
<img v-bind:src="imgSrc" v-bind:title="title" :alt="altContent">
<p v-bind:id="" :class=""> 可以省略v-bind 绑定标签的属性值和vue的data数据
视图进行表达式运算
{{ 表达式运算 }} {{ 1+1 }}
不建议
防止闪烁
<style>
[v-cloak] {
display:none !important
}
</style>
<div id="app" v-cloak>
3.3 条件渲染
v-if v-if="isShow" key="1" key：缓存，不用重新内存生成
v-else-if
v-else
v-show v-show控制隐藏和显示 true：显示 false：隐藏
3.4 列表渲染
v-for v-for="item in dataList"
@click="updateItemList()" 绑定事件 vuemethods方法
Vue.set(this.itemList, 1, '焦宝玉') 修改列表方法 this：vue对象 1：索引
