VueJs入门练习-指令(2)

1. v-bind

v-bind可以绑定Dom元素的属性：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
        .A {color: indianred;}
    </style>
</head>
<body>

<div id="app">
    <div v-bind:class="classA">Hello Vue!</div>
    <!--可以简写为: -->
    <div :class="classA">Hello Vue!</div>

    <img v-bind:src="iconSrc">
    <!--可以简写: -->
    <img :src="iconSrc">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            classA: 'A',
            iconSrc: 'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=6b8642ca860a19d8cf03830703fa82c9/50da81cb39dbb6fdf55ffe5d0f24ab18972b3740.jpg'
        }
    })
</script>
</body>

使用v-bind:attr和:attr的效果是一样的：

1.1 v-bind绑定Dom元素的属性还支持绑定数组和对象:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
        .A {color: indianred;}
        .classB{background-color: aquamarine}
        .classC{font-size: 30px; color:dodgerblue}
    </style>
</head>
<body>

<div id="app">
    <div :class="[classA, {classB: hasB, classC: hasC}]">Hello Vue!</div>
    <div v-bind:class="{classC: !hasC}">Hello PHP!</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            classA: 'A',
            hasB: true,
            hasC: false
        }
    })
</script>
</body>

效果：

需要注意的是，v-bind绑定Dom节点属性的时候，数组中的元素item需要在Vue.data中进行定义，Vue会将Vue.data中item的数值赋给Dom节点当前绑定的属性；若v-bind绑定使用了对象(key-value)的方式，value需要在Vue.data中进行定义，当value=true的时候，key会被当作一个字符串赋给Dom节点的属性。

1.2 v-bind绑定Dom节点的属性需要制定绑定的属性 e.g. v-bind:src="xxx"或:src="xxx"，若v-bind后不指定属性则表示绑定当前的Dom节点，此时v-bind中使用一个对象(key-value)，key作为节点的属性，value作为该属性的值需要在Vue.data中定义，需要注意的是，Vue编译会将key统一转换为小写字母赋给节点当作节点的属性名：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
        .B{background-color: aquamarine}
    </style>
</head>
<body>

<div id="app">
    <div v-bind="{id: domID, CLASS: classB, OtherATTR: otherAttr}">Hello PHP!</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            domID: 'id_div',
            classB: 'B',
            otherAttr: 'my_name'
        }
    })
</script>
</body>

效果：

2. v-on绑定节点的事件监听器

v-on进行绑定事件，需要指定绑定的事件类型(click,change,foucs,submit,keyup....)，表达式可以是一个方法名也可以是一个内联函数：

<div id="app">
    <button v-on:click="click_btn">点击事件</button><br/>
    <!--内联函数 -->
    <button v-on:click="_click_btn('hello', $event)">点击事件</button><br/>
    <!--简写 -->
    <button @click="click_btn">点击事件</button><br/>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods:{
            click_btn: function(event){
                console.log("click_btn")
            },
            _click_btn: function(str, event){
                console.log("_click_btn : " + str)
            }
        }
    })
</script>

效果：

2.1 v-on在绑定事件监听器的时候，还可以跟修饰符

.stop 不会将绑定click事件向上传给父节点，同调用event.stopPropagation()
.self 只有当自己的监听器相应的时候才相应，并触发回调函数
.prevent 屏蔽掉节点原有的相应事件

2.1.1 v-on.click.stop

<div id="app">
    <div style="background-color: dodgerblue" @click="click_div">
        <button @click="click_button">点击事件</button><br/>

        <button @click.stop="click_button">点击事件stop</button>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            click_div: function(event){
                console.log("click_div")
            },
            click_button: function(event){
                console.log("click_button")
            }
        }
    })
</script>

效果：

2.1.2 v-on.click.self

使用click.self可以实现click.stop类似的效果：

<div id="app">
    <div style="background-color: dodgerblue" v-on:click.self="click_div">
        <button @click.self="click_button">点击事件</button><br/>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            click_div: function(event){
                console.log("click_div")
            },
            click_button: function(event){
                console.log("click_button")
            }
        }
    })
</script>

效果：

2.1.3 v-on.submit.prevent / v-on.reset.prevent

v-on.submit.prevent可以屏蔽form表单自动submit的操作，v-on.reset.prevent可以屏蔽掉form表单中reset的默认行为。

<div id="app">
    <form @submit.prevent="click_submit" @reset="click_reset">
        <input type="text">
        提交: <input type="submit"><br/>
        重置: <input type="reset">
    </form><br/>

    
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            click_submit: function(event){
                console.log("click_submit")
            },
            click_reset: function(event){
                console.log("click_reset")
            }
        }
    })
</script>

效果：

使用@submit.prevent会屏蔽form表单submit之后刷新表单的操作，同时@reset只绑定了监听函数，所以reset的默认操作还是有的：

<div id="app">
    <form @submit="click_submit" @reset.prevent="click_reset">
        <input type="text">
        提交: <input type="submit"><br/>
        重置: <input type="reset">
    </form><br/>


</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            click_submit: function(event){
                console.log("click_submit")
            },
            click_reset: function(event){
                console.log("click_reset")
            }
        }
    })
</script>

效果：

当v-on:submit 没有使用prevent进行修饰的时候，点击submit之后，表单会打印click_submit，然后迅速进行表单刷新，另外@reset.prevent屏蔽了reset默认的操作，只是执行了v-on绑定的函数。

2.1.4 v-on还可以绑定键盘事件, v-on:keyup="func"

<div id="app">
    <input v-on:keyup="click_keyup" />
    <!--相应单一的键 -->
    <input v-on:keyup.enter="click_keyup_enter">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            click_keyup: function(event){
                console.log("click_keyup: " + event.keyCode)
            }
        }
    })
</script>

效果如下：

Vue还支持自定义键名:

<script type="text/javascript">
    <!--Enter键的 键值为13 -->
    Vue.config.keyCodes.ent = 13
</script>
<div id="app">
    <input v-on:keyup.ent="click_keyup_ent">

    <input @keyup.esc="click_esc">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            click_keyup_ent: function(event){
                console.log("click_keyup_ent")
            },
            click_esc: function(event){
                console.log("click_esc")
            }
        }
    })
</script>

需要注意的是，Vue.config.KeyCodes.myKeyName的定义需要在使用 myKeyName之前。

3. v-ref注册子组件的索引

为了便于在Vue对象的内部直接访问子节点的属性，可以使用ref建立索引(ref="xxx")，在Vue对象内部就可以使用this.$refs.xxx来访问该子节点及其属性：

<div id="app">
    <div ref="div_item">Hello Vue!</div>
    <input ref="input_item">
    <button @click="get_attr">获取属性</button>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            get_attr: function(event){
                console.log("get_attr: " + this.$refs.div_item.textContent)
                console.log("get_attr: " + this.$refs.input_item.value)
            }
        }
    })
</script>

效果：

4. v-pre 不编译

写H5页面的时候，有大部分的页面是不需要Vue操作的，但是在编译的时候Vue仍然会将所有的H5代码进行编译，此时我们可以使用v-pre指令来告诉Vue编译器，该Dom节点及其所有的子节点不需要编译，这样就可以加快编译速度。

<div id="app">
    <div v-pre>
        {{text}}<span>{{text}}</span>
    </div>
    <div>{{text}}</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello Vue!'
        }
    })
</script>

效果：

可以看到第一个div由于加了v-pre指令，Vue并没有进行编译，而是显示节点原本的样子，Vue只对没有v-pre的节点进行编译。

5. v-cloak 延迟渲染

当把这个空指令加到节点上时，Vue不会将节点渲染到页面上，直到Vue结束对该节点的编译之后才会进行渲染，否则用户可能首先看到Vue的标签，然后看到编译之后的数据。

<div id="app">
    <div v-cloak>
        <!--大量的,长时间的数据拉去和编译 -->
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app'
    })
</script>

VueJs入门练习-指令(2)

猜你喜欢