Vue基本用法：计算属性、监听器和表单输入绑定

watch 监听器：

watch 用于监听单一属性（可以是多个单一属性）。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{{ msg }}</span>
        <br>
        <button @click="msg = 'NEO'">修改</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                msg:"neo"
            }
        },

        // watch 监听器对应的是一个 对象；watch 可以监听多个单个的属性（如： msg）
        watch: {
            msg: function(vals){    // msg 就是 Vue data 中的 msg， 其对应的是一个 函数，函数有一个参数
                console.log(vals)   // NEO

                // 写自己的监听逻辑
                if (vals == "NEO"){
                    this.msg = "大NEO"
                }
            }
        }
    })
</script>
</html>

watch 官方文档：

https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

计算属性：

计算属性可用于监听多个属性

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 直接调用 计算属性中的 key -->
        <p>{{ myMsg }}</p>
        <button @click="clickHander">修改</button>
    </div>
    
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                msg: "neo",
                age: 30
            }
        },

        methods: {
            clickHander(){
                // 此时 this 指向的是 当前对象，即 Vue 对象
                this.msg = "大大NEO",
                this.age = 18
            }
        },

        // computed 计算属性， 对应的是一个对象； 计算属性默认只有 getter 方法
        computed:{
            myMsg: function(){  // 计算属性能够监听多个属性，如下，监听了 msg 和 age
                console.log(this)   // 此时 this 指向的是 当前对象，即 Vue 对象

                // 写自己的业务逻辑

                return `我的名字是“${this.msg}”，年龄是“${this.age}”`
            }
        }

        // 定时器 和 ajax 等（你用别人的函数 ）中要用 箭头函数， setInterval(function(){}, sec) 这是一个闭包，会改变其中匿名函数中 this 的指向，所以此时要用 箭头函数把 this 的指向变为 Vue 对象； 如上 methods 和 computed 中的函数 function(){}， 其中 this 本来就是指向当前对象，即 Vue 对象

        // 计算属性的方法既可以在 指令系统 中用，也可以在模板语法中用 
    })
</script>
</html>

官网文档： https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7

表单输入绑定

数据双向绑定：数据到 vue 的过程， vue 到数据的过程 

v-model 只能用在像 input textarea 和 select 这样的表单控件中

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 在页面刚渲染的时候， input 和 p 标签中的 msg 都从 Vue 的 data 中取值；当 input 输入框中的内容改变时， v-model 也修改了 Vue data 中的 msg的值，然后 p 标签中的 msg 又从 Vue data 中获取到了新的值；即 数据 => Vue => 数据， 双向绑定-->
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
    </div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                msg: "neo"
            }
        }
    })
</script>
</body>
</html>

浏览器效果示例：

数据双向绑定的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- oninput 是 js 中的用于监听 input 输入框的事件 -->
        <input type="text" :value="msg" @input="changeHandler">
        <p>{{ msg }}</p>
    </div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                msg: "neo"
            }
        },

        methods:{
            changeHandler(event){
                this.msg = event.target.value   // event.target.value : input 输入框中的值
            }
        }
    })
</script>
</body>
</html>

官方文档：

https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

Code your future.