Vue基础

喜欢ヅ旅行 2022-08-29 05:41 223阅读 0赞

### Vue基础 ###

*  Vue概述
 *  Vue的基本使用
 *   *  插值表达式
     *  指令
     *   *  数据绑定指令
         *  事件绑定指令
         *  属性绑定指令
         *  样式绑定
         *   *  对象语法
             *  数组语法
         *  事件修饰符
         *  按键修饰符
         *  分支循环结构
         *  循环结构
         *   *  遍历数组
             *  遍历对象
     *  Vue常用特性
     *   *  表单操作
         *   *  表单域的修饰符
         *  自定义指令
         *   *  带参数的自定义指令
             *  局部指令
         *  计算属性
         *  过滤器
         *  侦听器
         *   *  生命周期
             *  挂载（初始化相关属性）
             *  更新（元素或组件的变更操作）
             *  销毁（销毁相关属性）
         *  数组更新检测
         *   *  变更方法（影响原先的数据）
             *  替换数组（生成新的数组）
             *  改变数组中某个元素

# Vue概述 #

直接贴官网：[https://cn.vuejs.org/index.html][https_cn.vuejs.org_index.html]

在使用 Vue 时，我们推荐在你的浏览器上安装 [Vue Devtools][](Chrome)。它允许你在一个更友好的界面中审查和调试 Vue 应用。

安装完这个插件后，在打开通过Vue编写的页面时，在控制台即可进行调试。  
![控制台调试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]

# Vue的基本使用 #

Vue的基本使用步骤：

1.  需要提供标签用于填充数据
2.  引入vue.js库文件
3.  使用vue语法
4.  将vue提供的数据填充到标签里

引入可以直接使用CDN来加载最新版本

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

## 插值表达式 ##

用`{ {}}`来表示，中间可以进行一些表达式的计算等

<div id="box">{
       { value }}</div>
    <div>{
       { 1+3 }}</div>

在js中导入vue.js库后创建vue实例

var vm = new Vue({ 
    	el:"#box",
    	data:{ 
    		value:"Hello World!",
    	},
    });

结果

<div id="box">{
       { value }}</div>  // Hello Word!
    <div>{
       { 1+3 }}</div>  // 4

## 指令 ##

**指令的本质是自定义属性**

### 数据绑定指令 ###

<table> 
 <thead> 
  <tr> 
   <th>指令</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-text</td> 
   <td>填充纯文本，相比插值表达式会更简洁</td> 
  </tr> 
  <tr> 
   <td>v-html</td> 
   <td>填充HTML片段，但存在安全隐患，容易受XSS攻击</td> 
  </tr> 
  <tr> 
   <td>v-pre</td> 
   <td>填充原始信息，不对插值表达式进行解析，跳过编译过程</td> 
  </tr> 
  <tr> 
   <td>v-model</td> 
   <td>对数据双向绑定，可以通过<code>v-bind</code>和<code>v-on</code>实现</td> 
  </tr> 
 </tbody> 
</table>

### 事件绑定指令 ###

<table> 
 <thead> 
  <tr> 
   <th>指令</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-on:事件名</td> 
   <td>用于给该元素绑定指定的处理事件</td> 
  </tr> 
  <tr> 
   <td>@事件名</td> 
   <td>v-on:的简写形式</td> 
  </tr> 
 </tbody> 
</table>

var vm = new Vue({ 
    	el:"#box",
    	data:{ 
    		num:0,
    	},
    	methods:{ 
    		add: function(event){ 
    			this.num++;	
    		},
    	}
    });

### 属性绑定指令 ###

var vm = new Vue({ 
    	el:"#box",
    	data:{ 
    		url:"http://www.baidu.com",
    	}
    });

### 样式绑定 ###

对象语法和数组语法可以结合使用

#### 对象语法 ####

css

.active { 
    	background: #f00;
    }

html

<div v-bind:class="{ active:isActive }">内容</div>

在Vue实例中设置isActive的值

data:{ 
    	isActive:true;
    }

#### 数组语法 ####

data:{ 
    	activeClass:"active",
    }

### 事件修饰符 ###

<div v-on:click.stop="handler()">内容</div>
    
    <a href="#" v-on:click.prevent="handler()"></a>

### 按键修饰符 ###

<form v-on:keyup.enter="handler()">内容</form>
    
    <a href="#" v-on:click.prevent="handler()"></a>

如果需要自定义一些按键修饰符，则可以在**全局**中设置`config.keyCodes`属性

Vue.config.keyCodes.f1 = 112;

使用

### 分支循环结构 ###

使用`v-if`、`v-else-if`、`v-else`的分支结构时，渲染div只会**渲染**出**符合条件的那个**

<div id="box">
    	<div v-if="score>=90 && score<=100">优秀</div>
    	<div v-if-else="score>=80 && score<90">良好</div>
    	<div v-else="score<60 && score>=0">不及格</div>
    </div>

与`v-show`比较，`v-show`会将DOM会渲染出来，然后添加`display:none;`样式

### 循环结构 ###

#### 遍历数组 ####

先在实例中定义一个数组

data:{ 
    	arr:["apple","orange","banana"],
    }

再进行遍历，通常为了提高性能，会加入一个key值

<div id="box">
    	<ul>
    		<li v-for="items in arr">{
       { items }}</li>
    		
    		<li :key="index" v-for="(items, index) in arr">{
       { items + "---" + {
       {index}} }}</li>
    	</ul>
    </div>

#### 遍历对象 ####

data:{ 
    	apple:{ 
    		id:1,
    		name:"apple",
    		price:66,
    	}
    }

进行遍历，有三个参数，写法固定`v-for="(value, key, index) in apple"`

<ul id="box">
    	<li v-for="(value, key, index) in apple">{
       { key+"----"+value+"----"+index }}</li>
    </ul>

与`v-if`同时使用，只有满足特定的条件才会渲染出来

<ul id="box">
    	<li v-if="value==1" v-for="(value, key, index) in apple">{
       { key+"----"+value+"----"+index }}</li>
    </ul>

## Vue常用特性 ##

### 表单操作 ###

以下包含了对单个`input`、`radio`单选框、`checkbox`复选框、`select`下拉框、`textarea`文本域的应用  
先定义html整体结构

<form id="box">
    			<div>
    				<h1>单个表单</h1>
    				<input type="text" v-model="text" />
    			</div>
    
    			<div>
    				<h1>单选框</h1>
    				<input type="radio" id="male" value="1" v-model="radio" />
    				<label for="male">男</label>
    				<input type="radio" id="female" value="0" v-model="radio" />
    				<label for="female">女</label>
    			</div>
    
    			<div>
    				<h1>多选框</h1>
    				<input type="checkbox" id="apple" value="0" v-model="checkbox" />
    				<label for="apple">苹果</label>
    				<input type="checkbox" id="banana" value="1" v-model="checkbox" />
    				<label for="banana">香蕉</label>
    				<input type="checkbox" id="orange" value="2" v-model="checkbox" />
    				<label for="orange">橘子</label>
    			</div>
    
    			<div>
    				<h1>下拉框</h1>
    				<select v-model="select">
    					<option value="0">请选择职业</option>
    					<option value="1">软件工程师</option>
    					<option value="2">一级建筑师</option>
    					<option value="3">二级建筑师</option>
    				</select>
    			</div>
    
    			<div>
    				<h1>文本域</h1>
    				<textarea v-model="textarea"></textarea>
    			</div>
    			<button type="submit" @click.prevent="func">提交</button>
    		</form>

#### 表单域的修饰符 ####

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.number</td> 
   <td>将文本转化为数字，如果输入的不是数字文本时，不会转化不会报错</td> 
  </tr> 
  <tr> 
   <td>.trim</td> 
   <td>去除头尾的空格</td> 
  </tr> 
  <tr> 
   <td>.lazy</td> 
   <td>将input事件转化为change事件，change事件是在表单失去焦点时触发</td> 
  </tr> 
 </tbody> 
</table>

示例

### 自定义指令 ###

当内置指令无法满足一些特殊需求时，就需要用到自定义指令。

首先在全局注册一个用于获取焦点的自定义指令`focus`，需要注意的是注册的指令要在Vue实例前面，否则不能生效，暂时还没找到原因。

Vue.directive("focus",{ 
    	// inserted表示在被绑定的元素渲染到DOM时执行指定的函数
    	inserted: function (el) { 
    		el.focus();
    	}
    });

#### 带参数的自定义指令 ####

Vue.directive("initcolor",{ 
    	bind:function (el, binding) { 
    		// 通过binding.value访问参数
    		el.style.backgroundColor = bingding.value.color;
    	}
    });

html

#### 局部指令 ####

如果不想在全局中定义指令，可以在**Vue实例中**添加`directives`来定义局部指令

var vm = new Vue({ 
    	el:"#box",
    	data:{ },
    	methods:{ },
    	directives:{ 
    		focus:{ 
    			bind:function(el){ 
    				el.focus();
    			}
    		}
    	},
    });

### 计算属性 ###

表达式的计算逻辑有时可能会比较复杂，通过计算属性将其抽取出来，使得模板更加简洁，定义计算属性需要在Vue实例中添加`computed`属性，计算属性是基于data中的数据计算的

var vm = new Vue({ 
    	el:"#box",
    	data:{ 
    		str:"abc",
    	},
    	methods:{ },
    	directived:{ },
    	computed:{ 
    		reverseStr:function	(){ 
    			return this,str.split("").reverse().join();
    		}
    	},
    });

使用时直接在模板中写入相应的函数名即可，这里是reverseStr

<div id="#box">
    	<div>{
       {reverseStr}}</div>
    </div>

> 计算属性与方法用法上特别类似，但与方法又有差别，其区别就在于是否缓存，计算属性是会将计算结果存入缓存中的，也就是说计算属性的方法只会执行一次，之后再使用该计算属性会从缓存中读取。而方法是每次被调用就会执行相应的函数，是不存在缓存的

### 过滤器 ###

使用过滤器来实现对数据的格式化，过滤器既可以在全局定义，也可以在局部定义，其中的val就是需要过滤的值，如果要传递更多的参数，从第二个形参开始

// 在全局中定义过滤器
    Vue.filter("upper",function(val){ 
    	return val.chartAt(1).toUpperCase()+val.slice(1);
    });
    
    // 也可以在局部定义过滤器
    var vm = new Vue({ 
    	el:"#box",
    	data:{ 
    		msg:"abc",
    	},
    	filters:{ 
    		upper:function(val){ 
    			return val.chartAt(0).toUpperCase()+val.slice(1);
    		}
    	}
    });

使用

<div>{
       { msg|upper|lower }}</div>
    
    <div :id="id | formatId">这是在属性中使用过滤器</div>

### 侦听器 ###

用于侦听data中数据的变化，来看看官方的说明

> 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 `watch` 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

var vm = new Vue({ 
    	el:"#box",
    	data:{ 
    		msg:"This is pig",
    	},
    	methods:{ },
    	computed:{ },
    	filters:{ },
    	directives:{ },
    	watch:{ 
    		// msg和需要侦听的数据同名
    		msg:function(val){ 
    			// val即被侦听的值
    			// 当data中的msg变化时，执行这里
    		}
    	},
    });

#### 生命周期 ####

生命周期主要分为三个阶段：**挂载**、**更新**、**销毁**。

#### 挂载（初始化相关属性） ####

<table> 
 <thead> 
  <tr> 
   <th>相关的钩子函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>在实例初始化之后，数据观测和事件配置之前被调用</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>在实例创建完成后立即被调用</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>在挂载开始之前被调用</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子</td> 
  </tr> 
 </tbody> 
</table>

#### 更新（元素或组件的变更操作） ####

<table> 
 <thead> 
  <tr> 
   <th>相关的钩子函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新时调用，发生在虚拟DOM打补丁之前</td> 
  </tr> 
  <tr> 
   <td>Updated</td> 
   <td>由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子</td> 
  </tr> 
 </tbody> 
</table>

#### 销毁（销毁相关属性） ####

<table> 
 <thead> 
  <tr> 
   <th>相关的钩子函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>实例销毁之前调用</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>实例销毁之后调用</td> 
  </tr> 
 </tbody> 
</table>

### 数组更新检测 ###

#### 变更方法（影响原先的数据） ####

Vue对数组的原生API进行了覆盖，以达到响应式的效果

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>push()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>splice()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 替换数组（生成新的数组） ####

这类方法不会对原数组产生影响，而是返回一个新的数组

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>filter()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 改变数组中某个元素 ####

很多时候我们需要改变数组中的单个元素，在Vue中直接采用数组索引的方式改变不是响应式的数据，为此Vue提供了两种API用于操作数组中的单个元素

Vue.set(vm.items, arrIndex, newValue);
    vm.$set(vm.items, arrIndex, newValue);

通过上述两种方法修改的数组元素才会实时响应。同理，对于对象而言，也是同样的操作

[https_cn.vuejs.org_index.html]: https://cn.vuejs.org/index.html
[Vue Devtools]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]: /images/20220829/970f31ccb26942d3a6b8ac0d92d098f4.png