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 函数

~引用实现对象

 

 

from：https://blog.csdn.net/qq_33338352/article/details/119725388