VUE2.X全教程--基础详解（二）

主要内容：

1.Vue实例的生命周期及每个生命周期中自调用函数调用时机

2.模板语法的使用 

3.计算属性 computed   方法methods ,及监听器 watch 操作属性

4.计算属性中的get和set方法的使用

5.Vue中的两种样式绑定方式

6.Vue中的条件渲染

7.Vue中的列表渲染和对象渲染

 

上一章基础回顾

 <div id="root">
            <!--v-on:绑定事件  可以用@来替换   @：click="handleClick"等价-->
            <!--<div v-on:click="handleClick">-->
            <div @:click="handleClick">
            {
  {message}}
            </div>
            <item></item>
        </div>
        <script>
//            当我们在创建一个组件时，其实Vue底层会创建出来一个Vue的实例，也就是说，组件就是Vue实例
            Vue.component('item',{
                template:'<div>hello item</div>'
            })
//            创建一个vue实例对象  入口点  new Vue是一个根实例 vm.$destory()实例销毁
            var vm  = new Vue({
                el:'#root',
                data:{
                    message:'hello world'
                },
                methods:{
                    handleClick:function(){
                        alert("hello");
                    }
                }
            });
        </script>

Vue实例的生命周期钩子

单独放在Vue的实例中

 beforeCreate: function () {
            console.log("beforeCreate");
        },
        created: function () {
            console.log("created");
        },
//                在模板被渲染之前调用
        beforeMount: function () {
            console.log(this.$el);
            console.log("beforeMount");
        },
//                页面渲染之后执行
        mounted: function () {
            console.log(this.$el);
            console.log("mounted");
        },
//     销毁之前被调用： when vm.$destroy() is called
        beforeDestroy: function () {
            console.log("beforeDestroy");
        },
//        销毁之后调用
        destroyed: function () {
            console.log("destroyed");
        },
//        数据在更新之前调用
        beforeUpdate:function(){
            console.log("beforeUpadate");
        },
//        数据在生命改变之后调用
        updated:function(){
            console.log("updated");
        }

Vue的模板语法：

插值表达式： { {}}   

v-text

v-html 

其中v-text 等价于插值表达式  不会对内容中的值进行解析，而是原样输出，而v-html会进行解析

        <div id="app">
            <!--{