vue常见的指令、事件、模板

vue ： 是一个mvm框架 它的指令以 v-xx 开头 ，一片html 的代码片段再配合一个 json 同时再 new 一个实例就可以出来一个vue 的雏形。

一、常见的vue指令：

     指令：就是用来扩展 html 标签的功能属性的。

1.v-model： 用在表单html标签元素 例如 ” input “，它可以实现双向数据绑定 ，代码如下：

<div id="box">
   <!-- 双向数据绑定-->
    <input type="text" v-model="msg">
    <br>
    {{msg}}
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    window.onload = function () {
        var  vm  = new Vue({
            //el 放选择器 这是一个id的选择器
            el:"#box",
            //data 中放数据
            data:{
                msg:'welcome vue'
            }
        });
    }

</script>

双向数据绑定指的是：当改变输入框中的值时下面 msg 中的值就给跟着一起改变。
上面的代码就是一个简单的实现 vue 的一个雏形的代码。
el: 对应的值放的要绑定的元素的id 或者类名 或者标签 简而言之就是任意一种选择器。
data:中存放的数据。
2. v-for 循环 代码如下，下面分别循环了数组和 json 数据：

<div id="box">

    <ul>
        <li v-for="(value,index) in arr">
            <!--value是值 index是索引-->
             {{value}} {{ index }}
        </li>

    </ul>
    <hr>
    <li v-for="(value,key,index) in json">
       <!-- 循环json的时候value在前 key 在后-->
        {{key}} {{value}} {{index}}
    </li>

</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    window.onload = function () {
        var  vm  = new Vue({
            //el 放选择器 这是一个id的选择器
            el:"#box",
            //data 中放数据
            data:{
                arr:['apple','orange'],
                json:{a:'apple',b:'banana'}
            }
        });
    }

</script>

上面的两个代码运行效果如下：

二、常见的vue事件：

1. 点击事件
   在vue中点击事件有已下几种写法：
   1. v-onclick = “函数”
   2. v-on :click = “”
   3. @click = “”

当然还有一些其他的常见的事件 但是写法都差不多啦。

2.控制侠士隐藏的事件 v-show = “true/false” (true：为显示 ，false：为隐藏）
3. 阻止事件冒泡有一下两种方式：
1. @click=“show3($ event)” (show3为方法名)
然后在方法中加入如下代码：
event.cancelBubble = true;
2. @click.stop=“show5()” （show5 为方法名）
用这种方法阻止事件冒泡的时候 在show5 这个方法中正常写就可以啦 就不用像上面一样写那个代码啦
4.阻止默认事件有一下两种方式：
1. @contextmenu=“show7($event)” (show7为方法名)
然后在方法中加入如下代码：
event.preventDefault();
2. @contextmenu.prevent=“show8()” (show8为方法名)
用这种方法阻止事件冒泡的时候 在show8 这个方法中正常写就可以啦 就不用像上面一样写那个代码啦

具代码如下：
注意：vue中的方法写在 methods 中

<div id="box">
<input type="button" value="按钮" v-on:click="show()">
    <br>
    <input type="button" value="简写按钮" @click="show()">
    <br>
    <input type="button" value="事件对象按钮" @click="shows($event)">
    <br>
    <div @click="show2()">
        <input type="button" value="事件冒泡按钮" @click="showss()">

    </div>
    <div @click="show4()">
        <input type="button" value="阻止事件冒泡按钮" @click="show3($event)">

    </div>
    <div @click="show6()">
        <input type="button" value="简单阻止事件冒泡按钮" @click.stop="show5()">

    </div>
    <!--鼠标右键-->
    <input type="button" value="阻止默认事件按钮" @contextmenu="show7($event)">
    <br>
    <input type="button" value="简易默认事件按钮" @contextmenu.prevent="show8()">
    <br>
<!--    键盘事件-->
    <input type="text" @keydown="show9()">
    <br>
    <!-- 获得键码键盘事件-->
    <input type="text" @keydown="show10($event)">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
 window.onload = function(){

     var vue = new Vue({
         el:"#box",
         data:{},
         methods:{
             show:function(){
                 alert(1);
             },
             shows:function(event){
                 alert(event.clientX);
             },
             showss:function(){
                alert(1);
             },
             show2:function(){
                 alert(2);
             },
             show3:function(event){
                 alert(3);
                 event.cancelBubble = true;
             },
             show4:function(){
                 alert(4);
             },
             show5:function(){
                 alert(5);
             },
             show6:function(){
                 alert(6);
             },
             show7:function(event){
                 alert(7);
                 event.preventDefault();
             },
             show8:function(){
                 alert(8);
             },
             show9:function(){
                 alert(9);
             },
             show10:function(event){
                 alert(event.keyCode);
             }
         }

     });

 }

</script>

三、vue模板：

{{ msg }} ：数据更新的模板
v-once = “”:数据只绑定一次的模板
v-html = “”： html绑定输出的模板
具体代码如下：

<div id="box">
<input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    <p v-once>{{msg}}</p>
    <br>
    <p v-html="msg"></p>


    <hr>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>


    window.onload = function () {
        var  vm  = new Vue({
            //el 放选择器 这是一个id的选择器
            //也可以放类选择器
            el:"#box",
            //data 中放数据
            data:{
                 msg:'123'
            }
        });
    }

</script>

执行效果如下：