68 vue框架-part2 指令操作

Posted bowendown

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了68 vue框架-part2 指令操作相关的知识,希望对你有一定的参考价值。

一、Vue指令操作

1. 表单指令

v-model="变量"

使变量值与表单标签的value相关。

实现数据双向绑定,输入内容可以实时改变vue变量.

其中,输入框、单选框、单一复选框与多复选框的展示信息不相同。

单复选框展示true或false,而多复选框展示列表套复选框value值,若无值则为空列表。

<form action="">
    <!--重点-->
    <input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
    <input type="text" v-model="v1">
    {{ v1 }}

    <hr>

    <!--1.单选框-->
    男:<input type="radio" name="sex" value="male" v-model="v2">
    女:<input type="radio" name="sex" value="female" v-model="v2">
    {{ v2 }}

    <hr>

    <!--2.单一复选框-->
    卖身契:同意 <input type="checkbox" name="agree" v-model="v3">
    {{ v3 }}

    <hr>

    <!--3.多复选框-->
    爱好:<br>
    男:<input type="checkbox" name="hobbies" value="male" v-model="v4">
    女:<input type="checkbox" name="hobbies" value="female" v-model="v4">
    哇塞:<input type="checkbox" name="hobbies" value="other" v-model="v4">
    {{ v4 }}
    <hr>

    <button type="submit">提交</button>
</form>

2. 条件指令

v-show=‘布尔变量‘ 变量值为false隐藏时,采用display:none在前端进行标签渲染。

v-if="布尔变量" 变量值为false隐藏时,不在前端页面进行渲染,可以保证数据的安全,因此用的比较多。

v-if | v-else-if | v-else 用来直接在标签中写逻辑判断语句。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak] { display: none; }

        .box {
            width: 200px;
            height: 200px;
        }
        .r {background-color: red}
        .b {background-color: blue}
        .g {background-color: green}

        .active {
            background-color: deeppink;
        }
    </style>

</head>
<body>
    <div id="app" v-cloak>
        <div class="box r" v-show="is_show"></div>
        <div class="box b" v-if="is_show"></div>
        <hr>

        <div class="wrap">
            <div>
                <button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
                <button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
                <button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
            </div>
            <div class="box r" v-if="page === 'r_page'"></div>
            <div class="box b" v-else-if="page === 'b_page'"></div>
            <div class="box g" v-else></div>
        </div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            is_show: false,
            page: 'r_page'
        }
    })
</script>

3. 循环指令

v-for="ele in string|array|obj"

可以嵌套

<div v-for="tea in teas">
    <span v-for="(v, k, i) in tea">
        {{ i }}-{{ k }}:{{ v }}&nbsp;&nbsp;
    </span>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            teas: [
                {
                    name: 'a1',
                    age: 73,
                    sex: '男',
                },
                {
                    name: 'a2',
                    age: 74,
                    sex: '男',
                },
                {
                    name: 'a3',
                    age: 17.5,
                    sex: '男',
                }
            ]
        }
    })
</script>

4. 斗篷指令

v-cloak

如果将vue环境在html页面的body后面加载的话,浏览器会先渲染还未被vue挂载的vue标签;

而当vue环境加载好之后,vue又会去渲染被挂载的标签,从而导致页面会闪一下,那是浏览器在直接渲染vue的关在标签。

为了避免页面闪烁,只需在挂载标签中添加v-cloak属性即可。

<!-- 避免页面闪烁-->
<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

5. 实例成员:delimiter分隔符(了解)

用来防止与其他特殊符号冲突。

new Vue({
    el: '#app',
    data: {
        msg: 'message'
    },
    delimiters: ['[{', '}]'],  // 修改插值表达式符号
})

6. filter过滤器

1、在filters成员中定义过滤器方法

2、可以对多个值进行过滤,过滤时还可以额外传入辅助参数

3、过滤的结果可以再进行下一次过滤(过滤的串联)

<body>
    <div id="app">
        <p>{{ num | f1 }}</p>  // 100
        <p>{{ a, b | f2(30, 40) | f3 }}</p>  // 10000
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            a: 10,
            b: 20,
        },
        filters: {
            // 传入所有要过滤的条件,返回值就是过滤的结果
            f1 (num) {
                console.log(num);
                return num * 10;
            },
            f2 (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            },
            f3 (num) {
                return num * num;
            }
        }
    })
</script>

7. computed计算属性

1、computed计算属性可以声明方法属性(方法属性一定不能在data中重复声明)

2、计算方法属性 必须在页面中渲染,才会启用绑定的方法,才会被调用,方法属性的值就是绑定方法的返回值

3、绑定的方法中出现的所有变量都会被监听,任何一个变化发生值更新都会重新出发绑定方法,从而更新方法属性的值

一般用来解决的问题:一个变量值依赖于多个变量

<body>
    <div id="app">
        <input type="number" min="0" max="100" v-model="n1">
        +
        <input type="number" min="0" max="100" v-model="n2">
        =
        <button>{{ result }}</button>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            n1: '',
            n2: '',
            // result: 0,
        },
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }
    })
</script>

8. watch监听属性

1、监听的属性需要在data中声明,监听方法不需要返回值

2、监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法

3、监听方法有两个回调参数:当前值,上一次值** 解决的问题:多个变量值依赖于一个变量值

<body>
    <div id="app">
        <p>姓名:<input type="text" v-model="full_name"></p>
        <p>姓:{{ first_name }}</p>
        <p>名:{{ last_name }}</p>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        watch: {
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })
</script>

9. 冒泡排序

模板

let arr = [3, 2, 5, 4, 1];
console.log(arr);

// 外层循环控制趟数
for (let i = 0; i < arr.length - 1; i++) {  
    // 内存循环控制比较次数
    for (let j = 0; j < arr.length - 1 - i; j++) {  
        if (arr[j] > arr[j + 1]) {
            let temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}

console.log(arr);

二、前端数据库

// 前台数据库
localStorage: 永久存储
sessionStorage:临时存储(所属页面标签被关闭后,清空)

// 存
localStorage.n1 = 10;
sessionStorage.n2 = 20;

// 取
console.log(localStorage.n1);
console.log(sessionStorage.n2);

// 数组等类型需要先序列化成JSON
localStorage.arr = JSON.stringify([1, 2, 3]);
console.log(JSON.parse(localStorage.arr));

// 清空数据库
localStorage.clear();

三、js知识点补充

1. 操作数组

unshift与push用于数组首尾增加元素;

shift和pop用于首尾删除元素;

splice可以操作数组中的某些元素。

ele.splice(index,count,...args)

括号中:

index规定操作的元素开始的位置,使用负数可从数组结尾处规定位置。;

count规定要删除的元素的数量;

...args表示要添加的元素,可以有任意个。

// 将comment添加到msgs数组中:unshift push 首尾增 | shift pop 首尾删
this.msgs.push(this.comment);

// 数组操作最全方法:splice(begin_index, count, ...args)
this.msgs.splice(0, 2);

?

以上是关于68 vue框架-part2 指令操作的主要内容,如果未能解决你的问题,请参考以下文章

vue.js介绍,常用指令,事件,以及制作简易留言版

[JavaScript从入门到放弃系列] 高级篇11.Vue.js之路由part2

五十初识vue,实例成员语法,指令,

VUE框架简单基础

vue基本使用

Vue框架