vue笔记-02（指令-绑定数据和方法）

2020-05-04 本文已影响0人 7ColorLotus

v-cloak指令:
1. 解决插值表达式闪烁的问题
2. 在元素上设置v-cloak，需要手动设置style display。当数据加载完毕后，元素的v-cloak属性消失
v-text指令:
1. 功能等同于插值表达式
2. 默认v-text没有闪烁问题
3. v-text会覆盖元素中原本的内容，但是插值表达式只替换自己的这个占位符，不会把整个元素的内容清空
v-html指令：把元素的内容当html处理
v-bind: 指令
1. VUE提供用于绑定的属性的指令
2. 使用 ”:“ 是"v-bind:"的简写
3. 可以在v-bind值中写合法的js表达式
v-on: 指令
1. 绑定事件的指令
2. VM中定义methods属性定义了当前vue实例所有的可用的方法
3. 简写：”@“
代码示例

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <!-- v-cloak -->
        <p v-cloak>{{msg}}</p>
        <!-- v-text -->
        <p v-text="msg"></p>
        <!-- v-html -->
        <p v-html="msg2"></p>
        <!-- v-bind: -->
        <button v-bind:title="btnTitle + 'haha'">点我</button>

        <input type="button" :title="btnTitle + 'v-bind简写'"  value="点我22"/><br/>

        <!-- v-on指令 -->
        <input type="button" v-on:mouseover="btn_click" value="haha"/>

    </div>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg : "hello",
                msg2: "<h1>你好哈</h1>",
                btnTitle: '点我看看222'
            },
            methods:{
                btn_click: function(){
                    alert('hello');
                }
            }
        })
    </script>
</body>

在VM实例中，如果想要调用data中的数据或methods方法，必须通过this.属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象
VM实例会监听自己data中所有数据的改变，只要数据一发生变化，就会把新的数据从data上同步到页面中去。好处：程序员只需要关心数据，不需要考虑如何重新渲染页面
使用（）=》{} 替换掉function(){}方式，这样function内部中的this就跟外部的this使用同一个对象
vue事件修饰符
1. .stop 阻止冒泡
2. .prevent 阻止默认事件,如a标签的href点击事件
3. .capture 添加事件侦听器时使用事件捕获模式
4. .self 只当事件在该元素本身(比如不是子元素)触发时触发回调，只会阻止自己身上冒泡行为的触发，并不会阻止其他的冒泡行为
5. .once 事件只触发一次
v-model指令
1. v-bind: 只能实现数据的单向绑定，只能从M自动绑定到V，无法实现数据的双向绑定
2. v-model 可以实现双向绑定，能从M自动绑定V，也可以实现V自动绑定到M。只能应用到表单元素上
代码示例

<div id="app">

        <!-- .stop 阻止冒泡，只触发当前事件-->
        <!-- <div class="div1" @click="cliDiv1">
            <input type="button" value="点我" @click.stop="cliBtn">
        </div> -->

        <!-- .prevent 阻止标签的默认事件 -->
        <!-- <div class="div1" @click="cliDiv1">
            <a href="http://www.baidu.com" @click.prevent="cliBtn">点击链接</a>
        </div> -->


        <!-- 使用事件捕获模式 -->
        <!-- <div class="div1" @click.capture="cliDiv1">
            <input type="button" value="点我" @click="cliBtn">
        </div> -->

        <!-- .self 只有触发到元素本身时，元素上的事件才被触发 -->
        <div class="div1" @click.self="cliDiv1">
            <input type="button" value="点我" @click="cliBtn">
        </div>

    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                msg : 'hello'
            },
            methods: {
                cliBtn(){
                    console.log("点击了btn....");
                },
                cliDiv1(){
                    console.log("点击了div1....");
                }
            }
        });
    </script>

vue笔记-02（指令-绑定数据和方法）

猜你喜欢

热点阅读