Vue 基本指令和属性

1、表单指令：v-model="变量" 变量与value有关

​ 普通：变量就代表value值

<input type="text" name='user' id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }}

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

男：<input type="radio" name="sex" value="male" v-mpdel="v2">
女：<input type="radio" name="sex" value="famale" v-mpdel="v2">

​ 单一复选框：变量为布尔，代表是否选中

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

​ 多复选框：变量为数组，存放选中的选项value

爱好：<br>
篮球：<input type="checkbox" name="hobbies" value="male" v-model="v4">
足球：<input type="checkbox" name="hobbies" value="famale" v-model="v4">
书：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}

2、条件指令：

​ v-show: display:none 有此属性的标签会被渲染，但页面上不显示，但在页面上检查源码可看到
​ v-if: 不渲染，检查源码看不到
​ v-if | v-else-if | v-else：只渲染条件成立的标签，不成立的条件其标签看不到，
​

3、循环指令：循环有序数据类型

​ v-for="(v, i) in str|arr" 循环字符串或者数组，拿到字符和索引
​ v-for="(v, k, i) in dic" 循环字典，拿到键、值，和键的索引

4、sessionStorage | localStorage，两个都是前台数据库，localStorage是永久存贮，sessionStorage是临时存储，所属页面标签被关闭后，就会被清空

先将数据进行json序列化
localStorage.arr = JSON.stringify([1, 2, 3]);  // 同步数据库
data = JSON.parse(localStorage.arr);  // 解压数据
localStorage.clear();  // 清空数据库 

5、分隔符：delimiters: ['{{', '}}'], 当插值表达式的符号和其他工具语言的符号冲突时，就用它修改插值表达式符号

6、过滤器：

{{ num | f1 }}   //  简单过滤
{{ n1, n2 | f1(30) | f2 }}  //多重过滤

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

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

​ 3、过滤的结果可以再进行下一次过滤（多重过滤）

7、计算属性：

可以用于字符串拼接，也可以用于数字运算

​ computed: {
​ result() {
​ // 一个方法属性值依赖于多个变量
​ return this.n1 + this.n2;
​ }
​ }

8、监听属性：应用于“多个变量值依赖于一个变量值”的场景。

    watch: {
        full_name(n, o) {
            this.first_name = n.split('')[0]
            this.last_name = n.split('')[1]
        }
    }

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

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

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

9、冒泡排序：补充

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