2018-09-16 vue初学五(1.v-text及v-htm

1.v-text/v-html 　　v-once/v-pre

<div id="itany">
        <input type="text" v-model="msg">
        <p v-text="msg">{{msg}}</p>    <!--v-text正常文本输出-->
        <h2 v-html="msg">{{msg}}</h2>  <!--v-html会解析标签-->
        <p v-once>{{msg}}</p>          <!--v-once只绑定一次-->
        <p v-pre>{{msg}}</p>           <!--v-pre原样输出-->
</div>
<script>
        new Vue({
            el:"#itany",
            data:{
                msg:"你好"
            }
        })
</script>

2.v-cloak生命周期

v-cloak需要与CSS的display：none配合使用

<style>
        [v-cloak]{
            display: none;   <!--配合使用-->
        }
</style>
<div id="itany">
    <p v-cloak>{{msg}}</p>
</div>
<script>
    new Vue({
        el:"#itany",
        data:{
            msg:"路飞"
        },
        beforeMount:function(){    //beforeMount载入前添加内容
            alert("海贼王")
        }
    })
</script>

用Vue框架，熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图，详细的给出了vue的生命周期:

20170303180741807.png
它可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

1460000012510450.png