DAY66-前端入门-javascript（十二） vue02

最新推荐文章于 2024-08-30 20:29:15 发布

weixin_30877755

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量145

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xvchengqi/p/9873009.html

版权

一.文本操作指令

采用文本指令后，页面标签的内容由vue实例来控制。

1.v-text

<!-- 原文本会被msg替换 -->
<p v-text='msg'></p>

2.v-html

<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>

3.v-once

<!-- v-once只能被赋值一次 -->
<p v-once>{{ msg }}</p>

4.v-model

<!-- v_model vue进行数据双向绑定的指令 -->
<input type="text" v-model='msg'name="">
<p v-text='msg'></p>

5.v-cloak

解决页面闪烁

<!-- 方式一 -->
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div id="app" v-cloak>
        {{ msg }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'message'
        }
    })
</script>


<!-- 方式二 -->
<head>
    <script src="js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'message'
        }
    })
</script>

二.关键指令

1.v-bind

<!-- 该指令绑定的是HTML标签的全局属性，绑定获得属性值可以由变量决定 -->
<!-- 自定义全局属性abc的属性值是变量abc -->
<p v-bind:abc='abc' ></p>

<!-- 操作单一变量 -->
<p v-bind:title='t1'>p1p1p1p1p1p1p1</p>

<!-- 操作普通字符串 -->
<p v-bind:title='"t2"'>p2p2p2p2p2p2p2</p>


<!-- 操作类名 -->
<!-- 操作单一类名 -->
<p v-bind:class='t3'>p3p3p3p3p3p3p3</p>

<!-- 操作多个类名[] -->
<p v-bind:class='[t4,tt4]'>p4p4p4p4p4p4p4</p>

<!-- 操作类名的显隐 -->
<!-- {}语法：{key:value}  -->
<!-- key:实际类名   value(类名的显隐)： true | false -->
<p v-bind:class='{abc:t5}' v-on:click='fn'>p5p5p5p5p5p5p5</p>

<!-- []、{} 的结合使用 -->
<p v-bind:class='[{p6:t6},{pp6:tt6}]'>p6p6p6p6p6p6p6</p>

<!-- v-bind:  简写成 : -->
<!-- 操作Style -->
<div :style='div_style'></div>


<!-- 以上操作相对应的vue -->
<script>
    new Vue({
        el:'#app',
        data:{
            abc:'ABC',

            t1:'p1~title',

            t3:'p pp',

            t4:'p',
            tt4:'pp',

            t5:true,

            t6:true,
            tt6:true,

            div_style:{
                backgroundColor:'cyan',
                width:'200px',
                height:'200px'
            }
        },
        methods:{
            fn(){
                this.t5 = !this.t5
            }
        }
    })
</script>

2.v-on指令

1.简写 v-on:click <=> @click
2.默认绑定 @click="fn" => 回调方法可以获取ev
3.带参绑定 @click="fn(10)" => 回调参数只能获取自定义参数10
4.带参绑定 @click="fn(10, $event)" => 回调参数可以获取自定义参数10即事件参数ev

<div id="app">
    <p @click="fn1"></p>
    <p @click="fn2"></p>
    <p @click="fn3(10)"></p>
    <p @click="fn4($event, 10, 20)"></p>
    <p @click="fn5(10, $event, 20)"></p>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        methods: {
            fn1: function () {
                console.log("click event");
            },
            fn2 (ev) {
                console.log(ev);
            },
            fn3 (num) {
                console.log(num);
            },
            fn4 (ev, n1, n2) {
                console.log(ev);
                console.log(n1);
                console.log(n2);
            },
            fn5 (n1, ev, n2) {
                console.log(ev);
            }
        }
    })
</script>

3.v-model指令

操作的是表单元素的value值

<!-- 数据的双向绑定 -->
<!-- 两个输入框绑定的是同一个val,那么其中一个input的内容改变会直接映射到另一个input上。-->
<!-- v-model绑定的是value,可以省略 -->
<input type="text" v-model="val1" name="usr">
<textarea v-model="val1"></textarea>
<p v-text="val1"></p>

<!-- 单一复选框 -->
<!-- val2值为true|false的变量,控制单选框是否被选中 -->
<input type="checkbox" v-model="val2" name="ck1">

<!-- val3值为自定义"选中"|"未选中",控制单选框是否被选中 -->
<!-- 选中状态,提交给后台可以对应的value为on,为选中状态,不向后台提交value值 -->
<input type="checkbox" v-model='val3' true-value="选中" false-value="未选中" name="ck2" />

<!-- 多复选框 -->
<!-- 多个复选框的v-model绑定一个变量 -->
<!-- 该变量为数组数据,存放的是复选框的value值(value值必须明确) -->
<!-- 出现在数组中的value值对应的复选框默认为选中状态 -->
<!-- 提交给后台数据: ck=ppqiu&ck=zqiu -->
篮球<input type="checkbox" value="lqiu" v-model="val" name="ck">
足球<input type="checkbox" value="zqiu" v-model="val" name="ck">
乒乓球<input type="checkbox" value="ppqiu" v-model="val" name="ck">

<!-- 多单选框 -->
<!-- 多个单选框的v-model绑定一个变量 -->
<!-- 变量值为多个单选框中一个的value值,则该单选框为默认选中状态 那么该单选框默认选中 eg: val: famale => 女单选框默认选中-->
<!-- 提交给后台数据: sex=famale-->
男:<input type="radio" value="male" v-model="val" name="sex">
女:<input type="radio" value="famale" v-model="val" name="sex">

三.条件渲染指令

v-show

<div v-show="isShow"></div>

<!-- 变量isShow值为true(显示,display: block)|false(隐藏,display: none) ->

v-if

<div v-if="isShow"></div>

<!-- 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面) -->

v-if v-else-if v-else

<div v-if="tag == 0" key="0"></div>
<div v-else-if="tag == 1" key="1"></div>
<div v-else="tag == 2" key="2"></div> 

<!-- v-else逻辑可言省略 -->
<!-- 变量tag取值在0~2之间,可以决定具体渲染那个div -->
<!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->

四.列表渲染指令

v-for 遍历数组[]

<ul>
    <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
<!-- list为提供的数组数据  -->
<!-- n为遍历的数组元素值,i为遍历的元素索引  -->
<!-- 一般列表渲染需要建立缓存 -->
<!-- key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作  -->
<script>
new Vue({
    el: "#app",
    data: {
        list: [1, 2, 3, 4, 5],
    }
})
</script>

v-for变量对象{}

<ul>
    <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
<!-- dic为提供的对象(字典)数据 -->
<!-- v为遍历的对象值,k为对象值的键,i为对象值的索引 -->
<!-- key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作 -->
<script>
new Vue({
    el: "#app",
    data: {
        dic: {
            name: '张三',
            age: 18,
            gender: '男'
        }
    }
})
</script>

遍历的嵌套

<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
    <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        persons: [
            {name: "zero", age: 8},
            {name: "egon", age: 78},
            {name: "liuXX", age: 77},
            {name: "yXX", age: 38}
        ]
    }
})
</script>

今日所学实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model='val'>
            <button type="button" @click='submitMsg'>提交</button>
        </div>
        <ul>
            <li v-for='(v,i) in list' :key='i' @click='removeMsg(i)'>{{v}}</li>
        </ul>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            val:'',
            list:[]
        },
        methods:{   
            submitMsg(){
                // 往list中添加input框中的value
                if (this.val){
                    this.list.push(this.val);
                    this.val = ''
                }
            },
            removeMsg(index){
                this.list.splice(index,1)
            }
        }
    })
</script>
</html>

转载于:https://www.cnblogs.com/xvchengqi/p/9873009.html

weixin_30877755

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DAY66-前端入门-javascript（十二） vue02

一.文本操作指令采用文本指令后，页面标签的内容由vue实例来控制。1.v-text<p v-text='msg'></p>2.v-html<p v-html='msg'></p>3.v-once<!-- v-once...
复制链接

扫一扫