当我们在页面当中引入vue.js的时候，这时候我们就可以调用vue的构造函数，来创建一个vue的实例，vue使用的基本代码结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <!-- view视图 -->
    <div id="id">
        <p>{{msg}}</p>
    </div>
    <script>
        // 当引入vue.js，页面就有一个vue的构造函数
        // view-model
        var vm=new Vue({
            el:'#id',
            // m模块，存储数据
            data:{
                msg:'哈哈哈'
            }
        })
        // vue不建议我们直接操作dom元素，而是交给vue实例
    </script>
</body>
</html>

Vue的实例就是view-model部分，而其中的data就属于model部分，被vue实例绑定的html区域，则是view部分

上面例子当中，{{}}这个是插值表达式，我们可以将data中定义的数据插入当中，这样页面就会在对应的位置，渲染出变量的值，在变量前后，我们可以添加任意的字符串，或是表达式

而常见的vue指令有v-text，v-bind，v-html，v-on

他们的使用语法都是在绑定范围内的标签中用于绑定标签属性或定义标签内的内容,例如

<p v-text='msg'></p>
<p v-html='h'></p>
<input type="button" v-bind:value="value" v-bind:title="title" v-on:click="show">

其中，v-text和v-html都是会将所赋值的变量的内容渲染到对应的标签中去，并且会覆盖掉标签中所写有的内容，但是v-html能写入html代码并解析渲染

v-cloak指令可以用来解决闪烁问题，闪烁问题就是指在网速很慢的情况下，vue相关文件未完全加载，此时html的内容就已经被渲染出来，这是插值表达式{{}}中的变量名就会直接显示出来，等到文件加载完毕，插值表达式才会显示本应正确显示的内容

给具有插值表达式的标签添加v-cloak指令，然后在style中使用属性选择器，加上display ：none就可以解决问题

 

事件修饰符：

.prevent ,.stop,.captrue,.once,.self

.prevent就是用来阻止默认事件的，比如a标签的跳转

.stop就是用来阻止事件冒泡

.self则是表示元素的事件无法通过冒泡或者捕获触发

.once表示元素的修饰符只能触发一次

.captrue则将元素的事件冒泡改为事件捕获

 

v-if和v-show用于判断某个标签是否应该被渲染或者是否应该被显示

v-if是决定这个元素是否被渲染，因此对于可能不会出现在用户面前的标签，建议使用v-if

v-show是决定这个元素是否被显示，因此对于频繁切换显示状态的元素，建议使用v-show

 

v-model指令，v-model和上面的所有指令不同，它是双向数据绑定的指令，常和表单元素结合使用