2021-06-05 Vue 笔记

v-once

数据是响应式的，当给定v-once的属性时，如果修改数据，页面中显示不会跟着被修改。（不咋用）
后面不用跟任何表达式。

v-html

解析a标签

<h2 v-html="url"></h2>

v-cloak

在vue解析之前，div中有一个属性v-cloak，解析之后，div中没有一个属性v-cloak（不咋用）

计算属性

computed:{}
计算属性一般是没有set方法的，只读属性

computed:{
	fullName:{
		get:function(){}
	}
}

简写可以写成：

computed:{
	fullName:function(){}
	
}

<div id="app">
		//注意 computed中是属性不是方法，调用时不要加：小括号（）
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                books:[
                    {id:100,name:'A',price:11},
                    {id:101,name:'B',price:12},
                    {id:102,name:'C',price:13}
                ]
            },
            computed:{
                totalPrice:function(){
                    let result = 0;
                    for(let i =0;i<this.books.length;i++){
                        result+=this.books[i].price;
                    }
                    return result;

                    //es6语法
                    // for(let i in books){
                    //     this.books[i]
                    // }
                }
            },
            methods:{

            }
        })

计算属性和methods的对比

computed会有缓存，属性不变的话每次调用不会重新计算，而methods每次调用都会重新计算，computed性能更高

es6 语法补充

let/var
var 设计有缺陷，声明一个变量时，变量的作用域主要是和函数的定义有关
let有块级作用域
1.变量作用域：变量在什么范围内是可用的
2.没有块级作用域引起的问题：if和for 的块级，必须借助于function的作用域来解决应用外面变量的问题

const修饰的标识符为常量，必须赋值并且不能修改。常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

字面量的增强写法：

	//1.属性的增强写法
	const name = 'why';
	const age = 17;
	const height = 1.60;
	//es5
	const obj={
		name:name,
		age:age,
		height:height
	}
	//es6
	const obj = {
	name,
	age,
	height
	}
	//2.函数的增强写法
	//es5
	const obj={
		run:function(){
		}
	}
	//es6
	const obj={
		run(){
		}
	}

v-on 参数问题

方法定义时我们需要event对象，同时又需要其他参数，在调用方式，手动获取到浏览器参数的event对象：$event
修饰符：@click.stop阻止冒泡，@click.prevent阻止默认事件，@click.native监听组件根元素的原生事件，@click.once只回调一次

小案例：用户登录时，可以切换使用账号登录还是邮箱登录

 <div id="app">
        <span v-if="isUser">
            <label for="username">用户账号</label> 
            <input type="text" id="username" placeholder="用户账号">
        </span>
        <span v-else>
            <label for="emile">用户邮箱</label> 
            <input type="text" id="emile" placeholder="用户邮箱">
        </span>
        <button @click="isUser=!isUser">切换类型</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                isUser:'true'
            }
        })
    </script>

**小问题：**如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容，但是按道理讲，我们应该切换到另外一个input元素中了，在另一个input元素中，我们并没有输入内容。
因为vue在渲染dom时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
如果我们不希望vue出现类似重复利用的问题，可以给对应的input添加key

当需要在显示与隐藏之前切换很频繁时，使用v-show，当只有一次切换时，通过使用v-if。

v-for

使用v-for时，给对应元素或组件添加上一个：key属性
例如在一个数组中插入一个元素，用.splice(2,0,'F'),如果直接这么插入，会执行Diff算法，将插入的位置更新成新的，之后再往下依次重新赋值，效率低，如果使用key属性，会直接比较更新，

<li v-for="item in letters" :key="item">//保证key里面是唯一性