68 vue框架-part2 指令操作

一、Vue指令操作

1. 表单指令

v-model="变量"

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

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

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

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

    
    
    
    {{ v1 }}

    


    
    男：
    女：
    {{ v2 }}

    


    
    卖身契：同意 
    {{ v3 }}

    


    
    爱好：

    男：
    女：
    哇塞：
    {{ v4 }}
    


    提交

2. 条件指令

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

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

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

    
    
    



    

        

        

        


        

            

                红
                蓝
                绿
            
            

            

            

        

    

3. 循环指令

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

可以嵌套

    
        {{ i }}-{{ k }}:{{ v }}  
    

4. 斗篷指令

v-cloak

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

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

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

    {{ msg }}

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

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

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

6. filter过滤器

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

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

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

    

        
{{ num | f1 }}
  // 100
        
{{ a, b | f2(30, 40) | f3 }}
  // 10000
    

7. computed计算属性

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

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

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

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

    

        
        +
        
        =
        {{ result }}
    

8. watch监听属性

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

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

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

    

        
姓名：
        
姓：{{ first_name }}
        
名：{{ last_name }}
    

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

​