Vue01
vue
-
vue基础
-
vue-cli
-
vue-router
-
vuex
-
element-ui
-
vue3
vue基础
vue是什么
一套用于构建用户界面的渐进式JavaScript框架
-
采用组件化模式，提高diamagnetic复用率，让代码更好维护
-
声明式编码，让编码人员无需直接操作DOM，提高开发效率
-
去vue官网下载开发版本，然后在html文件中引入
// 这是在头部引入
细节：
-
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
-
vue实例和容器时一一对应的
-
真实开发中只有一个Vue实例，并且会配合组件一起使用
-
{{xxx}} 中xxx要写js表达式，且xxx可以自动读取到data中的所有属性
-
一旦data中的数据发生改变，那么模板中的数据也会改变
模板语法
-
插值语法
-
指令语法
插值语法，{{name}}
指令语法
我是一个链接注：v-bind: -----> :(简写)
-
插值语法
-
功能：用于解析标签体内容
-
写法{{xxx}}
-
-
指令语法
-
功能：用于解析标签（标签属性，标签体内容，绑定事件）
-
有很多很多的指令语法（此处只是拿v-bind举例子）
new Vue({
el:“#root”,
data:{
name:‘jack’,
school:{
name:‘a’,
url:‘xxxxx’,
}
}
})//这里可以
-
数据绑定
单向数据绑定：
双向数据绑定：
-
v-bind:数据只能从date流向页面
-
v-model:
-
双向绑定一般应用在表单类元素上（input，select）
-
v-model:value 可以简写成 v-model，因为v-model 默认收集的就是value值
//简写后的代码
单向数据绑定：
双向数据绑定：
-
el于data的两种写法
//$符是给程序员用的
//这种方式写的更灵活
//data的两种写法，对象式，函数式
//简写
data(){
return{ name:'好人'
}
}
总结：
-
el的两种写法
-
new Vue时候配置el属性
-
先创建Vue实例，随后再通过v.$mount(‘root’)指定el的值
-
-
data的两种写法
-
对象式
-
函数时
-
-
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
MVVM模型
数据代理
Object.defineproperty
//enumerable是配置是否可以枚举，默认是不可以
//writable配置属性能不能修改，默认是不能
//configurable配置属性能不能删除，默认是不能
//当有人读取person的age值时，会先走getter
//可以简写为get(){...}
//当有人修改person的age值时，stter就会被调用，且会收到修改的具体值
//若要真正修改age属性，需要修改number的值
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
}
set(value){
obj.x = value
}
})
右边的两条线用了数据代理，这里也解释了，为什么在界面里改了数据，但是源码里的数据没有改变
-
Vue中的数据代理：
- 通过vm对象来代理data对象中属性的操作（读/写）
-
Vue中数据代理的好处
- 更加方便的操作data中的数据
-
基本原理
- 通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在这两个函数内部去读/写data中对应的属性
事件处理
-
事件的基本使用
-
使用v-on:xxx 或 @xxx绑定使劲按，其中xxx是事件名
-
事件的回调需要配置在methods对象中，最终会在vm上
-
methods中的配置函数，不需要用箭头函数！否者this就不是vm
-
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例
-
@click=“demo” 和 @click="demp($event)"效果是一致的，但后者可以传参
-
事件修饰符
事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件
事件捕获：由外向内
事件冒泡：由内向外
-
Vue中的事件修饰符
-
prevent:阻止默认事件
-
stop：阻止事件冒泡
-
once：事件只触发一次
-
键盘事件
-
Vue提供常见的按键别名
-
回车 => enter
-
删除=> delete
-
退出=> esc
-
空格=> space
-
换行=> tab
-
上 => up
-
下 => down
-
左 => left
-
右 => right
-
注：ctrl,alt,shift,meta 特殊。配合keydown能正常使用，因为这是系统修饰键
注：修饰符可以连续写
计算属性
属性：在Vue里，默认data里的数据是属性
计算属性：通过对属性的操作获得一个全新的属性
{{fullname}}
....
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
computed:{
fullname:{
get(){
//这里的this是vm
return this.firstname + '-' + this.lasname
},
set(value){
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
//get调用的时机
//1，当人第一次读fullname时，get就会被调用
//2，所依赖的数据发生变化时，get会被调用
//set调用的时机
//1，当fullname被修改时
计算属性，相对于methods的优势是，有缓存机制。
计算属性：
-
定义：要用的属性不存在，要通过已有属性计算得来
-
原理：底层借助了Object.defineproperty方法提供的getter 和setter
-
get函数什么时候执行
-
初次读取时会执行一次
-
当依赖的数据发生改变时会被再次调用
-
-
优势：于methods实现相比，内部有缓存机制（复用），效率更高，调试方便
-
备注：
-
计算属性最终会出现在vm上，直接读取使用即可
-
如果计算属性要被修改，那么必须写set函数去相应修改，且set中哟啊硬气计算时依赖的数据发生改变
-
计算属性的简写 computed:{ fullname(){ … } } //这里的computed是vue的一个配置对象
监视属性
watch:{
ishot:{
immediate:true,//初始化时让handler调用一下
handler(newValue,oldValue{
//这里可以对新旧数据进行一个对比，然后进行后续的逻辑处理
}
}
}
vue实例创建好后
vm.$watch('ishot',{
immediate:true,//初始化时让handler调用一下
handler(newValue,oldValue{
//这里可以对新旧数据进行一个对比，然后进行后续的逻辑处理
}
})
-
监视属性
-
当被监视属性变化是，回调函数自动调用，进行相关操作
-
监视的属性必须存在，才能进行监视
-
监视的两种方法
-
new vue时传入watch配置
-
通过vm.$watch监视
-
-
深度监视
-
监视多级结构中某个属性的变化
-
监视多级结构中所有的属性变化
-
深度监视
-
Vue中的watch默认不监测对象内部值的改变（一层）
-
配置deep:true 可以监测对象内部值的改变（多层）
-
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
-
使用watch时根据数据的具体结构，决定是否采用深度监视
-
当配置项里只有handler时，可以简写 watch:{ isHot:{ immediate:true, deep:true, handler(newValue,oldValue){ console.log(“ishot被修改了”,newValue,oldValue) } } } //简写 watch:{ isHot(newValue,oldValue){ onsole.log(“ishot被修改了”,newValue,oldValue) } }
computed和watch之间的区别
-
computed能完成的功能，watch都可以完成
-
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要原则
-
所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
-
所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象