【Vue】三、Vue.js的常用选项

桃扇骨 2023-10-09 15:16 7阅读 0赞

#### 后端程序员的vue学习之路 ####

*  一、选项 / 数据
 *   *  1、data
     *  2、computed
     *  3、 methods
     *  4、computed 与 methods的区别
     *  5、watch
 *  二、选项 / DOM
 *   *  el
     *  template
 *  三、选项 / 生命周期钩子
 *   *  1、生命周期钩子有如下这些：
     *  2、流程图
     *  2、练习代码
 *  四、选项 / 资源
 *   *  1、filters
     *  2、directives
     *  3、components
     *   *  全局组件
         *  局部组件

## 一、选项 / 数据 ##

### 1、data ###

Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。  
举例：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test02</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    
        <div id="app" class="container">
           <template v-for="goods in goodsList">
                {
        {
         goods.name }} -- {
        {
         goods.quantity }} -- {
        {
         goods.price }} <br/>
           </template>
           商品数量：{
        {
         totalNum }}，合计：{
        {
         totalPrice }} 元
        </div>
    
        <script>
            var vm = new Vue({
        
                el: "#app",
                data () {
        
                    return {
        
                        totalPrice: 605,//购买总价
                        totalNum: 4,//购买数量
                        goodsList: [
                            {
        
                                id: 1,
                                name: '硬盘',
                                quantity: 1,
                                price: 309
                            } {
        
                                id: 2,
                                name: '内存',
                                quantity: 1,
                                price: 238
                            }
                        ]
                    }
                }
            });
        </script>
    </body>
    
    </html>

### 2、computed ###

计算属性，进行一些运算逻辑，对数据进行处理等；  
在模板内的直接使用表达式也非常便利，但是这种方式设计的初衷是用于简单运算，在模板中放入太多的逻辑会让模板过重且难以维护，所以此时就提供了computed计算属性的选项；  
举例：

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
        <title>test03</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    
      <div id="app">
        千米 : <input type="text" v-model="kilometers">
        米 : <input type="text" v-model="meters">
    
        <p>原始字符串: {
        {
         message }}</p>
    
        <p>计算后反转字符串: {
        {
         message.split('').reverse().join('') }}</p>
        <p>计算后反转字符串: {
        {
         reversedMessage }}</p>
        
        <p>现在时间：{
        {
         now }}</p>
        <p>现在时间：{
        {
         now2 }}</p>
        <p>网站信息：{
        {
         site }} </p>
      </div>
    
      <script type="text/javascript">
        var vm = new Vue({
        
          el: '#app',
          data: {
        
            kilometers: 10,
            meters: 10000,
            message: '联系计算属性computed',
            url: 'http://www.baidu.com'
          },
          //计算属性,返回属性运算后的结果
          computed: {
        
            reversedMessage: function () {
        
              //`this`指向vue实例
              return this.message.split('').reverse().join('')
            },
            now: function () {
        
              return Date.now()
            },
            now2() {
        
              return Date.now()
            },
            site: {
        
              //computed计算属性默认提供getter方法
              get: function () {
        
                return this.message + ' -- ' + this.url
              }
            }
          }
        });                    
      </script>
    </body>
    
    </html>

### 3、 methods ###

methods 选项主要定义了一些执行函数；

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <span>减少: </span>
            <button @click="sub"> - </button>
            <span> </span>
            <span> {
        {
         num }} </span>
    
            <button @click="add"> + </button>
            <span>增加:</span>
    
            <span style="color: red;"> {
        {
         message }} </span>
        </div>
    
        <script>
            var data = {
        
                num: "0",
                message: ""
            }
            new Vue({
        
                el: '#app',
                data: data,
                methods: {
        
                    // 相加函数
                    add: function () {
        
                        if (this.num >= 10) {
        
                            this.message = "该商品最多可购买10件"
                            return
                        }
                        this.message = ''
                        this.num++
                    },
                    // 相减函数
                    sub: function () {
        
                        if (this.num <= 0) {
        
                            this.message = ''
                            return
                        }
                        this.message = ''
                        this.num--
                    }
                }
            })
        </script>
    </body>
    
    </html>

### 4、computed 与 methods的区别 ###

1、computed是计算属性，比如你要根据data里一个值随时变化做出一些处理，就用computed；（这里是属性调用）  
2、methods里面是定义很多函数，比如你点击事件要执行一个函数，这时候就用methods；  
（这里是方法调用）

### 5、watch ###

watch选项可以监听值的变化；

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
        <title>test06</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        单位换算器：<br>
        米 : <input type="text" v-model="meters">
        千米 : <input type="text" v-model="kilometers">
        万米：<input type="text" v-model="wm">
      </div>
    
      <script type="text/javascript">
        var vm = new Vue({
        
          el: '#app',
          data: {
        
            kilometers: 0,
            meters: 0,
            wm: 0
          },
          watch: {
        
            meters: function (val) {
        
              this.meters = val;
              this.kilometers =  val/ 1000;  
              this.wm =   val / 10000
            },
    
            kilometers: function (val) {
        
              this.kilometers = val;
              this.meters = val * 1000; 
              this.wm =  val/10
            },
        
            wm: function(val){
        
             this.wm = val; 
             this.kilometers = val*10;
             this.meters =   val*10000
            }
          }
        });
      </script>
    </body>
    
    </html>

## 二、选项 / DOM ##

### el ###

把页面上已存在的 DOM 元素作为 Vue 实例的挂载目标；  
举例：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test07</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    
        <span id="appp">
    
            <div id="app">
                <p v-html="message1"></p>
            </div>
    
            <div class="app">
                <p v-html="message2"></p>
            </div>
    
            <div app>
                <p v-html="message3"></p>
            </div>
    
        </span>
    
        <script>
            var vm = new Vue({
        
                el: '#appp',
                data: {
        
                    message1: "<h1>这个是Message1</h1>",
                    message2: "<h1>这个是Message2</h1>",
                    message3: "<h1>这个是Message3</h1>"
                }
            })
        </script>
    </body>
    
    </html>

### template ###

用模板内容 替换 挂载元素的内容，挂载元素的内容都将被模板替换；  
举例：

\-练习1

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {
        {
         message }}
        </div>
    
        <script>
            var vm = new Vue({
        
                el: '#app',
                data: {
        
                    message: "这个是正文内容"
                },
                //app的会被template替换
                template: '<div id="template">这是一个 "模板" 内容.</div>'
            })
        </script>
    </body>
    
    </html>

*  练习2

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {
        {
         message }}
        </div>
    
        <template id="template"> 
            <span>
                <h1 style="color:red">这是一个模板内容</h1> 
                <h1 style="color:red">这是一个模板内容</h1> 
              
            </span>
        </template> 
    
        <script>
            var vm = new Vue({
        
                el: '#app',
                data: {
        
                    message: "这个是正文内容"
                },
                // 会覆盖掉app的内容
                template: '#template'
            })
        </script>
    </body>
    
    </html>

*  练习3

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {
        {
         message }}
        </div>
    
        <script type="x-template" id="template">
            <span> 
                <h1 style="color:red">这是一个script标签模板</h1> 
                <h1 style="color:red">这是一个script标签模板</h1> 
                <h1 style="color:red">这是一个script标签模板</h1> 
            </span>
        </script> 
    
        <script>
            var vm = new Vue({
        
                el: '#app',
                data: {
        
                    message: "这个是正文内容"
                },
                // 会覆盖掉app
                template: '#template'
            })
        </script>
    </body>
    
    </html>

## 三、选项 / 生命周期钩子 ##

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会；

### 1、生命周期钩子有如下这些： ###

*  **beforeCreate** ：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
 *  **created**：在实例创建完成后被立即同步调用
 *  **beforeMount**：在挂载开始之前被调用：相关的 render 函数首次被调用
 *  **mounted**：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
 *  **beforeUpdate**：在数据发生改变后，DOM 被更新之前被调用。
 *  **updated**：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
 *  **activated**：被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用
 *  **deactivated**：被 keep-alive 缓存的组件失活时调用。该钩子在服务器端渲染期间不被调用。
 *  **beforeDestroy**：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
 *  **destroyed**：实例销毁后调用。该钩子在服务器端渲染期间不被调用。
 *  **errorCaptured**：在捕获一个来自后代组件的错误时被调用。

### 2、流程图 ###

![在这里插入图片描述][c0d97a843cc84d62a22507f62f857211.png_pic_center]

### 2、练习代码 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <input type="text" v-model="message"> 
        </div>
    
        <script>
            var vm = new Vue({
        
                el: '#app',
                data: {
        
                    message: "测试vue的声明周期钩子"
                },
                methods: {
        
                    showMessage : function() {
        
                        console.log("showMessage()方法执行.")
                    }
                },
    
                beforeCreate() {
        
                    // this.showMessage();
                    console.log('------------beforeCreate--------------');
                },
                created() {
        
                    console.log('------------created--------------');
                    console.log(this.message);
                    this.showMessage();
                },
    
                beforeMount() {
        
                    console.log('------------beforeMount--------------');
                    console.log(this.message);
                    this.showMessage();
                },
                mounted() {
        
                    console.log('------------mounted--------------');
                    console.log(this.message);
                    this.showMessage();
                },
    
    
                beforeUpdate() {
        
                    console.log('------------beforeUpdate--------------');
                    console.log(this.message);
                    this.showMessage();
                },
                updated() {
        
                    console.log('------------updated--------------');
                    console.log(this.message);
                    this.showMessage();
                },
    
                
                activated() {
        
                    console.log('------------activated--------------');
                    console.log(this.message);
                    this.showMessage();
                },
                deactivated() {
        
                    console.log('------------deactivated--------------');
                    console.log(this.message);
                    this.showMessage();
                },
                beforeDestroy() {
        
                    console.log('------------beforeDestroy--------------');
                    console.log(this.message);
                    this.showMessage();
                },
                destroyed() {
        
                    console.log('------------destroyed--------------');
                    console.log(this.message);
                    this.showMessage();
                },
                errorCaptured() {
        
                    console.log('------------errorCaptured--------------');
                    console.log(this.message);
                    this.showMessage();
                }
            })
        </script>
    </body>
    
    </html>

## 四、选项 / 资源 ##

### 1、filters ###

Vue.js 允许自定义过滤器，常用于一些文本格式化，由 “管道符” 连接；  
包含 Vue 实例可用过滤器的哈希表。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test12</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        <p>{
        {
         message }}</p>
    
        <input v-model="message">
    
        <p>
          {
        {
         message | capitalize | capitalize2 }}
        </p>
        
      </div>
    
      <script>
        new Vue({
        
          el: '#app',
          data: {
        
            message: 'www.baidu.com'
          },
          methods: {
        
    
          },
          filters: {
        
            //把字符变成大写
            capitalize: function (value) {
        
              if (!value) return ''
              value = value.toString()
              return value.toUpperCase()
            },
            capitalize2: function (value) {
        
              if (!value) return ''
              value = value.toString()
              return value.substring(0,5)
            }
          }
        })
      </script>
    </body>
    
    </html>

### 2、directives ###

通过directives实现自定义的指令  
全局自定义指令：Vue.directive()  
局部自定义指令：directives

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>test</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    
      <input v-focus>
    
      <script>
      // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        
        // 聚焦元素
        el.focus()
      }
    })
    
    
      </script>
    </body>
    
    </html>

### 3、components ###

组件（Component）是Vue.js最强大的功能之一，组件可以封装可重用的代码；  
组件让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个一个的组件树；  
![在这里插入图片描述][1497dd4814c848c4a5807eb2da144fc3.png]  
创建一个组件的语法格式：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项，注册后，我们可以使用以下方式来调用组件：

#### 全局组件 ####

所有实例都能用全局组件；

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>test</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    
      <div id="components-demo">
        <button-counter></button-counter>
      </div>
    
      <script>
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-counter', {
        
          data: function () {
        
            return {
        
              count: 0
            }
          },
          template: '<button v-on:click="count++">You clicked me {
        {
         count }} times.</button>'
        })
        new Vue({
         el: '#components-demo' });
    
      </script>
    </body>
    
    </html>

#### 局部组件 ####

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用；

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Vue测试实例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    
        <div id="app">
            
            <power></power>
        </div>
    
        <script>
            var Child = {
        
                template: '<h1>自定义局部组件!</h1>'
            }
    
            //创建根实例
            new Vue({
        
                el: '#app',
                components: {
        
                    //<power>将只在该vue实例中可用
                    'power': Child
                }
            })
            
            // new Vue({
        
            //     el: '#app',
            //     components: {
        
            //         //<power>将只在该vue实例中可用
            //         'power': {
        
            //             template: '<h1>自定义局部组件!</h1>'
            //         }
            //     }
            // })
        </script>
    </body>
    
    </html>

[c0d97a843cc84d62a22507f62f857211.png_pic_center]: https://img-blog.csdnimg.cn/c0d97a843cc84d62a22507f62f857211.png#pic_center
[1497dd4814c848c4a5807eb2da144fc3.png]: https://img-blog.csdnimg.cn/1497dd4814c848c4a5807eb2da144fc3.png