一、创建新的vue实例

1.首先需要将vue引入

<script src="lib/vue-2.6.10.js"></script>

2.然后进行V层的实现

<!--将来new的vue实例，会控制这个元素中的所有内容-->
<!--vue实例所控制的元素区域，就是我们的 V -->
<div id="app">
    <p>{{ msg }}</p> <!--{{}}是vue的语法 插值表达式-->
</div>

3.最后是VM层和M层

<script>
    //创建一个vue实例
    //当我们导入包之后，在浏览器的内存中，就多了一个Vue的构造函数
    //注意：我们new出来的vm对象就是MVVM中的 VM调度者
    var vm = new Vue({
        el: '#app', //表示，当前我们new的这个vue实例，要控制页面的哪一个区域。
        //这里的 data就是MVVM中的M，专门用来保存每个页面的数据的
        data: { //data属性中，存放的是el中要用到的数据
            msg: '欢迎学习vue' //通过vue提供的指令，很方便的就能吧数据渲染到页面上，程序员不再手动操作Dom元素，vue框架不提倡我们手动操作DOM元素。
        }
    })
</script>

至此一个简单的vue实例就完成了。

二、v-cloak、v-text、v-html指令的用法

<style>
        [v-cloak] {
            display: none;
        }
</style>
<div id="app">
    <!--使用 v-cloak 能够解决 插值表达式闪烁的问题(即网络慢时，网页上会先显示出{{msg}}再显示出123)-->
    <p v-cloak>---{{msg}}+++</p><!--这里的---和+++还会保留-->
    <h4 v-text="msg">---+++</h4><!--这里的---+++会被替换而消失-->
    <!--默认 v-text 是没有闪烁问题的-->
    <!--v-text 会覆盖元素中原本的内容，但插值表达式只会替换自己的这个占位符，不会把整个元素的内容情况-->

    <div>{{msg2}}</div><!--网页中显示的还是<h1>哈哈哈</h1>-->
    <div v-text="msg2"></div><!--同上-->
    <div v-html="msg2"></div><!--网页中会显示 哈哈哈 而不是原字符串-->
    <!--v-html会把msg2中的字符串当做html代码插入，且覆盖原本内容-->
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123',
            msg2: '<h1>哈哈哈</h1>'
        }
    })
</script>

三、v-bind指令的用法

<div id="app">
    <!--v-bind: 是Vue中提供的用于绑定属性的指令-->
    <input type="button" value="按钮" v-bind:title="mytitle + '123'">
    <!--注意： v-bind: 指令可以被简写为 : 要绑定的属性-->
    <!-- v-bind 中，可以写合法的js表达式 -->
    <input type="button" value="按钮" :title="mytitle + '123'">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mytitle: '这是一个自己定义的title'
        }
    })
</script>
</div>

四、v-on指令的用法

<div id="app">
    <!-- vue中提供了 v-on: 事件绑定机制-->
    <!--绑定的事件可以使任意浏览器所支持的事件 如v-on:mouseover-->
    <input type="button" value="按钮" v-on:click="show">
    <!--v-on:的缩写是@-->
</div>

<script>
    var vm = new Vue({
        el: '#app',
        methods: { //这个methods属性中定义了当前vue实例所有可用的方法
            show: function(){
                alert("Hello!");
            }
        }
    })
</script>