入门

暂时先引文本文件。。。尴尬了。。。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>

数据发生变化,视图也会发生变化
2019-05-29-20-02-35----

生命周期

生命周期,即数据周期
有如下过程,编译模板,渲染虚拟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>

2019-05-29-20-40-27----

数据响应

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

使用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>

2019-05-29-23-01-26----

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

VUE原理

MVVM 当修改值的时候,会触发对象的set方法,节点更新,输入框添加事件监听,触发一个事件,此时也会继续set,
这就是双向绑定。