指令操作

vue的指令操作

插值表达式

<body>
    <div id="test">
        <p>{{ msg }}</p>
        <p>{{ num + 1 }}</p>
        <p>{{ msg + num}}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.split('')}}</p>

    </div>


</body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#test",
            data:{
                msg:"orange",
                num:10
            }
        })
    </script>
>>>
orange

11

orange10

r

[ "o", "r", "a", "n", "g", "e" ]

注意:当使用vue语法时,{{}}中如果什么都不放,语法解析不出来,会显示{{}}.

文本指令

{{ }}直接传值

v-text:不能解析html语法,直接传值.

v-html:可以解析html语法.

<div id="text">
    <p v-text="info">123</p>
    <p v-html="info"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#text",
        data:{
            info:'<i>infor</i>',
        },
    })
</script>
>>>
<i>infor</i>

infor

而且代码从上至下执行,如果原p标签中有值,会被后面执行的v-html或者v-text覆盖掉

v-once

无论多少操作,只渲染一次.

<body>
<div id="text">
    <p v-once v-on:click="pClick">{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#text",
        data:{
            info:'<i>infor</i>',
            msg:'1111'
        },
        methods:{
            pClick:function () {
                this.msg = "222"
            }
        }
    })
</script>
>>>
1111

渲染一次1111,后面再也改变不了了

事件指令

事件指令 v-on:事件名="方法变量"

简写: @事件名="方法变量"

<body>
<div id="event">
    <p v-on:click="f1">{{ msg }}</p>
    <p @click="f1">{{ msg }}</p>
    <hr>
    <p @click="f2($event,'第一个')">{{ info }}</p>
    <p @click="f2($event,'第二个')">{{ info }}</p>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#event",
        data:{
            msg:"点击事件",
            info:"是我"
        },
        methods:{
            f1(){
                this.msg ="点击了"
            },
            f2(ev,args){
                this.info = args + "点击了"
            }
        }
    })
</script>

关于鼠标的操作:@后面的

<!--mouseover mouseenter  |  mouseout mouseleave-->

方法	操作
mouseover	鼠标悬浮
mouserout	鼠标移开
mousedown	鼠标点下去
mouseup	鼠标抬起来
mousemove	鼠标在上面移动
contextmenu	右键点击

@事件="变量($event,...)"

当事件变量不添加(),系统默认传入一个事件对象:$event

当事件变量后手动添加了(),就告诉了系统不需要再传入事件对象,但是可以手动传入事件对象.

属性指令

v-bind:属性名="变量"

简写 :属性名="变量"

简单使用

<body>
<div id="property">
    <p v-bind:title="pTitle" :abc="def">简答使用</p>
</div>
</body>
    <script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#property",
        data:{
            pTitle:"简单使用"
        }
    })
</script>

class属性绑定

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            width:200px;
            height:200px;
            background-color: orange;
        }
        .d2 {
            border-radius: 50%;
        }
        .d3 {
            border-radius: 20%;
        }
    </style>
</head>

<body>
<div id="property">
    //可以通过传值的方式传多个
    <p :class="c0"></p>
    //多类名可以使用[]语法,采用多个变量来控制
    <p :class="[c1,c3]"></p>
    //[]中也可以使用常量
    <p :class="['d1',c3]"></p>
    //{类名:布尔值} 可以控制某类名是否起作用,bool=true,d2有效,否则无效
    <p :class="['d1',{d2:is_true}]" @click="is_true=!is_true"></p>
    //点击事件改变src属性
    <p @click="changeImg">大长腿</p>
    <img :src="img_src" alt="">
    //style控制样式样式
    <p :style="myStyle">样式属性</p>
    <p :style="{width:w,height:h,backgroundColor:bgc}">样式属性</p>
</div>
</body>
    <script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#property",
        data:{
            c0:"d1 d2",
            c1:'d1',
            c2:"d2",
            c3:"d3",
            is_true:true,
            img_src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
            myStyle: {
                width: '100px',
                height: '100px',
                backgroundColor: 'red'
            },
            w: '200px',
            h: '100px',
            bgc: 'green'
        },
        methods:{
            changeImg(){
                this.img_src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
            }
    })
</script>

注意:data的style中:左侧比如backgroundColor:属性名:驼峰体="减号连接体"

is_true这种也可以不引号

表单指令

可以实现数据的双向绑定:双向:value给input,input给value

v-model绑定的变量值可以影响表单标签的值,反过来表单标签的值也可以影响变量的值

表单指令 v-model="变量"

相当于是一个可以动态变化的value

//实现多位置标签值动态变化
<body>
<div id="app">
<form action="">
    <input type="text" id="usr" placeholder="enter the count" v-model="v1">
    <input type="text" v-model="v1">
    {{ v1 }}
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            v1:'123'
        }
    })
</script>

单选框

可以通过data中的v2控制标签的默认值

<body>
<div id="app">
<form action="">
    male:<input type="radio" v-model="v2" name="gender" value="male">
    female:<input type="radio" v-model="v2" name="gender" value="female">
    {{ v2 }}
    <button type="submit"></button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            v1:'123',
            v2:"male",
        }
    })
</script>

单一复选框

v3为bool值,可在v3中控制,如果input中有自己的value,会显示自己的value

<body>
<div id="app">
<form action="">
    male:<input type="checkbox" v-model="v3" name="gender">
    {{ v3}}
    <button type="submit"></button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            v1:'123',
            v2:"male",
            v3:false,
        }
    })
</script>

多复选框

可以动态控制数组中的值

<body>
<div id="app">
<form action="">
    male:<input type="checkbox" v-model="v4" name="gender" value="male">
    female:<input type="checkbox" v-model="v4" name="gender" value="female">
    {{ v4}}
    <button type="submit"></button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            v1:'123',
            v2:"male",
            v3:false,
            v4:['male','female']
        }
    })
</script>

注意:js中:

checked bool类型 checked="checked"写或不屑都是bool
multuple bool类型表示多选
一般单独写的都是bool类型

条件指令

v-show="布尔值" 隐藏时,采用display:none进行渲染

v-if="布尔值" 隐藏时,不渲染页面中的数据,(保证了不渲染的数据不会泄露)

v-if|v-else-if|v-else if和else-if需要写===来进行判断,如果不写,相当于if/if-else语句没有,而v-else语句可以不写,当上面的if和else-if条件不符合的时候自动执行

//点击按钮高亮实例
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{display:none;}
        .box {
            width: 200px;
            height: 200px;
        }
        .r {background-color: red}
        .g {background-color: green}
        .b {background-color: blue}
        .active {background-color: yellow}
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="wrap">
        <div>
            <button @click="page='r_page'" :class="{active:page==='r_page'}">red</button>
            <button @click="page='g_page'" :class="{active:page==='g_page'}">green</button>
            <button @click="page='b_page'" :class="{active:page==='b_page'}">blue</button>
        </div>
        <div class="box r" v-if="page ==='r_page'"></div>
        <div class="box g" v-else-if="page==='g_page'"></div>
        <div class="box b" v-else></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:'#app',
        data:{
            page:'r_page'
        }
    })
</script>

循环指令

重要程度:值>键>索引,越重要的越放前面

v-for="(v,i) in str|arr"

v-for="(v,k,i) in dic"

<body>
<div id="app">
    <span>{{info}}</span>
    //字符串遍历
    <i v-for="c in info">{{ c }} </i>
    <i v-for="(c,i) in info">{{i}}:{{ c }} </i>
    //数组遍历
    <div v-for="e in stus">{{ e }}</div>
    <div v-for="(e,i) in stus">{{ i }}:{{ e }}</div>
    //对象的遍历
    <div v-for="v in people">{{v}}</div>
    //嵌套使用
    <div v-for="v in stus">{{v}}</div>
    <div v-for="(v,k,i) in people">{{ i}}: {{ k }}-{{ v }}</div>
    <div v-for="tea in teas">
        <span v-for="(v,k,i) in tea"><span v-if="i !==0">|</span>{{ i }}:{{k}}-{{v}} </span>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
           info: 'good good study',
            stus: ['Bob', 'Tom', 'Jerry'],
            people: {
                name: '猴子',
                age: 36.7,
                sex: '女',
            },
            teas: [
                {
                    name: 'jason',
                    age: 73,
                    sex: '男',
                },
                {
                    name: 'egon',
                    age: 74,
                    sex: '男',
                },
                {
                    name: 'owen',
                    age: 17.5,
                    sex: '男',
                }
            ]
        }
    })
</script>

v-cloak

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

posted @ 2019-12-18 23:25 Agsol 阅读(177) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部