zoukankan      html  css  js  c++  java
  • vue2

    表单指令

    v-model="变量",变量值与表单的value相关,placeholder属性是input框的默认值,v-model可以实现数据的双向绑定,变量的值可以影响表单标签的值,反过来标签的值也可以影响变量的值。

      <!--普通input框双向绑定 -->      
    <input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
    <input type="text" v-model="v1">
    {{ v1 }}
    
    
    <!--1.单选框-->
    男:<input type="radio" name="gender" value="male" v-model="v2">
    女:<input type="radio" name="gender" value="female" v-model="v2">
    <hr>
    性别:{{ 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 }} 
    <!-- 这里{{v4}}通过数组存取值,选中哪个选项就将其存放到数组中 [ "male", "female", "other" ] -->
    <hr>
    

    vue中各变量的默认值

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                v1: '123',
                v2: 'male',
                v3: false,
                v4: ['male', 'female']
            }
        })
    </script>
    
    普通input框:变量就代表value值
    单选框:变量为多个单选框中的某一个value值
    单一复选框:变量为布尔类型,代表是否选中
    多复选框:变量为数组,存放选中的选项value
    

    条件指令

    v-show:  display:none#将标签隐藏起来不显示,但是浏览器已将渲染了,这种方式浏览器会加载过多的不需要的内容
    v-if:    #不渲染条件不成立的标签
    v-if | v-else-if | v-else
    

    条件指令具体使用方法如下例:

    <div id="app" v-cloak>
            <!--条件指令:
                v-show="布尔变量"   隐藏时,采用display:none进行渲染
                v-if="布尔变量"     隐藏时,不在页面中渲染(保证了未渲染页面的数据安全)
                -----------------------------
                v-if | v-else-if | v-else
            -->
          <!--  <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="{r: page === 'r_page'}">红</button>
                    <button @click="page='b_page'" :class="{b: page === 'b_page'}">蓝</button>
                    <button @click="page='g_page'" :class="{g: page === 'g_page'}">绿</button>
                </div>
                <div class="box r" v-if="page === 'r_page'"></div><!-- 如果条件成立则展示这个div -->
                <div class="box b" v-else-if="page === 'b_page'"></div><!-- 如果条件成立则展示这个div -->
                <div class="box g" v-else></div><!-- 如果条件成立则展示这个div	 -->	
            </div>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                <!-- is_show: false, --><!-- 这里也可以通过控制is_show的状态来控制标签的展示 -->
                page: 'r_page'
            },	
        })
    </script>
    

    循环指令

    这里的for循环可以循环string、array、obj数据类型。

    v-for="(v, i) in str|arr"
    #v是元素,i是索引
    v-for="(v, k, i) in dic"
    # v是值,k是属性,i是属性的索引
    

    具体程序如下例:

     <div id="app">
            <!--循环指令:
                v-for="ele in string|array|obj"
            -->
            <span>{{ info }}</span>
            <hr>
            <i v-for="c in info">{{ c }} </i>
            <hr>
            <i v-for="(v, i) in info">{{i}}:{{v}}<br></i>
            <hr>
    
            <div v-for="e in stus">{{ e }}</div>
            <hr>
            <div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
            <hr>
    
            <div v-for="v in people">{{ v }}</div>
            <hr>
            <div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
            <hr>
    		</div>
    		</div>
    		</body>
    		<script src="vue.js"></script>
    		<script>
    		    new Vue({
    		        el: '#app',
    		        data: {
    		            info: 'Big big one',
    		            stus: ['Bob', 'Tom', 'Jerry'],
    					})
    

    例子:以下面的形式展示用户对象的信息:

    name:tom | age:21 | gender:男
    name:jane | age:20 | gender:女
    

    这里我们可以通过for循环嵌套if判断来完成题目要求

    <body>
        <div id="app">
            <!--循环指令:
                v-for="ele in string|array|obj"
            -->
            <hr>
            <div v-for="tea in teas">
                <span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
            </div>   
    </body>
    <script src="vue.js"></script>
    <!-- 我们在这里引入vue而不是选择在head标签引入vue是因为代码
    的加载顺序,如果将其放在head内则会先加载vue,如果在网速较慢时页面的加载速度很慢,如果
    将其放在下面,就会先加载body内的内容,只是渲染的速度比较慢,这样的用户体验会更好。 -->
    <script>
        new Vue({
            el: '#app',
            data: {
                teas: [
                    {
                        name: 'tom',
                        age: 21,
                        gender: '男',
                    },
                    {
                       name: 'jane',
                       age: 20,
                       gender: '女',
                    }
                ]
            }
        })
    </script>
    

    循环指令案例

    需求描述

    模仿留言框做一个输入框,可以输入数据,当提交后数据会显示在留言框的下方,
    当刷新页面时留言的内容依然存在,留言的删除:当用鼠标点击某一条留言时,留言可以自动删除。

    前台数据库介绍

    该案例需要用到前台数据库来存储数据,前台数据库有两类:localStorage、sessionStorage。
    localStorage可以永久存储数据,当页面重新刷新的时候数据仍保留在数据库中,数组数据类型数据存
    入该数据库的方式通过JSON.stringify将其序列化为json然后存入数据库,普通数据存储方式如下:

     // 存数据的方式
    // 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();
    

    sessionStorage用于临时存储数据(所属页面标签被关闭后就清空,刷新页面数据清空)。

    案例实现代码

    这里我们使用数组去接收添加的每一条评论,可以使用对数组元素的增删来实现留言的增删,
    使用到的操作数组的方法如(unshift首增 、push 尾增 、 shift首删 、pop 尾删),
    splice(begin_index, count, ...args)的使用方法(...args是可变长参数):

    <head>
        <meta charset="UTF-8">
        <title>todo list 案例</title>
        <style>
            li:hover {
                color: red;
                cursor: wait;
            }
        </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="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>
    

    分隔符

    当我们在Django中使用vue时,vue的插值符号与Django的模板语法中的{{}}冲突,这时就需要我们使用分隔符号
    为vue重新设置一个插值符,具体设置方法如下。

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

    过滤器

    过滤器:传入要过滤的条件,返回值就是过滤的结果

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

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

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

    {{ n1, n2 | f1(30) | f2 }}
    
    filters: {
        f1(n1,n2,n3) {return f1过滤结果},
        f2(f1的过滤结果) {return f2过滤结果},
    }
    
    
    

    具体使用方法如下:

    <body>
        <div id="app">
            <p>{{ num | f1 }}</p>
            <p>{{ a, b | f2(30, 40) | f3 }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10,
                a: 10,
                b: 20,
            },
            filters: {
                // 传入所有要过滤的条件,返回值就是过滤的结果
                f1 (num) {
                    console.log(num);
                    return num * 10;//值在return时仍可以进行一些简单的运算
                },
                f2 (a, b, c, d) {
                    console.log(a, b, c, d);
                    return a + b + c + d;
                },
                f3 (num) {
                    return num * num;
                }
            }
        })
    </script>
    

    计算属性

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

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

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

    4.一般用来实现的功能:一个变量值依赖于多个变量的变化而变化如下面的例子。

    例子:两个input框,向两个框内输入不同的数字,在第三个框显示前两个框的数字之和。

    代码实现如下:

    <body>
    	    <div id="app">
    	        <input type="number" min="0" max="100" v-model="n1"> <!-- min="0" max="100"设置数字的范围 -->
    	        +
    	        <input type="number" min="0" max="100" v-model="n2">
    	        =
    	        <button>{{ result }}</button>
    	    </div>
    	</body>
    	<script src="vue.js"></script>
    	<script>
    	    new Vue({
    	        el: '#app',
    	        data: {
    	            n1: '',//定义n1、n2的默认值
    	            n2: '',
    	            // result: 0,
    	        },
    	        computed: {//computed会时刻监测n1、n2的变化,一旦变化就执行
    	            result () {
    	                console.log('被调用了');
    	                n1 = +this.n1;
    	                n2 = +this.n2;
    	                return n1 + n2;
    	            }
    	        }
    	    })
    	</script>
    
    

    监听属性

    当b、c、d等变量的值需要依赖a的值的变化而变化时,就需要用到监听属性,将a设置为监听属性,一旦a属性的属性值发生变化,与之关联的其他属性的属性值也随之变化。

    监听属性的特点

    1.监听的属性需要在data中声明,监听方法不需要返回值
    2.监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
    3.监听方法有两个回调参数:当前值,上一次值

    应用场景:当多个变量值依赖于一个变量值的改变而改变时使用

    例子:在input框中输入一个中文姓名,自动将其姓氏和名字分开显示。

    <body>
        <div id="app">
            <p>姓名:<input type="text" v-model="full_name"></p>
            <p>姓:{{ first_name }}</p>
            <p>名:{{ last_name }}</p>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                full_name: '',
                first_name: '未知',
                last_name: '未知',
            },
            watch: {
                // n是监听的属性当前值,o是其上一次的值,监听的属性值每次更新都会回调监听方法
                full_name(n, o) {
                    name_arr = n.split('');
                    this.first_name = name_arr[0];
                    this.last_name = name_arr[1];
                },
            }
        })
    </script>
    

    冒泡排序

    	for (let i=0; i<arr.length-1; i++) {  // 趟数
            for (let j=0; j<arr.length-1-i; j++) {  // 比较次数
                // 处理条件即可
                if (arr[j]参数 > stus[j + 1]参数) {
                    let temp = stus[j];
                    stus[j] = stus[j + 1];
                    stus[j + 1] = temp;
                }
            }
        }
    

    例子1:对一个数组内的所有数字进行排序

    let arr = [3, 2, 5, 4, 1];
    console.log(arr);
    
    // 冒泡排序
    // 3, 2, 5, 4, 1
    
    // 2, 3, 4, 1, 5
    // 2, 3, 1, 4
    // 2, 1, 3
    // 1, 2
    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);
    

    例子2:对数组内的对象按成绩进行排序

    stus = [
    	{
    		name: 'Bob',
    		grade: 98
    	},
    	{
    		name: 'Tom',
    		grade: 87
    	},
    	{
    		name: 'Jerry',
    		grade: 92
    	},
    ];
    // 按照分数进行排名
    for (let i=0; i<stus.length-1; i++) {
    	for (let j=0; j<stus.length-1-i; j++) {
    		// 处理条件即可
    		if (stus[j].grade > stus[j + 1].grade) {
    			let temp = stus[j];
    			stus[j] = stus[j + 1];
    			stus[j + 1] = temp;
    		}
    	}
    }
    
    console.log(stus);
    

    JS代码中的光标设置

    auto(default)默认值。浏览器根据当前情况自动确定鼠标光标类型。
    col-resize有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
    crosshair简单的十字线光标。
    all-scroll有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
    move十字箭头光标。用于标示对象可被移动。
    help带有问号标记的箭头。用于标示有帮助信息存在。
    no-drop带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
    not-allowed禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
    pointer(hand)竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
    progress带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
    row-resize有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
    text用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
    vertical-text用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
    wait用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
    *-resize用于标示对象可被改变尺寸方向的箭头光标。
    w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
    
    
  • 相关阅读:
    HDU 1269 迷宫城堡
    HDU 4771 Stealing Harry Potter's Precious
    HDU 4772 Zhuge Liang's Password
    HDU 1690 Bus System
    HDU 2112 HDU Today
    HDU 1385 Minimum Transport Cost
    HDU 1596 find the safest road
    HDU 2680 Choose the best route
    HDU 2066 一个人的旅行
    AssetBundle管理机制(下)
  • 原文地址:https://www.cnblogs.com/ghylpb/p/12057593.html
Copyright © 2011-2022 走看看