vue 中的差值表达式

2019-10-14 本文已影响0人叶叶阿姨

v-cloak=‘’

加在标签中能够解决插值表达式闪烁的问题

v-text=‘’

会覆盖元素中原本的内容
但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

v-html=‘’

可以把内容当作html渲染出来

事件绑定机制

v-bind:

属性绑定机制缩写是:
是vue中，提供的用于绑定属性的指令
(v-bind指令可以被简写为：:也等同于v-bind 所以在实际操作中是可以用:绑定属性的) v-bind后面是可以写合法表达式的

v-on:

事件绑定机制缩写是@ 它是来绑定事件监听器,这样我们就可以做一些交互了.

v-model:

双向数据绑定
元素必须有value值, DOM元素的value 与js内存变量的属性进行绑定
class结合v-bind使用

v-for:

当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用
v-for的使用：
v-for=“xxxx in items” :key=“index”
总结
数组v-for="(ele,index) in dataArr " :key=“index”
对象v-for="(value,key,index) in dataObj" :key=“index”

v-if:

插入或者移除元素(true,插入,false移除)

v-show:

隐藏或者显示元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>day2 v-cloak的学习</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-cloak>====={{ msg }}</p>
        <h4 v-text="msg">----</h4>
        <p v-html='msg2'></p>
        <input type="button" value="按钮" v-bind:title="mytitle + '小叶子'" v-on:click="show">
    </div>

    <script src="./vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg: '小叶子',
                msg2: '<h1>我是h1</h1>',
                mytitle: '这是自己定义的title'
            },
            methods:{
                show: function(){
                    alert('hello小叶子')
                }
            }
        })
    </script>
</body>
</html>