后端程序员的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、流程图

在这里插入图片描述

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最强大的功能之一，组件可以封装可重用的代码；
组件让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个一个的组件树；
在这里插入图片描述
创建一个组件的语法格式：

Vue.component(tagName, options)

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

<tagName></tagName>

全局组件

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

<!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">
        <!-- 自定义的vue组件 -->
        <power></power>
    </div>

    <script>
        // 注册
        Vue.component('power', {
            template: '<h1>自定义全局组件!</h1>'
        })

        // 创建根实例
        new Vue({
            el: '#app'
        })
    </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>