vue教程[全面]

目录

 初识vue

 数据代理

 理解数据代理

 vue中的数据代理

事件处理

 修饰符

​键盘事件 

修饰符可以连续写 

 计算属性

姓名案例-插值语法实现

姓名案例-methods实现

姓名案例-计算属性实现

---

尤雨溪github主页

 

 

 

 

 

 

 

 

 风格指南

注意事项：

 

 

 

 vue-devtools

 初识vue

 div#root

 

 vscode中

 

 插值语法：

{{ name }}---js表达式

 一个vue实例只能解析一个容器，一个容器只能被一个实例接管

 

 

 

 

 v-bind：简写为：

大写
.toUpperCase()

 单向数据绑定v-bind

双向数据绑定v-model

 

 

 

 el与data的两种写法

 

 

不能写箭头函数 会获取到全局window的

 

 

 vm上有的可以在模板上直接用

 数据代理

 

 

 

可列举的

 

  可修改的

可删除的 

 

 

 

 

 

 理解数据代理

 vue中的数据代理

 

 

 

 setter

 

事件处理

 拿到button按钮

拿到按钮的信息

阻止默认行为

 

 修饰符

 

 

键盘事件 

判断回车

 e.code

 

 tab焦点切走

 

 

修饰符可以连续写 

先停止冒泡 在停止默认事件

 按ctrl+y触发

 计算属性

姓名案例-插值语法实现

   

姓名案例-methods实现

做事件的回调

事件里 小括号加不加随便

返回值插入 必须要有括号

{{ fullName()}}

methods:{
    fullName(){
        return this.firstName + '-' +this.lastName
    }
}

姓名案例-计算属性实现

 

 

 计算属性简写

只读取不修改才可以简写

 

vscode插件

 回车会补全代码

三元表达式 

可以用计算属性

 

 方法简写

不推荐写复杂的

 

 监视属性

 

深度监视 

 

 深度监视简写

当只有handler的时候 可以简写

 

 

 

 

 

Ref 函数

~引用实现对象