zoukankan      html  css  js  c++  java
  • day66

    表单指令:

    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" id="usr" placeholder="请输入账号" v-model="v1">
            <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 id="app">
            <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>
    
  • 相关阅读:
    Leetcode Reverse Words in a String
    topcoder SRM 619 DIV2 GoodCompanyDivTwo
    topcoder SRM 618 DIV2 MovingRooksDiv2
    topcoder SRM 618 DIV2 WritingWords
    topcoder SRM 618 DIV2 LongWordsDiv2
    Zepto Code Rush 2014 A. Feed with Candy
    Zepto Code Rush 2014 B
    Codeforces Round #245 (Div. 2) B
    Codeforces Round #245 (Div. 2) A
    Codeforces Round #247 (Div. 2) B
  • 原文地址:https://www.cnblogs.com/gfhh/p/12056766.html
Copyright © 2011-2022 走看看