学习列表

初学Vue(一)-- Vue简单入门

初学vue(二)-- 条件渲染、修饰符、循环

初学vue(三)-- 生命周期、过滤器、监听属性、计算属性

初学vue(四)-- axios前后端交互、组件

初学vue(五)-- 路由


</div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        </h1>你好,{{ name }}</h1>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: ''
            }
        })
    </script>
  • el: el用于指定一个页面中已存在的DOM元素来挂载Vue实例,它可以使HTMLElement,也可以是CSS选择器,挂载成功过后可以通过 $.el 来访问,vue还提供了很多类似的方法去访问(el也就是element的缩写,规定作用域)
  • Vue实例:var app = new Vue({ })

例1:

    var app = new Vue({
        el: '#app',
        data: {
            a: 2
        }
    })
    console.log(app.a); //2

例2:

    var maData = {
        a: 1
    }
    var app = new Vue({
        el: 'app',
        data: myData,       //在这条语句中进行数据绑定,当其中一方改变数据内容时,另一方也会改变
    })
    
    console.log(myData.a);  //1
    
    //修改属性,原数据也会随之修改
    app.a = 2;
    console.log(myData.a);  //2
    
    //反之,修改原数据,Vue属性也会修改
    myData.a = 3;
    console.log(app.a);     //3
  • 数据绑定<例一,例二>
  • 当修改其中一方的数据时,另一方的数据也会随之修改此为数据绑定

生命周期

每个Vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这个钩子,在合适的时机执行我们的业务逻辑。如果你使用过jQuery,一定知道它的ready() 方法,Vue的生命周期钩子与之类似,比较常用的有:

  • created: 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不能用。需要初始化处理一些数据时会比较有用,后面章节将有介绍。
  • mounted: el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始
  • beforeDestroy: 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

这些钩子与el和data类似,也是作为选项写入Vue实例内,并且钩子的this指向的是调用它的Vue实例:

    var app = new Vue({
        el: '#app',
        data: {
            a: 2
        },
        created: function() {
            console.log(this.a);    //2
        },
        mounted: function() {
            console.log(this.$el);  //<div id="app"></div>
        },
    })

Bill
163 声望11 粉丝

职业:网管