Vue 一

入门

暂时先引文本文件。。。尴尬了。。。cli工具一脸懵

vue先学再说，到时候用VueThink http://www.vuethink.com/ 这个框架

实例

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    {{ message }}
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

数据发生变化，视图也会发生变化

生命周期

生命周期，即数据周期

有如下过程，编译模板，渲染虚拟dom树，实例挂载dom树，数据监听，数据绑定，会运行钩子函数

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    {{ message }}
    <button @click="randomTitle()">改变title</button>
    <button @click="destoryVm()">销毁实例</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app', // 挂载DOM
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            randomTitle() {
                this.message = 'ming'
            },
            destoryVm() {
                this.$destroy()
            }
        },
        // 实例创建之后数据观测，事件绑定
        beforeCreate() {
            console.log("实例创建");
        },
        // 实例初始化完成，挂载没有开始
        created(){
            console.log("实例初始化完成 挂载没有开始");
        },
        // 挂载之前，函数首次调用
        beforeMount() {
            console.log("挂载之前，函数调用")
        }

    })
</script>
</html>

数据响应

修改数据的起点，所有网上的节点值更新

使用computed计算属性。

当一个值改变，另外一个值也改变

一个节点数据更新，所有节点数据更新

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <p>A <input type="text" v-model="a"></p>
    <p>B <input type="text" v-model="b"></p>
    <p>C = A * 2 + 2 | {{ c }}</p>
    <p>D = A + B * 2 | {{ d }}</p>
    <p>E = B / 2 | {{ e }}</p>
    <p>F = C + D | {{ f }}</p>
    <p>G = D - E | {{ g }}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app', // 挂载DOM
        data: {
            a: 3,
            b: 4
        },
        computed: {
            c() {
                return this.a * 2 + 2
            },
            d() {
                return Number(this.a) + this.b * 2
            },
            e () {
                return this.b / 2;
            },
            f () {
              return Number(this.c) + Number(this.d)
            },
            g (){
                return this.d - this.e;
            }
        }
    })
</script>
</html>

同样也可以使用get方法，当获取C的时候，会调用getC方法

VUE原理

MVVM 当修改值的时候，会触发对象的set方法，节点更新，输入框添加事件监听，触发一个事件，此时也会继续set，

这就是双向绑定。