1、创建一个vue实例


    vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改。为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例。

例如HTML中有一个div:
<div id="app"> <p>{{msg}}</p> </div>在js中实例化一个vue:
let app=new Vue({ el:'#app',//标签的类名、id,用于获取元素         //以键值对的形式存放用到的数据成员
        data:{ msg:'显示的内容' },         //包含要用到的函数方法         methods:{ } });
这样js中msg的内容就会在p标签内显示出来。

2、vue常用指令


    1、
v-model:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符,例如.lazy,只有在标签中的值发生改变时才同步到变量,.trim过滤用户输入中的空格。

    2、v-once:不允许修改数据

    例如HTML中有如下三个标签:
<div id="app"> <p v-once>{{msg}}</p> <p>{{msg}}</p> <input type="text"
v-model="msg"> </div>
   
在input框内输入内容后,会传到msg变量中,第二个p标签内显示的信息会随着msg发生变化,而第一个带有v-once的p标签则只会显示msg的初始值,不会随之变化。

    3、v-if="表达式",根据表达式的结果来判断,是true则渲染元素,false则将元素注释掉


   
4、v-show与v-if类似,true就渲染,但是false并不是注释掉,而是通过display:none;来将元素隐藏,如果需要来回切换,使用v-show更好。

    例如:   

        <p v-if="show">显示内容</p> <p v-if="hide">注释内容</p> <p
v-show="hide">v-show隐藏</p>
    在js中规定show:true,hide:false,则显示如下:

    

    5、v-else、v-else-if与v-if连在一起使用构成逻辑判断,不可以单独或者分开使用,例如:       

        <p>请输入分值:</p> <input type="text" v-model="score"> <p
v-if="score>90">优秀</p> <p v-else-if="score>80">良好</p> <p
v-else-if="score>60">中等</p> <p v-else>不及格</p>
    测试结果为:

    

    6、v-for用于遍历元素,使用格式为v-for="(值的形参,索引) in
遍历内容",其遍历的内容可以说数组/对象/字符串,例如在js的data中有一个person对象,person:{name:'tony',age:15,sex:'男'},将其内容在页面遍历输出:  

        <p v-for="(value,key) in person"> {{key+':'+value}} </p>
    生成结果如下:

   


    7、v-text:向标签内注入数据,并且覆盖标签内的其他内容


    8、v-html:向标签内覆盖注入HTML内容作为其子元素

    例如:
<div v-html="vhtml">标签内原来内容</div>
    结果插入一个子div并将覆盖原内容:

    

    9、v-bind:给标签绑定属性、类、样式等,可以缩写为冒号,例如:     

<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
      
由于vue的界面元素都是由数据驱动的,后台从服务器获得的属性、样式等数据需要通过绑定加到界面元素上,通过绑定可以更为灵活地选择要添加属性的元素。vue并不是直接操纵元素的class,而是通过绑定一个数据到class上,然后通过数据驱动class的有无,从而改变页面的显示,这充分显示了vue数据驱动的特点。

        例如给上面person对象中key为'name'的那一行信息绑定一个active类使其高亮显示:
        <p v-for="(value,key) in person" :class="key==='name' ? 'active' :
''"> {{key+':'+value}} </p>
    结果:

    

       
也可以使用如下方法来绑定一个类名,页面会根据变量isActive与hasError的true或false来确定是否绑定active与text-danger类,甚至可以将active设为计算属性,运算后返回true/false。

    注意:绑定的属性可以用驼峰命名法或使用短横线来连接,但使用短横线要用引号引起来

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError
}"> </div>    10、v-on:给标签绑定函数,可以缩写为@,例如绑定一个点击函数 <p>{{msg}}</p>         <button
@click="changeContent()">change</button>
        在Vue的methods中实现changeContent函数:
let app=new Vue({ el:'#app', data:{ msg:'第一次输入信息', }, methods:{
changeContent(){ this.msg="修改后的输入信息"; } } });
        原页面与点击后:

        


    Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的,用于对事件进行约束。例如:
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form
v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联使用,并且使用的顺序很重要 --> <a
v-on:click.stop.prevent="doThat"></a> <!-- 添加事件监听器时使用事件捕获模式 --> <!--
即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.
self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>  
    除了点击事件外,还有按键事件,例如按下键盘码为13的按钮时触发:
<input v-on:keyup.13="submit">
   
为了方便使用vue将一些常用按键重命名,可以使用事件修饰符来使用,包括:.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等,也可以自定义:
Vue.config.keyCodes.f1 = 112;