vue_02day

目录

• vue_02
  • 表单指令:
  • 条件指令:
  • 循环指令：
  • 前端数据库:
  • 分隔符：
  • 过滤器:
  • 计算属性：
  • 监听属性:
  • vue编译不生效，闪烁
  • 冒泡排序:

vue_02

表单指令:

<form action="">
    <!--表单指令：v-model="变量"-->

    <!--双向绑定：一个地方修改值，所有地方的数据都会被更新-->
    <div>
        <input type="text" v-model="info" name="usr">
        <input type="password" v-model="info" name="pwd">
        <p>{{ info | infoFilter }}</p>
    </div>

    <div>
        <!--单选框：v-model="变量存放的是某个单选框的value值，代表该选框选中"-->
        男<input type="radio" name="sex" value="male" v-model="sex_val">
        女<input type="radio" name="sex" value="female" v-model="sex_val">
    </div>

    <div>
        <!--单独的复选框：v-model="true|false代表该选框是否选中"-->
        是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
    </div>

    <div>
        <!--群复选框：v-model="存放选中选框value的数组"-->
        <!--cbs_valrug如果传空数组会一个都不选,如果数组对应里面的value会勾选-->
        <!--cbs_valrug如果传true|false,里面的能容就表示要么全选要么都不选->

条件指令:

v-if:隐藏时不渲染,隐藏时在内存中建立缓存，可以通过key属性设置缓存的键()
v-show:隐藏时用display:none渲染 ()

<div class="box red" v-if="ture|flase" key="box_red"></div>
<div class="box blue" v-show="ture|flase"></div>

接收的值只能是ture|flase,如果是0则是flase,如果是1则是ture
key属性可以对于在内存中名字进行设置,且f12你看不到key这个属性

v-if|v-elif|v-else:
注意点:
    if如果生效就不往下走同理elif也一样
    else前面不生效即使他设置了flase他依旧会生效
    所有else一般不做任何值设置他都是true

循环指令：

三元表达式：   判断内容 ? 满足返回的值 : 不满足返回的值

or 逻辑判断：  var a = msg || '没有消息'

v- for :
    #第一种
    <div v-for="item in items"></div>

    #第二种
    <div v-for="(item, index) in items"></div>

    #第三种
    <div v-for="(val, key) in object"></div>

    #第四种
    <div v-for="(val, name, index) in object"></div>
	(优化字典查询效率)：正对于对象为字典,如果是普通的列表数组类型的index为空

前端数据库:

前端页面缓存（浏览器）：
    localStorage.key名称:key值:永久缓存但是可以手动删除

    sessionStorage.key名称:key值:临时缓存关闭页面或者关闭浏览器重新打开就会消失

   三元表达式：  localStorage.msgs 缓存数据
 msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],

    存:
    localStorage.n1 = 10;
    sessionStorage.n2 = 20;
	localStorage.msgs = JSON.stringify(this.msgs)

    取:
    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 数组操作：
    unshift | push 首尾增
    shift | pop 首尾删

数组操作最全方法：splice(begin_index, count, ...args)：

	begin_index: 		 开始操作的索引
	count :		 		 操作几位
     ...args(*args) :     更改后的内容
	this.msgs.splice(0, 2);  删除

分隔符：

-- delimiters  解决语法冲突
修改插值表达式符号！！

<div id="app">
    [[ msg }}
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // 修改插值表达式符号
        delimiters: ['[[', '}}'],   两边符号用'符号' 差值的内容`, `来表示
    })
</script>

过滤器:

filters  : 传入所有过滤的条件，返回过滤的结果

   {{ num| f1 | f2 | f3 }}
    filters : {
        f1(num) {
        return num * num
        }
    }

计算属性：

methods: 	methods属性里面的方法会在数据发生变化的时候，只要引用了此里面分方法，方法就会自动执行。这个属性没有依赖缓存

computed: 	计算属性该属性里面的方法必须要有return返回值，这个返回值就是（value值）

总结：
    1) 计算后属性不需要在data中重复定义
    2) 计算后属性必须渲染后，绑定的方法才会生效这里指就是定义后的变量名在上面html中显示
    3) 计算后属性绑定的方法中的任意变量值更新，方法都会被调用
	4) 计算后属性为只读属性(不可写)

        data: {
            n1: '',
            n2: '',
            // result: 0,    #不需要在data中重复定义
        },
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }

监听属性:

1.获取data里面的某个变量
$data.msg也可以简写成msg

2.获取data全部内容
$data

3.获取vue中vue挂钩的对象
$el

4.获取除data以外的属性
$options.Vue中的属性名称(如arr等等)

watch : 	监听的是data属性里面的数据，当这个数据发生变化时，将自动执行这个函数

    watch:{
        data中的变量( n, 0){
        当data中变量发生的时候会执行这里的逻辑函数
        }
       }

总结：
	1) 监听绑定的对象，该属性可以get、set

    2) 监听的对象一旦发生值更新，绑定的方法就会被调用

    3) n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法

    监听的对象是已定于的属性data中定义或者全局中如$route比较常用是路由传参反正就是this能够通过.出来的属性

vue编译不生效，闪烁

1.在标签内添加 v-pre
script src="vue.js"></script>
<div>
    <p v-pre>{{msg}}</p>                  //网页中显示{{msg}}
    <p >{{msg}}</p>                       //网页中显示66
</div>

<script>
    new Vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>

2.斗篷： 利用v-cloak在加载vue完成后他会消失

<style>
    [v-cloak]{display:none}
<</style>
<div>
    <p v-cloak>{{msg}}</p>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>

冒泡排序:

通过与相邻元素比较的方式每次将一个数交换位置

python 版：

lst = [3, 6, 9, 1, 8, 7, 2, 5, 4, 0]
print("排序前: %s\r\n" %lst)

for i in range(len(lst)-1):
    print("第%s轮" % (i+1))   # 外层循环控制趟数

    for j in range(len(lst)-i-1):  #内层循环控制比较次数
        # 如果前大后小，则交换位置
        if lst[j] > lst[j+1]:
            lst[j],lst[j+1] = lst[j+1],lst[j]
            print("    第%s次 [%s]:%s,[%s]:%s比较 互换 %s" % (j+1,j,lst[j+1],j+1,lst[j],lst))
        else:
            print("    第%s次 [%s]:%s,[%s]:%s比较 不变 %s" % (j+1,j,lst[j],j+1,lst[j+1],lst))

print("\r\n排序后:  %s" % lst)

js 版：
let arr = [3,4,5,1,2]
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);