Vue相关操作

Vue相关操作

1. 计算属性computed

   —setter和getter：在计算属性中一般会封装get()和set()方法，但是一般是set()方法是不常用的，因此计算属性只有get()方法，表现为只读属性；

   —因为computed中都含有get()方法，所以一般简写为如下方式：

   —一定要注意，计算属性中传递的参数是一个对象，因此在访问计算属性时，可以直接使用{{}}进行读取内容；

   <div id = "app">
    <h2>{{fullName}}</h2>
   </div>
   <script src="vue.js"></script>
   <script>
   	const app = new Vue({
        el:"#app",
        data:{
            firstName:'Kobe',
            lastName:'Tommy'
        },
        computed:{
            //最终书写方法
            fullName:fucntion(){
            	return this.firstName + ' ' + this.lastName
        }
        //在计算属性中一般会传递一个属性，封装着set()方法和get()方法
        fullName:{
        	get:function(){
        		 return this.firstName + ' ' + this.lastName
    		}
       //计算属性一般是没有set()方法的，只读属性，设置set()后可以进行内容修改
    		set:function(newValue){
                const name = newValue.split(' ');
                this.firstName = name[0];
                this.lastName = name[1];
            }
    	}
      }
    })
   </script>
   

   —计算属性和methods对比

   一般进行语法的相关操作，多使用计算属性，因为计算属性内存缓存较小，多次调用计算属性，如果属性不会发生变化，实质只会调用一次；而methods会调用多次！！

2. ES6相关语法

   let/var

   —var可以看作是JavaScript语言设计上的错误，这种错误多半不能修复和移除，并且需要考虑浏览器的兼容性；

   —因此为了修复这个问题，新增了关键字let，可以将let看作更完美的var；

   —ES5中的var是没有作用域的，而ES6中的let是有块及作用域的；

   —ES5之前因为if和for语句都没有作用域，因此在很多时候必须借助于function的作用域（闭包）解决应用外面变量的问题；

   —在ES6中，加入了let，let有if和for的块级作用域；

   —使用let后，可以很好的解决作用域问题：

   <script>
    //ES5中可以使用闭包
    var btns = document.getElementsByTagName('button');
    for(var i=0;i<btns.length;i++){
        (function(i){
            btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮被点击');
            })
        })(i)
    }
   	//例如循环绑定监听事件
    const btns = document.getElementsByTagName('button')
    for(let i=0;i<btns.length;i++){
        btns[i].addEventListener('click',function(){
            console.log('第'+i+'个按钮被点击');
        })
    }
   </script>
   

   const

   —主要作用是将某个变量修饰为常量，使用const修饰的标识符为常量，不可以再次赋值；

   —在ES6开发中，优先使用const，只需要改变某一个标识符的时候才使用let；

   —const修饰的标识符必须要进行赋值；

   —const定义的常量，指向对象时，对象不能修改，但是对象内部的属性可以修改；

   对象字面量增强写法

   —属性的增强写法

   <script>
   	//ES5的写法
    const name = 'Tom';
    const age = 18;
    const obj = {
        name:name,
        age:age
    }
    //ES6的写法
    const obj = {
        name,
        age
    }
   </script>
   

   —函数的增强写法

   <script>
   	//ES5的写法
    const obj = {
        run:fucntion(){
   
    	},
        eat:function(){
   
        }
    }
    //ES6写法
    const obj = {
        run(){
   
        },
        eat(){
   
        }
    }
   </script>
   

3. 事件监听

   v-on绑定事件监听器

   —简介语法：@事件，例如<button @click=""></button>；

   —参数传递：

   1. 情况一：绑定方法中不需要额外传递参数，则方法后面的()可以省略；
   2. 情况二：如果函数需要参数，但是没有传入参数，那么函数的形参返回undefined；但是注意如果方法本身中有一个参数，那么默认将原生事件event参数传递进去；
   3. 情况三：在方法定义时，我们需要event对象，同时又需要其他参数，则在调用方法式，如何手动获取浏览器参数的event对象：$event；

   v-on修饰符

   —.stop：阻止事件冒泡，调用event.stopPropagation()；

   —.prevent：阻止默认事件，调用event.preventDefault()；

   —.enter：监听键盘的Enter回车键位；

   —.native：监听组件根元素的原生事件；

   —.once：只触发一次回调；

4. 条件判断

   —v-if、v-else-if和v-else：这三个指令和JavaScript的条件语句if、else和else if相似；

   —Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或组件；

   —v-if：可以传入布尔值，进行元素的显示与隐藏；例如：<h2 v-if="true">{{message}}</h2>；

   —v-if和v-else结合使用：<h2 v-if=isshow>{{message}}</h2> <h2 v-else>如果isshow为false就显示</h2>；v-else不需要传递条件字符；

   —一般复杂的条件判断，可以写入computed属性中，进行条件判断；但是简单的条件逻辑可以使用v-if指令；

   登录切换案例

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

   —Vue在进行DOM渲染之前，会在内存中创建一个虚拟DOM，出于性能的考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素；

   —上面案例中，在进行切换时，Vue内部会发现原来的input元素不在使用，直接复用该元素内容，作为else中的input内容来使用；

   —可以通过加一个标识key，实现是否可以复用；当key中的属性值不同就不可以复用；

   v-show

   —该语法和v-if十分相似，也用于决定一个元素是否渲染；

   —v-if和v-show的区别：

   v-if：当条件为false时，包含v-if指令的元素根本不会存在DOM中；

   v-show：当条件为false时，只是给元素增加了一个行内样式：display:none;

   —在开发中，当需要在显示与隐藏之间切换很频繁时，使用v-show，当只有一次切换时，就使用v-if；

5. 循环遍历

   v-for

   —在遍历的过程中h获取索引值：<li v-for="(item,index) in list">{{index+1}}.{{item}}</li>；

   —循环遍历对象：

   （1）如果只是获取一个值，获取到的是属性值；

   （2）如果获取属性关键字和属性值：<li v-for="(value,key) in obj">{{value}}-{{key}}</li>；

   （3）如果获取属性关键字、属性值和下标索引值：<li v-for="(value,key,index)" in obj></li>；

   绑定和非绑定key的区别

   —官方推荐我们在使用v-for时，给对应的元素或组件添加一个key属性；

   —key的作用主要是为了高效的更新虚拟DOM；

   —当我们希望在列表中插入一个元素时，Diff算法默认执行操作是：把当前插入位置的元素改为要插入的元素，依次更改元素，直至更改到最后一个元素；例如：ABCDE中，B后面插入F，他会将C改为F，D更新为C，E更新为D，最后插入E；这样十分没有效率；

   —因此我们需要使用key来给每个节点做一个唯一标识，Diff算法就能正确识别该节点，在正确的位置下插入新的节点；

   —一般key会绑定在元素本身，保证key与元素一一对应，而不是索引下标，因为随着元素插入，索引下标对应的元素不唯一：<li v-for="item in list" :key="item">{{item}}</li>；

   for循环的三种方式：

   1. for(let i=0;i<arry.length;i++)
   2. for(let i in this.books)
   3. for(let i of this.books)

6. 数组的响应式方法

   —扩展：可变参数，当定义一个方法时，传入形参的数量不等，可以传入可变参数，例如sum(...num)，因此这样的函数可以传入随机个数的参数；

   —数组响应式方法：当数组通过该类方法发生变化时，实时响应在web页面上；

   —push()：在数组后面添加一个元素；

   —pop()：删除数组中最后一个元素；

   —shift()：删除数组中第一个元素；

   —unshift()：在数组最前面添加一个元素；

   —splice()：可以实现删除、插入和替换元素；

   —sort()：数组排序；

   —reverse()：数组逆序显示；

   —注意通过索引值修改数组中的元素是非响应式的，不会再web页面中显示：list[0]='bb';

   —可以通过Vue的方法进行响应式修改：Vue.set()；需要传入三个参数：第一个参数为要修改的对象，第二个参数为要修改对象中的元素索引值，第三个参数为修改值；

7. v-model表单绑定

   —表单控件在实际开发中非常常见，特别对于用户信息得提交；

   —Vue中使用v-model实现表单元素和数据的双向绑定；

   —双向绑定：相当于两个指令，一个是将data中的数据信息绑定在表单的value属性中，即：:value="message"；另一个是表单中的数据信息实时绑定在data中，有一个事件v-on:input

   可以监听表单输入，可以为其绑定一个方法，将监听到的表单内容返回给data：v-on:input="valueChange" methods:{valueChange(event){this.message = event.target.value}}；

   简单写法：<input type='text' :value="message" @input="message = $event.target.value">

   —v-model其实是一个语法糖，背后实质是两个操作：v-bind绑定一个value属性，v-on给当前元素绑定input事件；

   —而使用v-model可以直接实现表单项和数据之间的双向绑定：<input type="text" v-model="message">；

   值绑定

   —一般表单项在实际开发中，value值是动态从网络获取或者从data在获取，因此需要通过v-bind动态给value绑定值；

   例如：

   <script>
    <label v-for="item in originHobbies" :for="item">
       <input type = "checkbox" :value="item" :id="item" v-model="hobbies">{{item}} 
    </label>
   </script>
   

   修饰符

   —.lazy：默认情况下，v-model时在input事件同步输入框的数据；lazy修饰符可以使得在用户在表单项中输入回车时，才会将表单内容全部加载出来；即可以让数据在失去焦点或者回车时才更新；

   —.number：默认情况下，在表单输入框中，无论是输入字母还是数字，都会被当作字符串类型处理；可以通过该修饰符直接将内容当作数字处理；即可以让输入框中输入的内容自动转换为数字类型；

   —.trim：去除用户输入表单项中的多余空格内容；即可以过滤内容左右两边的空格；