Vue基础

创建实例

<div id=" app">
<!-- 这里将来会编写一些用于渲染的代码逻辑--> 
  {{ msg }}
</div>

<!-- 引入的是开发版本包，包含完整的注释和警告--> 
<script src="https:/ /cdn. jsdelivr. net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  //一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
  const app = new Vue({
    //通过el配置选择器，指定Vue管理的是哪个盒子
    el: '#app',
    //通过data提供数据
    data:{
      msg:'Hello World'
    }
  })
</script>

插值表达式

含义：vue的一种模板语法

作用：利用表达式进行插值渲染

语法：{{表达式}}

注意：

1. 使用的数据要存在
2. 支持的是表达式，不是语句if for
3. 不能在标签属性使用{{ }}

响应式特性

响应式数据：数据变化，视图自动更新

data中的数据，是会被添加到实例上

1. 访问数据：实例.属性名
2. 修改数据：实例.属性名=新值

Vue指令

v-html

作用：设置元素的innerHTML

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

v-show

作用：控制元素显示隐藏

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

底层原理：切换 css 的 display: none 来控制显示隐藏

适用场景：频繁切换显示隐藏的场景

v-if

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

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

底层原理：根据判断条件控制元素的创建和移除（条件渲染）

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

v-else & v-else-if

作用：辅助v-if 进行判断渲染
语法：v-else v-else-if = "表达式"
注意：需要紧挨着v-if一起使用

v-on

<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++"> +</button> 

作用：注册事件=添加监听+提供处理逻辑
语法：
① v-on：事件名 = "内联语句"
② v-on：事件名 = "methods中的函数名"

简写：@事件名

调用传参：

v-bind

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

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

简写：：（冒号）+ src/url/title 等等

v-for

作用：基于数据循环，多次渲染整个元素：数组、对象、数字

遍历数组语法：v-for = "(item,index) in 数组" item 每一项，index 下标

key

语法：key属性 = "唯一标识"
作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用。

注意点：

1. key的值只能是字符串或数字类型
2. key的值必须具有唯一性
3. 推荐使用id作为key（唯一）,不推荐使用index作为key（会变化，不对应）

<li v-for=" (item, index) in xxx" :key="（唯一值）item.id">
data: {
booksList: [
{ id: 1, name :'《红楼梦》'   author :'曹雪芹'},
{ id: 2, name :'《西游记》'   author :'吴承恩'},
{ id: 3, name :'《水浒传》'   author :'施耐庵'},
{ id: 4, name :'《三国演义》' author :'罗贯中'}
]
}

v-model

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

1. 数据变化→视图自动更新
2. 视图变化→数据自动更新

语法：v-model = '变量'

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

常见的表单元素都可以用v-model绑定关联→快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素

输入框 input:text ——>value
文本域 textarea ——>value
复选框 input:checkbox ——>checked
单选框 input:radio ——>checked
下拉菜单 select ——>value

指令修饰符

含义：通过"."指明一些指令后缀，不同后缀封装了不同的处理操作 -> 简化代码

(1)按键修饰符
@keyup.enter ——>键盘回车监听
(2)v-model修饰符
v-model.trim ——>去除首尾空格
v-model.number ——>转数字
(3)事件修饰符
@事件名.stop ——>阻止冒泡.
@事件名.prevent ——>阻止默认行为

v-bind

作用：为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对 class类名和style行内样式进行控制。

v-bind对于样式控制的增强-操作class

语法 :class="对象/数组"
（1）对象：键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类。
<div class="box" :class="{ 类名1:布尔值，类名2:布尔值}"></div>
适用场景：一个类名，来回切换

（2）数组：数组中所有的类，都会添加到盒子上，本质就是一个class列表。
<div class="box" :class="[ 类名1,类名2，类名3 ]">< /div>
适用场景：批量添加或删除类
:class="[' pink', ' big']"

v-bind对于样式控制的增强-操作style

语法 :style="样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值，CSS属性名2: CSS属性值}"></div>
适用场景：某个具体属性的动态设置

计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法:
（1）声明在computed配置项中，一个计算属性对应一个函数
（2）使用起来和普通属性一样使用 {{计算属性名}}
计算属性→可以将一段求值的代码进行封装

computed :
{
  计算属性名() {
    基于现有数据，编写求值逻辑
    计算属性函数内部，可以直接通过this 访问到app实例

    return 结果
  }
}

计算属性默认的简写，只能读取访问，不能"修改"。

完整写法可修改计算属性：

this.计算属性名 = ***

computed :
{
  计算属性名: {
    get(){
      一段代码逻辑（计算逻辑）
      return 结果
    },
    set(修改的值){
      一段代码逻辑（修改逻辑）
    }
  }
}

computed计算属性 vs methods方法

computed计算属性:
作用：封装了一段对于数据的处理，求得一个结果。
语法:
（1）写在computed配置项中
（2）作为属性，直接使用→this.计算属性 {{ 计算属性 }}

缓存特性（提升性能） :
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算→并再次缓存

methods方法:
作用：给实例提供一个方法，调用以处理业务逻辑。
语法:
（1）写在methods配置项中
（2）作为方法，需要调用→this.方法名() {{ 方法名() }} @事件名="方法名”

watch侦听器(监视器)

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

语法：
（1）简单写法→简单类型数据,直接监视

data: {
  words:'苹果'，
  obj: {
    words: '苹果'
  }
},
watch: {
  //该方法会在数据变化时，触发执行
  数据属性名(newValue, oldValue){
    一些业务逻辑或异步操作。
  }
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑或异步操作。
  }
}

防抖：延迟执行

（2）完整写法→添加额外配置项
① deep: true 对复杂类型深度监视
② immediate: true 初始化立刻执行一次handler方法

data: {
  obj: {
    words:'苹果'，
    lang:'italy'
  },
},
watch: {// watch 完整写法
  数据属性名(obj): {
    deep: true, //深度监视复杂类型
    immediate: true, //立刻执行，一进入页面handler就立刻执行
    handler (newValue) {
      console.log(newValue)
    }
  }
}