vue.js学习笔记（二）

我不是女神ヾ 2022-04-13 04:16 254阅读 0赞

### 一、vue实例 ###

Vue 应用是通过用 Vue 函数创建一个 Vue 实例开始的。

const app = new Vue({  
    	//选项
    });

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括： el、data、methods 等。

*  模板或元素  
    每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。  
    可以通过el属性来指定。
    
        <div id="app"> </div>
    
        var vm = new Vue({ 
        	el:"#app"  //关联div
        })
    
    这样，Vue就可以对id=app的div元素作为模板进行渲染。  
    注意：在这个div范围外的部分是无法使用该vue特性的。
 *  数据  
    当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
    
        <div id="app">
        	<input type="text" v-model="name"/>
        </div>
    
        var vm = new Vue({ 
        		el:"#app"  //关联div
        		data:{ //数据
        			name:"测试数据",
        		}
        	})
    
    name变化会影响input框中的value;同样，value也会影响name的值。
 *  方法  
    Vue实例中也可以定义方法，并且在Vue实例的作用范围内使用。
    
        <div id="app">
            <button v-on:click="subNum">-</button>
            {
             {number}}
            <button @click="addNum()">+</button>
        </div>
    
        var vm = new Vue({ 
            el:"#app",
            data:{ 
                number: 1,
            },
           methods:{ 
                addNum:function (){ 
                    this.number++;
                },
                subNum:function (){ 
                    this.number--;
                }
            }
        });

### 二、生命周期 ###

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。  
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。  
![vue的生命周期][vue]

### 三、钩子函数 ###

*  beforeCreated：在用Vue时都要进行实例化，该函数就是在**Vue实例化时**调用，可以理解为初始化函数。在Vue1.0时，这个函数的名字就是init。
 *  created：在**创建实例之后**进行调用。
 *  beforeMount：**页面加载完成**，没有渲染。如：此时页面还是\{ \{name\}\}
 *  mounted：可以理解为原生js中的window.οnlοad=function(\{.,.\})，也可以理解为jquery中的$(document).ready(function()\{….\})。  
    功能：**在dom文档渲染完毕之后将要执行的函数**，该函数在Vue1.0版本中名字为compiled。 如：此时页面中的\{ \{name\}\}已被渲染成“测试数据”
 *  beforeDestroy：该函数将在**销毁实例前**进行调用 。
 *  destroyed：该函数将在**销毁实例时**进行调用。
 *  beforeUpdate：组件更新之前。
 *  updated：组件更新之后。

### 四、指令 ###

指令 (Directives) 是带有 v- 前缀的特殊特性。  
指令特性的预期值是：单个 JavaScript 表达式。  
指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

#### 1. 插值表达式 ####

1）花括号： `{ {表达式}}`

*  该表达式支持JS语法，可以调用js内置函数（必须有返回值）
 *  表达式必须有返回结果。没有结果的表达式不允许使用。
 *  可以直接获取Vue实例中定义的数据或函数

2）插值闪烁  
使用花括号\{ \{\}\}方式在网速较慢时会出现问题。  
在数据未加载完成时，页面会显示出原始的\{ \{表达式\}\}，加载完毕后才显示正确数据，称之为插值闪烁。

#### 2.单向绑定：v-text和v-html ####

出现插值闪烁时，可以使用v-text和v-html来代替\{ \{\}\}。  
数据影响了视图渲染，但是反过来就不行，因此可看做是单向绑定。

<div id="app">
    
    	<span v-text="name"></span><br>
    	<span v-html="age"></span>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app",//元素，vue作用的标签 data:{ name:"测试data-name",//直接采用{ {name}} 取值,即可 age:"12", } }); </script>

#### 3. 双向绑定：v-model ####

视图（View）和模型（Model）之间会互相影响。  
目前v-model的可使用元素有：

*  **input**（默认对应的model是字符串）
 *  **select** （单选对应字符串，多选对应也是数组）
 *  **textarea**（默认对应的model是字符串）
 *  **checkbox**（多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型）
 *  **radio** （对应的是input的value值）
 *  **components**（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

<div id="app">
        
        <input type="text" v-model="name">
        <p>{
       {name}}</p>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> // new一个Vue实例 const app = new Vue({ el:"#app",//element，要渲染的页面元素 data:{ //数据：里面有多个属性，均可渲染到视图中 name:"测试数据",//属性：直接采用{ {name}} 取值,即可，更改name的属性值页面也会随之变化 } }); </script>

#### 4. 事件处理：v-on （@） ####

1）基本用法：v-on指令用于给页面元素绑定事件。  
语法：`v-on:事件名="js片段或函数名"`

<div id="app">
    	
    	
    	<button v-on:click="number++">+</button><br/>
    	
    	<button v-on:click="subNum">-</button><br/>
    	{
       {number}}
    	<br>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app",//元素，vue作用的标签 data:{ name:"测试数据",//直接采用{ {name}} 取值,即可 number:50, }, methods:{ //方法 subNum(){ number--; } } }); </script>

2）事件修饰符  
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。  
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。  
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。  
修饰符是由点开头的指令后缀来表示的。

*  **.stop** ：阻止事件冒泡到父元素
 *  **.prevent**：阻止默认事件发生
 *  **.capture**：使用事件捕获模式
 *  **.self**：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
 *  **.once**：只执行一次

例如：阻止默认事件 **.stop**

<div id="app">
        
        <div style="height: 100px;width: 100px;background-color: azure" v-on:click.stop="consoleThis('this is a div');">
            <button @click.stop="consoleThis('this is a button');">
            	冒泡事件测试
            </button>
        </div>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app",//元素，vue作用的标签 data:{ name:"测试data-name",//直接采用{ {name}} 取值,即可 number:50, }, methods:{ //方法 consoleThis(msg){ console.log(msg); } } }); </script>

3）按键修饰符  
在监听键盘事件时，我们经常需要检查常见的键值。  
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">
    
    <input @keyup.enter="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：

*  **.enter**
 *  **.tab**
 *  **.delete** (捕获“删除”和“退格”键)
 *  **.esc**
 *  **.space**
 *  **.up**
 *  **.down**
 *  **.left**
 *  **.right**

4）组合按钮  
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

*  **.ctrl**
 *  **.alt**
 *  **.shift**

<input @keyup.alt.67="clear">
    
    <div @click.ctrl="doSomething">DoSomething</div>

[vue]: /images/20220413/1757145118b0403aa024600c2eb35f1f.png