您的位置: 首页  >  IT文章  >  day66 表单指令： 条件指令 循环指令 sessionStorage | localStorage 分隔符 过滤器 计算属性 监听属性 冒泡排序 知识点总结： 今日日考：

day66 表单指令： 条件指令 循环指令 sessionStorage | localStorage 分隔符 过滤器 计算属性 监听属性 冒泡排序 知识点总结： 今日日考：

分类: IT文章 • 2022-08-26 08:36:25

目录

v-model="变量" 变量与value有关

普通：变量就代表value值

单选框：变量是多个单选框中的某一个value值

单一复选框：变量是数组，存放选中的选项value

条件指令

v-show:display:none

v-if:不渲染

v-if | v-else-if | v-else
前者条件成立，就不执行后面的分支语句，当所有条件都不成功，才执行v-else分支语句

循环指令

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

v-for="(v,k,i) in dic"
v：值 k：键 i：索引

sessionStorage | localStorage

前端数据库
sessionStorage：临时存储,生命周期同标签标签关闭被销毁
localStorage.key = value
localStorage.clear()
localStorage：永久存储，数据保存在内存中

分隔符

delimiters：['{{','}}']

过滤器

{{n1,n2 | f1(30) | f2}}

filters:{

​ f1(n1,n2,n3) {return 过滤结果},

​ f2(f1的res) {return 过滤结果},

}

计算属性

result必须渲染；绑定的方法内部出现的变量更新方法被调用；方法返回值就是result的值
computed：{

​ result() {

//一个方法属性值依赖于多个变量

return this.n1+this.n2;

​ }

}

监听属性

监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一个值，多个变量依赖于一个变量
watch:{

​ full_name(n,o){

​ this.first_name = n.split('')[0]

​ this.last_name = n.split('')[1]

​ }

}

冒泡排序

    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);

知识点总结：

表单指令

v-model可以实现数据的双向绑定：v-model绑定的变量值可以影响表单标签的值，反过来单标签的值也可以影响变量的值

重点

 <input type="text" name="usr" >
        <input type="text" v-model="v1">
        {{ v1 }}

单选框

男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}

单一复选框

卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}

多复选框

爱好：<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 }}

对应data里面的数据

data: {
            v1: '123',
            v2: 'male',
            v3: false,
            v4: ['male', 'female']
        }

条件指令

[v-cloak] 条件指令后面跟{display:none;}

v-show="布尔变量" 隐藏时，采用display：none进行渲染

v-if="布尔变量" 隐藏时，不在页面中渲染(保证不渲染的数据泄露)

循环指令实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>todo list 案例</title>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div >
        <input type="text" v-model="comment">
        <button type="button" @click="send_msg">留言</button>
        <ul>
            <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            comment: '',
            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],

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

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

                if (!this.comment) {
                    alert('请输入内容');
                    return false;
                }
                this.msgs.push(this.comment);
                this.comment = '';

                localStorage.msgs = JSON.stringify(this.msgs);
            },
            delete_msg(index) {
                this.msgs.splice(index, 1);
                localStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    })
</script>
<script>
    // 前台数据库
    // 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();
</script>
</html>

过滤器总结：

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

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

3、过滤的结果可以再进行下一个过滤（过滤的串联）

<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>

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;
            }
        }
    })

计算属性总结

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

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

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

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

        data: {
            n1: '',
            n2: '',
        },
                computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }

监听事件总结

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

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

3、监听方法有两个回调参数：当前值，上一个值

解决的问题：多个变量值依赖于一个变量值

冒泡排序模板

    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);

今日日考：

  1. 简述一下vue框架的优点

    中文API
单一面应用 - 提升移动端app运行速度
数据的双向绑定 - 变量全局通用
数据驱动 - 只用考虑数据，不需要在意DOM结构
虚拟DOM - 缓存机制

  2. vue实例通过什么与页面结构建立关联？有哪些要注意的点

    el:进行挂载
css3选择器，唯一，html、body不能作为挂载点，一个页面可以有多个实例对应多个挂载点

new Vue({
		el: '#app', 
	})

  3. 写出文本，属性与事件指令

1、{{ }}
2、v-text ：不能解析html语法的文本，会原样输出
3、v-html ：能解析html语法的文本
4、 v-once：处理的标签的内容只能被解析一次


:title="t1"
:class="c1"  |  :class="[c1, c2]"  |   :class="{c1: true}"
:style="s1"  |  :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小


v-on：事件名=“方法变量”
简写：@事件名=“方法变量”
事件变量，不添加（），默认会传事件对象：$event
事件变量，添加（），代表自定义传参，系统不再传入事件对象，可以手动传入事件对象
<p @click="f8($event, '第一个')">{{ info }}</p>

相关推荐