初识vue

1.vue是一个渐进式框架,官网https://cn.vuejs.org/

2.vue 的版本 有两种 vue@2只有一套语法,vue@3有两套语法,选项式API(等价于Vue@2的语法),组合式API(Vue@3的语法)

3.vue的选项data,在vue的配置选项内可以有一个选项叫做data,但是必须要写成一个函数返回对象形式,在返回的对象内书写你准备好的数据,这个对象内的数据是可以直接在vue中的根元素内使用的

4.vue的基础渲染---插值表达式,是向html结构的文本位置渲染内容的语法,不能在属性上渲染.

5.vue指令-文本渲染指令,统一规范v-xxx,注意所有的指令都是写在标签的属性位置,

6.文本渲染指令  v-text ,等价于原先的innerText , 语法 v-text="你准备好的数据",但是不会识别html结构字符串.

7.超文本渲染指令 v-html , 等价于原先的 innerHtml,语法 v-html="你准备好的数据",把准备好的数据渲染在该标签内,但是只会识别html结构字符串

8.vue指令 v-cloak  作用:当vue准备完html结构并且渲染到页面商议后,让有该指令的标签display为block(前提是在css里面给这个标签设置了display:none)

9.vue指令 v-bind 可以简写为 :  属性绑定 <标签名 v-bind:属性名="你准备好的数据"></标签名>

10.vue指令 - 事件绑定 v-on ,语法 v-on:事件类型=事件处理函数,简写 @事件函数=事件处理函数

11.vue 的第二个配置项 - methods 用于专门存放函数方法

12.事件修饰符 (提供的能力之一),在绑定事件的时候直接添加一些修饰符来帮你做一些常规的事情,语法 v-on:事件类型.修饰符=事件处理函数

13.常见的事件修饰符,

=>enter修饰符,表示按下的是回车键的时候触发

=>esc修饰符,表示按下的是esc键的时候触发

=>prevent修饰符,自动阻止默认行为

=>stop修饰符,自动阻止事件传播

=>once 修饰符,只能触发一次

14.vue指令 -条件分支

在vue中提供了两个条件分支指令

=>v-show

=>v-if

它们的共同点会根据值的结果

=>如果是true,有这个内容

=>如果是false,没有这个内容

它们的区别

=>v-show 决定的显示不显示(控制display),只有一个

=>v-if 决定的渲不渲染(控制有没有这一段结构),有两个组合指令 ,v-else if ,v-else

15.vue指令 - 循环分支 

使用指令 v- for 特点是万物皆可循环 ,语法  v-for="(item,index)in 你要循环的内容",在使用了v-for最好给该标签动态绑定一个key属性,key属性要能代表该数据的唯一值

16.vue指令 -双向绑定 

双向数据绑定最多都是给表单元素使用的,语法 v-model="你准备好的数据"