vue3 基础语法（一）

1、this指向

this 的任何问题看 codeywhy 文章，都可以解决

      https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

      methods 里面的this

      实际上vue源码中，对methods中所有的函数进行了遍历，并且通过bind绑定了this

2、了解vscode 生成代码片段：

      第一步：复制代码片段

      第二步：复制代码到该网站，https://snippet-generator.app/，生成代码片段

      第三步：在vscode中配置代码片段 文件-》首选项-》配置用户代码片段

      vscode 自动保存设置 —— 文件——》选择自动保存（auto save)

3、模板语法  

{{}} mustache 双大括号语法   介绍多种使用方式

4、基础指令

      v-once  用于指定元素或者组件只渲染一次

      v-text

      v-html

      v-pre  用于 跳过元素和它的子元素的编译过程，显示原始的mustache标签

      v-cloak  仅做了解，在真实开发中不会出现，出现在编译阶段

 5、高级指令

      5.1、v-bind 动态绑定属性名称和对象  简写 ：,可以绑定 src ,href ,class

 vue2 template模板中只允许有一个根元素

vue3  template中允许有多个根元素

5.1.1、绑定class 对象语法

 

 5.1.2、绑定class数组语法

 5.2、动态绑定style ：可以使用v-bind:style 绑定一些css内联样式,eg：根据数据动态决定某段文字的颜色，大小等

 5.2.1、绑定style对象语法

 5.2.2、绑定style 数组语法：相当于把多个对象合并在一起的时候使用

5.3、动态绑定属性：

 

 5.4、v-bind 属性直接绑定一个对象【在封装高阶组件的时候有用】 

 5.5、事件绑定

5.5.1、v-on 用法

 

5.5.2、v-on 参数 

v-on 如何获取事件对象  event ？

不传参数，直接在methods方法里面接收，eg: btnClick(event){console.log(event)};默认就是event

5.5.3、v-on 的修饰符

6、条件渲染