vue(1-45)

一、引包

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

二、vue实例

指定配置项

1、el指定挂载点，选择器指定控制的是哪个盒子

2、data提供数据

三、插值表达式

利用表达式进行插值，渲染到页面中

语法：{{ 表达式 }}

实例

四、vue指令

v-前缀的属性

1、v-html

作用：设置元素的innerHTML

语法：v-html = “表达式”

2、v-show和v-if

v-show

作用：控制元素显示或隐藏

语法：v-show=“表达式”，表达式值true显示，false隐藏

场景：频繁切换显示隐藏场景

v-if

作用：控制元素显示或隐藏（条件渲染）

语法：v-if=“表达式”  ，表达式值true显示，false隐藏

场景：不频繁切换的场景 

3、v-else和v-else-if

4、v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：

1、v-on:事件名=“内联语句”

2、v-on:事件名=“methods中的函数名”

简写：@事件名

  

//fn中app.isShow可改为this.isShow

v-on调用传参

5、v-bind

作用：动态设置html的标签属性

语法：v-bind：属性名=“表达式”

简写：            ：属性名=

6、v-for

作用：基于数据循环，多次渲染整个元素

遍历数组语法：v-for  = “（ item，index ）in  数组”

item：每一项，item：下标

6、v-for中的key

语法: key属性 = “唯一标识”

作用：给列表项添加唯一标识。便于vue进行列表的正确排序复用

7、v-model

作用：给表单元素使用，双向数据绑定         可以快速设置获取或设置表单元素内容

 8、指令修饰符

9、v-bind操作class

语法：class = “对象/数组”

10、v-bind操作style

语法：style = “{ css属性名1：css属性值}”

11、计算属性

12、watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作

简单写法

完整写法

12、vue生命周期

四个阶段：创建、挂载、更新、销毁

生命周期：一个vue从创建到销毁的整个阶段

13、普通组件注册使用

使用：当成html标签使用<组件名></组件名>

局部

全局