Vue - 基础

一、基础

1.指令

v-bind: / :  绑定属性
v-if  条件判断（直接注释掉代码）
v-for  循环（in）
v-on: / @  绑定事件
v-model  文本框双向绑定值
v-once  一次性绑定值
v-html  以html形式输出字符串
.  事件修饰符

    <div id="app" :title="title">
        {{ message }}
        <p v-if="isShow">this p is show or not depond on attribute isShow.</p>
        <ul>
            <li v-for="p in pLi">
                {{ p }}
            </li>
        </ul>
        <button @click="toggleShowInfo">{{ btnName }}</button>
        <br>
        <input type="text" size="30" v-model="inputValue">
        <p>{{ inputValue }}</p>
        <p v-once>{{ oneTimesValue }}</p>
        <br>
        <p>just use <code>{{}}</code>: {{rawHtml}}</p>
        <p>use v-html: <span v-html="rawHtml"></span></p>
        <br>
        <a href="https://www.baidu.com" @click.prevent="clickLink">使用修饰符 . 阻止默认行为</a>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "Hello world!",
                title: "vue",
                isShow: true,
                pLi: ["tanfeng", "jxl"],
                btnName: "hidden",
                inputValue: "default value",
                oneTimesValue: "one times value, not change.",
                rawHtml: "<span style='color: red;'>red font</span>"
            },
            methods: {
                toggleShowInfo: function () {
                    this.isShow = !this.isShow;
                    this.btnName = this.isShow?"hidden":"show";
                },
                clickLink: function () {
                    console.log("click the tag a but not acess the baidu.com")
                }
            }
        })
    </script>

2.基本组件

    <div id="app">
        <ol>
            <my-li
                    v-for="toDo in toDoList"
                    :todo="toDo"
                    :key="toDo.id"
                    >
            </my-li>
        </ol>
    </div>

    <script>
        // 组件要写在app前面才能注册
        Vue.component('my-li', {
            props: ["todo"],
            template: '<li>event: {{ todo.event }}, degree of important: {{todo.degree}}</li>'
        })

        var app = new Vue({
            el: '#app',
            data: {
                toDoList: [
                    {id: 0, degree: 5, event: "sleep"},
                    {id:1, degree: 4, event: "eating"},
                    {id:2, degree: 3, event: "sport"}
                ]
            }
        })
    </script>

二、生命周期钩子

1.自定义属性和实例属性

* vm.xxx  -- 自定义属性/方法
* vm.$xxx  -- 实例属性/方法
* vm.$el  -- 绑定的节点
* vm.$data  -- 数据data
* vm.$watch  -- 观察方法，监控属性的变化
* 完整api -- https://cn.vuejs.org/v2/api

2.vue实例生命周期

* created  -- 实例被初始化时
* mounted -- 绑定节点时
* updated -- 更新实例时
* destroyed  -- 销毁实例时

    <div id="app">
        {{ name }}
    </div>

    <script>
        var vm = new Vue({
            data: {
                "name": "tf"
            },
            created: function () {
                console.log("the app is created.");
            },
            mounted: function () {
                console.log("the app is mounted");
            },
            updated: function () {
                console.log("the app is updated.");
            },
            destroyed: function () {
                console.log("the app is destroyed.");
            }
        })
    </script>

* 1.刷新浏览器
* 打印 the app is created.
* 2.手动mount节点， vm.$mount(document.getElementById("app"))
* 打印 the app is mounted
* 3.更新实例， vm.name = "zs"
* 打印 the app is updated.
* 4.销毁实例， vm.$destroy()
* 打印 the app is destroyed.

三、计算属性和侦听器

    <div id="app">
        <p>origin message: {{ msg }}</p>
        <p>reverse message: {{ reverseMsg }}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "hello, litter friend."
            },
            computed: {
                // 计算属性基于依赖（msg）缓存
                reverseMsg: function () {
                    return this.msg.split("").reverse().join("");
                },
                fullName: {
                    get: function () {
                        // getter
                    },
                    set: function (newValue) {
                        // setter
                    }
                }
            },
            watch: {
                msg: function (newValue, oldValue) {
                    // 侦听msg
                }
            }
        })
    </script>