您现在的位置是：首页 >技术杂谈 >Vue2+Vue3(1-26)网站首页技术杂谈

一.Vue概念

Vue是一个用于构建用户界面的渐进式框架。

构建用户界面：基于数据渲染出用户看到的页面

渐进式：循序渐进

框架：一套完整的项目解决方案

Vue的两种使用方式：

1.Vue核心包开发，场景：局部，模块改造

2.Vue核心包&Vue插件 工程化开发场景：整站，开发

二.创建Vue实例

1.构建用户界面

2.创建Vue实例，初始化渲染（4步）：

1. 准备容器
2. 引包（官网）-开发版本/生产版本
3. 创建Vue实例 new Vue()
4. 指定配置项→渲染数据（1.el指定挂载点 2.data提供数据）

三.插值表达式{ { }}

插值表达式是一种Vue的模板语法

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

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

2.语法：{ { 表达式 }}

3.注意

1. 使用的数据必须存在（data）
2. 支持的是表达式，而非语句，比如：if for （×）
3. 不能在标签属性中使用{ { }}插值

四.Vue响应式特征

响应式：数据改变，视图自动更新；使用Vue开发→专注于业务核心逻辑即可

访问或修改数据：data中的数据，最终会被添加到实例上（访问数据：“实例.属性名”；修改数据：“实例.属性名”=“值”）

五.指令初识和v-html

Vue指令：指令就是带有v-前缀的特殊属性，不同属性对应不同的功能

动态解析标签：v-html=“表达式”→动态设置元素innerHTML

六.v-show vs v-if 

v-show:1.作用：控制元素显示隐藏 2.v-show=“表达式”表达式值true 显示，false隐藏

3.原理：切换display：none控制显示隐藏   4.场景：频繁切换显示隐藏的场景

v-if：1.作用：控制元素显示隐藏（条件渲染）2.语法：v-if=“表达式” 表达式值true显示，false隐藏

3.原理：基于条件判断，是否创建或移除元素节点

4.场景：要么显示，要么隐藏，不频繁切换的场景

七.v-else 和 v-else-if

作用：辅助 v-if 进行判断渲染

语法：v-else v-else-if =“表达式”

注意：需要紧挨着v-if一起使用

八.v-on

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

2.语法：1.v-on:事件名 = “内联语句”   2.v-on：事件名= “methods中的函数名”

<button v-on:click="count++">按钮</button>

<button @click="count++">按钮</button>

3.简写：@事件名

<button @click="fn">-</button>

4.Vue指令v-on调用传参

<button @click="fn(参数1，参数2)">
    按钮
</button>

九.v-bind

1.作用：动态的设置html的标签属性→ src url title

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

十.v-model应用于其他表单元素

常见的表单元素都可以用v-model绑定关联→ 快速获取或设置表单元素的值

它会根据控件类型自动选取正确的方法来更新元素