MENU

vue

December 17, 2018 • vue阅读设置

ES6的常用语法
==变量的定义==
-- ==var== 变量的提升
-- ==let== 块级作用于 {}
-- ==const== 常量 不可修改
模板字符串

语法

变量 ${}
函数
箭头函数
this
普通函数this取决于函数最近的调用者
箭头函数取决于当前的上下文环境
数据的解构
对象的解构 let {key, key} = obj
数组的解构 let [a, b, c] = array
类的定义
定义类 class
构造方法 constructor
继承 extends
子类没有this 需要super方法获取父类的this

Vue的常用指令

-- v-text innerText
-- v-html innerHtml
-- v-for
-- v-if v-else-if v-else appendChild
-- v-show display
-- v-bind 绑定属性
-- v-on 绑定事件
-- v-model 双向绑定
-- input
-- textarea
-- select
-- 指令修饰符
-- .lazy
-- .number
-- .trim
-- 自定义的指令
-- Vue.directive("指令的名称", function(el, binding){
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定的数据的值
modifires 指令的修饰符组成的对象
})

内容详细

获取DOM
-- 给标签加ref属性 ref="xxxx"
-- this.$refs.xxxx
计算属性
computed
放入缓存 当数据改变的时候才会重新执行计算
跟data中数据的区别
数据的监听
-- watch去监听
-- 字符串
-- 监听到改变新的值和旧的值不同的
-- 数组
-- 只能监听到长度的变化 新旧值相同的
-- 改变数组值的时候监听不到
必须用$set(array, index, value)
新旧值相同的
-- 对象
-- 只能监听到value的改变 必须深度监听
-- 增加对象的key 必须用$set(obj, key, value)
-- 新旧值相同的

Vue组件

组件的全局注册
-- Vue.component("组件名称", {
template: `只识别一个块级作用域`,
data(){
return{
name: xxxx
}
},
methods: {},
})
-- 任何Vue实例里用 
组件的局部注册

-- let com_config = {.....}
-- const app = new Vue({
el: "#app",
components: {
组件名称: com_config
}
})
-- 

子组件的注册
-- 在父组件里 components: {
子组件的名称: 子组件的配置信息
}
-- 在父组件的template里展示子组件
\
父子通信
-- 先给子组件绑定属性
-- 在子组件通过props:["属性名称"]
子父通信
-- 子组件先提交事件
this.$emit("事件名称", data)
-- 父组件 给子组件绑定事件
自己处理这个事件
非父子通信
-- 定义一个中间调度器
let Event = new Vue();
-- 其中一个组件向中间调度器提交事件
Event.$emit("事件名称", data)
-- 另一个组件要监听中间调度器里的事件
Event.$on("事件的名称", function(data){
注意this的问题
})
混合
-- 复用共用的代码块
-- mixins: [base]
插槽
-- 实现组件内容的分发
-- slot
-- 直接用slot标签
-- 命名的slot
-- 先给slot加name属性
-- 给标签元素添加slot属性= name属性值
最后编辑于: April 2, 2019
Leave a Comment