Vue.js基础特性、生命周期及常用指令

╰半橙微兮° 2024-03-26 14:28 64阅读 0赞

**目录**

一、Vue构造选项

el根标签

data数据对象

methods定义方法

二、生命周期

三、常用指令

--------------------

## 一、Vue构造选项 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;"><strong>选项</strong></td> 
   <td style="text-align:center;"><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>el</strong></span></td> 
   <td style="text-align:center;">唯一根标签，决定Vue实例会管理哪一个DOM节点</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>data</strong></span></td> 
   <td style="text-align:center;">Vue实例对应的数据对象</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>methods</strong></span></td> 
   <td style="text-align:center;">定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>computed</strong></span></td> 
   <td style="text-align:center;">定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质上是一个属性而不是一个函数，在电泳时不用加小括号</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>components</strong></span></td> 
   <td style="text-align:center;">定义Vue实例的子组件</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>filters</strong></span></td> 
   <td style="text-align:center;">定义Vue实例的过滤器</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><span style="color:#fe2c24;"><strong>watch</strong></span></td> 
   <td style="text-align:center;">监听数据变化，观察和响应Vue实例上的数据变动</td> 
  </tr> 
 </tbody> 
</table>

### el根标签 ###

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。

### data数据对象 ###

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data属性能够响应数据变化，格式如下：

> **var app = new Vue( \{ 数据 \} )**

（1）以对象（Object）的形式，代码如下：

<div id="app">{
       {content}}</div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    content:"Mustache表达式通过data为对象获取content的值"
                }
            })
        </script>

（2）以函数（function）的形式，代码如下：

<div id="app">{
       {content}}</div>
            <script>
                var app = new Vue({
                    el:"#app",
                    data:function(){
                        return{
                            content:"Mustache表达式通过data为对象获取content的值"
                        }
                    }
                })
            </script>

### methods定义方法 ###

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。基本语法如下：

演示单击按钮修改文本：

<p>单击按钮修改文本</p>
            <div id="app">
                <p>{
       {msg}}</p>
                <button @click="doChange">请单击</button>
            </div>
            <script>
                var app = new Vue({
                    el:"#app",
                    data:{
                        msg:"初始化文本！"
                    },
                    methods:{
                        doChange:function(){
                            this.msg="新的文本！" //改变data中msg属性的值
                         }
                    }
                })
            </script>

执行结果对比

![13225eb3787f48848b6d4669dd733331.png][]![31a5359b9fc04bdeaf8325a309d16e9a.png][]

## 二、生命周期 ##

一个Vue实例完整的生命周期可以分为4个阶段：

> 初始化阶段、模板编译阶段、挂载阶段、卸载阶段

生命周期流程详细介绍如下：

> （1）实例化Vue: new Vue()
> 
> （2）初始化事件和生命周期：init events 和 init lifecycle
> 
> （3）执行beforeCreate钩子函数
> 
> （4）挂载数据（属性赋值）
> 
> （5）执行Created钩子函数
> 
> （6）检查
> 
> （7）执行beforeMount钩子函数
> 
> （8）模板编译
> 
> （9）执行Mounted钩子函数
> 
> （10）执行before Update钩子函数
> 
> （11）执行updated钩子函数：Vue实例销毁之前
> 
> （13）执行destroyed钩子函数：Vue实例销毁后

## 三、常用指令 ##

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当作普通字符串处理，不会解析标签，与插值表达式作用相同。

<div id="app" v-text="msg"></div>
            <script>
                var app = new Vue({
                    el:"#app",
                    data:{
                        msg:"Hello,v-text!"
                    }
                })
            </script>

![a51320630c4a4cba813957de38c96e01.png][]

**注意：**如果同时显示用户前台数据，那么就需要用插值表达式；如果只是单独显示Vue实例里的数据，建议使用“v-text”指令。

2、v-html

v-html用来在DOM元素内部插入HTML代码内容

<div id="app" v-html="msg"></div>
            <script>
                var app = new Vue({
                    el:"#app",
                    data:{
                        msg:"<h1>Hello,v-html!</h1>"
                    }
                })
            </script>

![4f0b214e871341899d350164ca4e4a41.png][]

可以看出v-text与v-html指令不同的是，v-html绑定的数据可以是HTML结构

3、v-cloak

v-cloak指令可以隐藏未编译的Mustache标签直到关联实例结束编译

![84c77c8ca8344396bd3416a11651cb16.png][]

4、v-bind

v-bind指令用于实现单向动态数据绑定

<div id="app">
                <input v-bind:value="msg">
            </div>
            <script>
                var app = new Vue({
                    el:"#app",
                    data:{
                        msg:"Hello,v-bind!"
                    }
                })
            </script>

![8fea9fbac5ce44ac8c739aac899ece29.png][]

**注意：**当改变app.msg的值时，页面文本框中的数据会自动更新，但不能实现视图驱动数据变化，所以v-bind指令时单向数据绑定，而不是双向数据绑定

v-bind可以省略v-bind，简写为一个冒号“ **:** ”

<img v-bind:src="src"></img>
    
    <img:src="src"></img>

5、v-on

v-on指令用来绑定事件监听器

<div id="app">
                <p>{
       {msg}}</p>
                <button v-on:click="sayHello">请单击</button>
            </div>
            <script>
                var app = new Vue({
                    el:"#app",
                    data:{
                        msg:"Hi"
                    },
                    methods:{
                        sayHello:function(){
                            this.msg="Hello,v-on!"
                        }
                    }
                })
            </script>

![a82cdc9283d241b2b541a441ff1555d7.png][]![a9910d5d9a7b486db8fe5c4d5da4a284.png][]

v-on可以直接使用“**@**”简写：

<a v-on:click="do"></a>
    
    <a @click="do"></a>

所有支持Vue.js的浏览器中都能正确解析简写方式，并且它们不会出现在最终渲染的标签中

[13225eb3787f48848b6d4669dd733331.png]: https://img-blog.csdnimg.cn/13225eb3787f48848b6d4669dd733331.png
[31a5359b9fc04bdeaf8325a309d16e9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4a9d42ff1bfc42c394fbf8eafab7695c.png
[a51320630c4a4cba813957de38c96e01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/56a74aad2f454506a59a4fbc4f33f927.png
[4f0b214e871341899d350164ca4e4a41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/219a013932024928a241625c486a0d26.png
[84c77c8ca8344396bd3416a11651cb16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/96a16f5abb374ca9b752db25ad99496c.png
[8fea9fbac5ce44ac8c739aac899ece29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3ae0c9634728496680d065f7dd80833d.png
[a82cdc9283d241b2b541a441ff1555d7.png]: https://img-blog.csdnimg.cn/a82cdc9283d241b2b541a441ff1555d7.png
[a9910d5d9a7b486db8fe5c4d5da4a284.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/930b3c5da3994644ac449c8a3b0455b6.png