表单指令

v-model="变量" 变量与value有关
普通：变量就代表value值
单选框：变量为多个单选框中的某一个value值
单一复选框：变量为布尔，代表是否选中
多复选框：变量为数组，存放选中的选项value

<div id="app">
    <form action="">
        <!--重点-->
        <input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
        <input type="text" v-model="v1">
        {{ v1 }}

        <hr>

        <!--1.单选框-->
        男：<input type="radio" name="sex" value="male" v-model="v2">
        女：<input type="radio" name="sex" value="female" v-model="v2">
        {{ 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 }}
        <hr>

        <button type="submit">提交</button>
    </form>
</div>
------------------------------------------------------------
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '123',
            v2: 'male',
            v3: false,
            v4: ['male', 'female']
        }
    })
</script>

条件指令

v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else

<div id="app">
    <!-- v-if: 值为false时，在页面上不渲染，并且隐藏标签中的信息-->
    <p v-if="false">if</p>
    <!-- v-show： 值为false时，在页面上是用display:none 渲染隐藏的，但是仍然存在当前页面的结构中 -->
    <p v-show="false">show</p>

    <!--上分支成立时，所有的下分支都会被屏蔽，v-else只有在上分支全部为假时才会显示，所以v-else不需要条件-->
    <p v-if="1">if</p>
    <p v-else-if="0">elif</p>
    <p v-else-if="0">elif</p>
    <p v-else>else</p>
</div>

条件指令实例

<style>
    .box {
        width: 200px;
        height: 200px;
    }
    .r {background-color: red}
    .g {background-color: green}
    .b {background-color: black}
    .action{background-color: pink}
</style>
<div id="app">
    <!-- 给定button的单击事件并传入参数，并且给button绑定{}属性指令：判断当前c变量的值来确定选中按钮的高亮-->
    <button @click="change('red')" :class="{ action:c === 'red' }">红</button>
    <button @click="change('green')" :class="{ action:c === 'green' }">绿</button>
    <button @click="change('black')" :class="{ action:c === 'black' }">黑</button>
    <br>
    <!-- 利用v-if家族来判断变量c的值来确定是否显示该标签 -->
    <div class="box r" v-if="c === 'red'"></div>
    <div class="box g" v-else-if="c === 'green'"></div>
    <div class="box b" v-else></div>
</div>

<script>
    new Vue({
        el: '#app',
        data:{
            // localStorage是浏览器永久的数据库，可以将c变量存储在其中记录最后一次点击状态。
            // 判断localStorage中是否有变量c，有的话则使用里面的c，没有就用默认值red
            c: localStorage.c ? localStorage.c : 'red',
        },
        methods:{
            change(color){
                this.c = color;
                // 将最后一次的点击状态保存在localStorage中，方便下一次打开时找到变量c的值
                localStorage.c = color;
            }
        }
    })
</script>

循环指令

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

<div id="app">
    <!--循环指令：v-for="成员 in 容器"-->

    <!--循环数组:数组里可以是任意数据类型的数据-->
    <p v-for="v in lis">{{ v }}</p>

    <!--循环的成员可以为两个参数，第一个为value值，第二个为index索引-->
    <p v-for="(v,i) in lis">{{ i }}:{{ v }}</p>

    <!--实例：在每两个循环成员之间加一个|，不包括首尾-->
    <p>
        <span v-for="(v,i) in lis">
            <span v-if="i != 0"> | </span>
            {{ v }}
        </span>
    </p>

    <!--循环对象时：只接收一个参数只循环对象的值-->
    <p v-for="u in user">
        {{ u }}
    </p>

    <!--循环对象时：接收两个参数循环对象的值和键-->
    <p v-for="(u,k) in user">
        {{ k }}:{{ u }}
    </p>

    <!--循环对象时：接收三个参数循环对象的值、键和索引-->
    <p v-for="(u,k,i) in user">
        {{ i }}--{{ k }}:{{ u }}
    </p>

    <!--循环遍历列表套对象，显示出每个对象的键与值，并且在每两个对象之间添加分割线-->
    <div v-for="(stu,i) in students">
        <hr v-if="i != 0">
        <p v-for="(v,k) in stu">
            {{ k }}:{{ v }}
        </p>
    </div>
</div>

循环指令案例

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

<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)
                // splice() 三个参数：开始索引、操作长度、操作的结果的集合
                // 比如最后一个参数不行就是删除，全为0就是删除首个

                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>

分隔符

用来修改插值表达式的符号

new Vue({
    el: '#app',
    data: {
        num: 100
    },
    delimiters: ['{[', ']}'],
})

过滤器

在filts成员中定义过滤器方法
可以对多个值进行过滤，过滤时还可以额外传入辅助参数
过滤的结果可以再进行下一次过滤

<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;
            },
            f2 (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            },
             f3 (num) {
                 return num * num;
             }
        }
    })
</script>

计算属性

computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义属性，可以省略data里的
方法属性的值来源于绑定的方法的返回值，类似于python中的property装饰器，将方法封装成数据属性
方法属性必须在页面中渲染后，绑定的方法才会被调用
方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定方法，重新更新方法属性的值
方法属性值不能手动设置，必须通过绑定的方法进行设置
js属于弱类型语言，将字符串转换为整型可以在字符串前加'+'即可，前提是该字符串可以转换为整型

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

监听属性

watch中给已有的属性设置监听方法
监听的属性值一旦发生改变，就会调用该监听方法，进行逻辑处理
监听方法不需要返回值，return只有主动结束该方法的作用

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

冒泡排序

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 tmp = arr[j]
                arr[j]=arr[j+1]
                arr[j+1]=tmp
        }
    }
}

VUE12.17