适合初学者的Vue-1.0教程(二)

2017-08-10  本文已影响0人  林立镇

在学习了教程(yi),之后大家对data,method,v-for,v-on相信都有所了解了
现在进一步介绍Vue
v-on:因为经常被使用,所以它有个简写即@

    <div id="box">
        <input type="button" value="按钮1" v-on:click="AlertMsg1()">
        <input type="button" value="按钮2" @click="AlertMsg2()">
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:"#box",
                data:{},
                methods:{
                    AlertMsg1:function(){
                        alert(1)
                    },
                    AlertMsg2:function(){
                        alert(2)
                    }
                }
            })
        }
    </script>
image.png

按钮1和按钮2都会弹出数字,说明指令v-on:等价于@

接上文的例子,讲一下事件冒泡

    <div id="box">
        <div @click="AlertMsg2()">
            <input type="button" value="按钮1" v-on:click="AlertMsg1()">
        </div>
    </div>
image.png image.png

点击之后,先弹出1,再弹出2,说明里面元素的事件先触发,它的父元素后触发
为了阻止冒泡,我们得做点什么

<input type="button" value="按钮1" v-on:click="AlertMsg1($event)">
AlertMsg1: function (e) {
                        alert(1)
                        e.cancelBubble=true
                    }

修改了这两段代码之后,就不会冒泡了
但是,仍然很麻烦,能不能再简单一点呢?

            <input type="button" value="按钮1" v-on:click.stop="AlertMsg1()">
AlertMsg1: function (e) {
                        alert(1)
                    }

那现在只要在事件后面加上“.stop”就可以阻止冒泡了!
除了阻止冒泡,对于事件我们还经常在表单上,阻止默认行为,改怎么做呢?

//传统的做法
e.preventDefault
//Vue的做法
        <form action="/" id="formCs" @submit.prevent="AlertMsg1()"> 
            <input type="submit" >
        </form>

这样就阻止了默认行为,只要加“.prevent”就可以了
还有常用的键盘事件

    <div id="box">
        <input type="text" @keydown="alert1($event)">
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {},
                methods: {
                    alert1: function (e) {
                        alert(e.keyCode)
                    }
                }
            })
    </script>
image.png

在输入框,每次按下键盘的按键后,会弹出相应的码号
常用的键盘事件除了keydown还有keyup
有的时候我们希望只在相应的按键触发处理函数,则必须在函数里做一个判断

if(e.keyCode===xx){}

现有有更简单的方式

<input type="text" @keydown.65="alert1($event)">

在键盘事件后面加上“.键的码号”,“a”的码号是65,所以只有输入a时才调用处理函数
对于码号,比较常用的也做了处理,
比如上、下、左、右四个方向键分别用.up、.down、.left、right,还有回车键.enter、.Alt等

    <div id="box">
        ![]({{url}})
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    url:'https://www.baidu.com/img/bd_logo1.png'
                },
                methods: {
                }
            })
    </script>

会报错,没有效果

        ![](url)

使用v-bind:指令绑定属性

![](url)

“v-bind:”指令的简化语法“:”
如果绑定class属性Vue给出了更多语法

    <style>
    .blue{
        color:blue;
    }
    </style>
    <div id="box">
        <h4 :class="blue">Vue属性绑定</h4>
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    blue:'blue'
                },
                methods: {
                }
            })
    </script>
image.png

如果添加多个class

    <style>
    .blue{
        color:blue;
    }
    .yellow{
        background:yellow;
    }
    </style>
    <div id="box">
        <h4 :class="[blue,yellow]">Vue属性绑定</h4>
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    blue:'blue',
                    yellow:'yellow'
                },
                methods: {
                }
            })
    </script>
image.png

如果class的值想让它在需要的时候出现,不需要时隐藏,该怎么办

    <style>
    .blue{
        color:blue;
    }
    </style>
    <div id="box">
        <h4 :class="{blue:true}">Vue属性绑定</h4>
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    blue:'blue'
                },
                methods: {
                }
            })
    </script>
image.png
        <h4 :class="{blue:false}">Vue属性绑定</h4>

当对象内blue的值为false时,则class隐藏

image.png

用chrome检查元素,就会发现class的值没有了
一般我们这样用这个特性

    <style>
    .blue{
        color:blue;
    }
    .yellow{
        background:yellow
    }
    </style>
    <div id="box">
        <h4 :class="json">Vue属性绑定</h4>
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    json:{
                        blue:true,
                        yellow:false
                    }
                },
                methods: {
                }
            })
    </script>
image.png

浏览器检查元素Elements会显示


image.png

因此style也是如此

    <div id="box">
        <h4 :style="[blue,yellow]">Vue属性绑定</h4>
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    blue:{color:'blue'},
                    yellow:{backgroundColor:'yellow'}
                },
                methods: {
                }
            })
    </script>
image.png

但是复合样式,必须采用驼峰命名法
接下来,会介绍Vue的模板

    <div id="box">
        <input type="text" v-model="msg">
        <br>
        {{msg}}
    </div>
    <script>
            new Vue({
                el: "#box",
                data: {
                    msg:'welcome you'
                 },
                methods: {
                }
            })
    </script>
image.png image.png

v-model指令,在输入框的数据会更新模板变化,msg被更新了
如果只绑定一次,怎么办

    <div id="box">
        <input type="text" v-model="msg">
        <br>
        <span>{{msg}}</span>
        <br>
        <span v-once>{{msg}}</span>
    </div>
image.png image.png

data对象msg属性的值更新时,插值处的{{msg}}的值会更新
但使用v-once指令后,则只会在刚开始更新,后来数据更新时,则不会跟着更新
如果data对象的msg的值是html

    <div id="box">
        <input type="text" v-model="msg">
        <br>
        <span>{{msg}}</span>
        <br>
        <span v-html="msg"></span>
    </div>
image.png
<span>{{'msg'}}</span>
image.png

使用引号包裹之后,模板就无效了

上一篇下一篇

猜你喜欢

热点阅读