一文带你走进Vue.js

于 2018-03-05 09:40:44 发布
阅读量4.4k 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haeasringnar/article/details/79442098
版权

v-on事件绑定(可以简写为@)

例：

//绑定点击事件
<button type="button" name="button" v-on:click="increase">Increase</button>
//绑定鼠标在里面移动事件
<p v-on:mousemove="updateCoordinates"></p>
//绑定键盘按下事件 里面的alertMe是vue里面的方法或属性
<input type="text" name="name" v-on:keyup="alertMe">
//绑定键盘 enter 和 space(空格) 键按下事件
<input type="text" name="name" v-on:keyup.enter.space="alertMe">

v-bind绑定HTML标签的属性(可以简写为:)

例：

//这个是没用的，无法生效
<a href="{{ link }}">Baidu</a>
//这个才是正确写法，用来绑定href属性
<a v-bind:href="link">Baidu</a>
//这是简写方法
<a :href="link">baidu</a>

v-model数据双向绑定

例：

<!-- 利用v-model实现双向数据绑定 -->
<input type="text" v-model="name"><br />
{{ name }}
<br />
<input type="text" v-bind:value='name' v-model='name'/>
//对应的script
<script type="text/javascript">
  //实例化一个vue对象
  new Vue({
    el:'#app', //绑定要执行的模块
    data:{  //对象的data数据，里面是一些属性和值
      name:'Vane'
    }
  })
</script>

exercise01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>06.exercise-result</title>
    </head>
    <body>
        <div id="exercise">
            <!-- 1.点击按钮显示一个alert提示 -->
            <button type="button" name="button" v-on:click="alertMe">Show Alert</button>
            <!-- 2.监听keydonw事件，并且存储数据到一个data属性中去 -->
            <div>   //我的测试方法
                    <input type="text" v-on:keydown="mytest"/> 
                    <p>
                        {{ value }}
                    </p>
            </div>
            <!-- 3.将2中的keydown进行扩展，只允许Enter事件的触发 -->
            <div>
                    <input type="text" v-on:keydown.enter="value = $event.target.value"/>
                    <p>
                        {{ value }}
                    </p>
            </div>
        </div>
        <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el:"#exercise",
                data:{
                    value:''
                },
                methods:{
                    alertMe:function(){
                        alert('Alert');
                    },
                    mytest:function(event){
                        this.value = event.target.value;
                    }
                }
            })
        </script>
    </body>
</html>

exercise02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>01.listening-event-propagation</title>
    </head>
    <body>
        <div id="app">
            <!-- 函数的参数传递，可以将事件$event作为参数传递到函数中 -->
            <button type="button" name="button" v-on:click="increase(2,$event)">Click me</button>
            <!-- 可以直接在click事件中设置变量值 -->
            <button type="button" name="button" v-on:click="counter++">counter++</button>
            <p>
                {{ counter }} -> {{ counter * 2 }} -> {{ counter * 2 > 10 ? "大于10了" : "小于10呢" }}
            </p>
            <p v-on:mousemove="updateCoordinates">
                Coordinates: {{ x }} / {{ y }}
                - <span v-on:mousemove="dummy">停止鼠标事件</span>
                <!-- 也可以利用.stop来进行操作，则不需要函数支持 -->
                <span v-on:mousemove.stop="">停止鼠标事件</span>
            </p>
            <input type="text" name="name" v-on:keyup="alertMe">
            <br/>
            <!-- 可以限制函数在什么事件下才触发，当前限制的是在enter和space键操作keyup的时候触发alertMe函数 -->
            <input type="text" name="name" v-on:keyup.enter.space="alertMe">
        </div>
        <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0,
                    x:0,
                    y:0
                },
                methods: {
                    increase: function( step, event ) {
                        this.counter += step;
                    },
                    updateCoordinates:function(event){
                        this.x = event.clientX;
                        this.y = event.clientY;
                    },
                    dummy:function(event){
                        //stopPropagation方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
                        event.stopPropagation();
                    },
                    alertMe:function(){
                        alert('Alert');
                    }
                }
            });
        </script>
    </body>
</html>

计算属性的用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>01.listening-event-propagation</title>
    </head>
    <body>
        <div id="app">
            <!-- 函数的参数传递，可以将事件$event作为参数传递到函数中 -->
            <button type="button" name="button" v-on:click="increase(2,$event)">Click me</button>
            <!-- 可以直接在click事件中设置变量值 -->
            <button type="button" name="button" v-on:click="counter++">counter++</button>
            <p>
                {{ counter }} -> {{ counter * 2 }} -> {{ counter * 2 > 10 ? "大于10了" : "小于10呢" }}
            </p>
            <p v-on:mousemove="updateCoordinates">
                Coordinates: {{ x }} / {{ y }}
                - <span v-on:mousemove="dummy">停止鼠标事件</span>
                <!-- 也可以利用.stop来进行操作，则不需要函数支持 -->
                <span v-on:mousemove.stop="">停止鼠标事件</span>
            </p>
            <input type="text" name="name" v-on:keyup="alertMe">
            <br/>
            <!-- 可以限制函数在什么事件下才触发，当前限制的是在enter和space键操作keyup的时候触发alertMe函数 -->
            <input type="text" name="name" v-on:keyup.enter.space="alertMe">
        </div>
        <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0,
                    x:0,
                    y:0
                },
                methods: {
                    increase: function( step, event ) {
                        this.counter += step;
                    },
                    updateCoordinates:function(event){
                        this.x = event.clientX;
                        this.y = event.clientY;
                    },
                    dummy:function(event){
                        //stopPropagation方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
                        event.stopPropagation();
                    },
                    alertMe:function(){
                        alert('Alert');
                    }
                }
            });
        </script>
    </body>
</html>

watch的用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>06.exercise</title>
    </head>
    <body>
        <div id="exercise">
         <!--
         1) 控制按钮让其结果值如果等于37的时候就打印出“done”的字符内容
         -->
          <div>
            <p>当前值：{{value}}</p>
            <button @click="value += 5">加5</button>
            <button @click="value += 1">加1</button>
            <p>结果：{{result}}</p>
          </div>
          <!--
          2) 监控value值，让其在5秒以后使其值自动重置，利用setTimeout
          -->
          <div>
            <input type="text">
            <p>{{value}}</p>
          </div>

        </div>
        <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#exercise',
                data:{
                    value: 0
                },
                computed: {
                    result:function(){
                        return this.value == 37 ? 'done' : 'test';
                    }
                },
                watch:{
                    value:function(value){
                        console.log(value);
                        var vm = this;
                        console.log(this);
                        setTimeout(function(){
                            vm.value = 0;
                        },5000);
                    }   
                },
            });
        </script>
    </body>
</html>
haeasringnar
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haeasringnar

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值