Vue学习笔记（一）

V2官网：v2.cn.vuejs.org/

创建Vue实例 步骤：

1. 准备容器
2. 引包：在官网下载或引入在线js包（开发版本）

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

3.创建Vue实例

4.指定配置项：el、data 用来渲染数据:

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

data: 提供数据

插值表达式

1. 利用表达式进行插值，将数据渲染到页面中
2. 语法：{{ 表达式 }}
3. 使用的数据要在data中存在
4. 支持的是表达式。而非if...for
5. 不能在标签属性中使用

Vue的特性：响应式

1. 响应式：数据改变，视图自动更新
2. 访问数据："实例.属性名"
3. 修改数据："实例.属性名 = "值"

Vue开发者工具（Chrome插件）

需要在详情页打开这两项：

最终效果：

Vue指令

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

常见指令

• v-html: 相当于innerhtml,可以动态设置元素

• v-show：

  1. 作用：控制元素显示隐藏
  2. 语法：v-show="表达式" true显示 false隐藏
  3. 原理：切换display:none控制显示隐藏:
  4. 应用：频繁切换显示隐藏的场景

• v-if

  1. 作用：控制元素显示隐藏(条件渲染)
  2. 语法：v-show="表达式" true显示 false隐藏
  3. 原理：基于判断，是否创建或移除元素节点
  4. 应用：不频繁切换

• v-else

  1. 作用：与v-if配合使用来进行条件判断

• v-on

  1. 作用：注册事件 = 添加监听 + 提供处理逻辑
  2. 语法：
     1. v-on:事件名 = “内联语句”
     2. v-on:事件名 = "methods中的函数"
  3. v-on可以简写为**@**

• v-bind

  1. 作用：动态设置html的标签属性 -> src、title、url
  2. 语法：v-bind:属性名="表达式"
  3. 简写：**:**属性名="表达式"

• v-for

  1. 作用：基于数据循环，多次渲染整个数据
  2. 遍历数组语法：v-for="(item, index) in 数组"
  3. item：每一项， index：下标