vue的基础使用一-Wenn's Publish

v-if v-show

v-show主要是适用于频繁操作，因为主要是并不需要进行操作dom树，节省性能资源

v-if主要是在操作dom树，较为耗费性能资源

<template lang="">
	<div>
		<button @click="btnClick">按钮</button>
		<div class="item" v-show="flag">盒子一</div>
		<div class="item" v-if="flag">盒子二</div>
	</div>
</template>

<template lang="">
	<div>
    <div v-if="scope>90">优秀</div>
    <div v-else-if="scope>=60">及格</div>
    <div v-else>不及格</div>
	</div>
</template>

v-model

<template>
<input type="text" v-model="msg" value="123"> 
</template>

不论修改data中的值，还是手动在输入框中进行修改，都会实现一方改变，另一方跟着改变，即双向绑定

多选框中需要将value写入，才可以将默认值显示

<template>
		<select name="" id="" v-model="city">
			<option value="上海">上海</option>
			<option value="北京">北京</option>
			<option value="广州">广州</option>
			<option value="深圳">深圳</option>
		</select>
</template>

如果想要得到输入之和，则需要进行转换，否则就会直接以字符串进行拼接

<template>
		<input type="text" v-model.number="x" />
		<input type="text" v-model.number="y" />
		<button @click="addClick">+</button>
</template>

v-model.trim与js中的trim()方法一致

v-model.lazy是当值改变并且失去焦点时才会修改值

<input type="text" @input="inputChange" v-model.trim="msg" />
<input type="text" v-model.lazy="msg1" />

vue2中不允许有多个根元素,在vue3中允许template中有多个根元素

v-once

如果使用了v-once,则会当作静态资源仅加载一次,之后并不会进行加载,如果放在一个盒子或组件,则整个盒子或组件也不会进行动态修改;如果该组件或盒子仅需加载一次,则可以使用v-once,这样可以节省一部分性能,进行性能优化

  <template id="my-app">
   <h2 v-once>8</h2>
   <h2>8</h2>
   <button @click="btnClick">按钮</button>
  </template>

v-text

与Mustache语法的作用相同,不过不够直观,所以较少使用

   <h2></h2>
   <h2 v-text="message"></h2>

v-html

与innerHTML一致,识别html标签;vue内部为了避免xss攻击,插值表达式和v-text默认看到带标签的字符串,就会做编码处理,把<>转换为&lt&gt

<template>
   <div v-html="tag"></div>
</template>

tag: '<div style="color:red;background-color:blue">哈哈哈</div>'

v-pre

展示原始数据,不进行渲染

<template>
  <h2 v-pre></h2>
</template>

v-cloak

可以隐藏未编译时的Mustache标签,直到组件实例准备完毕,可以配合style样式进行,会在组件编译时检查v-cloak,如果有这个,则会对该标签添加一个属性,即v-cloak,当mustache编译完毕时,则会自动删除这个属性

<style>
  [v-cloak] {
  display: none;
  }
</style>
<template>
  <h2 v-cloak></h2>
</template>

v-bind

<template>
  <img v-bind:src="imgUrl" alt="">
  <a :href="link"></a>
</template>

两种都是用于绑定属性,下面一种是v-bind的简写方式使用v-bind绑定class类名可以传入函数，三元表达式，数组，对象皆可绑定style样式可以驼峰与短横线，如果使用像font-size式时，可以写作fontSize或"font-size" 同样可以绑定style为一个对象，这样更方便一些，且动态修改；当然也可以使用函数，接受一个函数返回值使用数组时添加两个对象可以合并数组中的对象属性

动态绑定属性

<template>
  <div :[name]="value"></div>
</template>

return {
  name:'data',
  value:'data-id'
}

也可以将一个对象绑定为一个元素的属性

<template>
  <div v-bind="info"></div>
  <div :="info"></div>
</template>

return {
  info:{
    name:'vue',
    age: 22,
    gender:'male'
  }
}

v-on

<template>
  <button @click="btnClick">按钮</button>
</template>

btnClick(){
  console.log('我被点击了')
}

绑定多个事件可以写入一个对象

<template>
  <button v-on="{click:btnClick,mousemove:mouseMove}">按钮</button>
  <button @="{click:btnClick,mousemove:mouseMove}">按钮</button>
</template>

btnClick(){
  console.log('我被点击了')
}
mouseMove(){
  console.log('鼠标移动了')
}

v-on参数传递

<template>
  <button @click="btnClick">按钮</button>
</template>

btnClick(e){
  console.log(e)
}

如果没有其它的参数需要进行传递时，可以直接在函数中写入形参，vue会在内部有一个合成事件对象

如果想在要获取到事件对象的同时传入参数，则需要使用$event语法

<template>
  <button @click="btnClick($event,'why')">按钮</button>
</template>

btnClick(e,name){
  console.log(e,name)
}

v-on的修饰符

<template>
  <button @click.prevent="btnClick">按钮</button>
</template>

btnClick(e){
  console.log(e)
}

@click.prevent为阻止默认行为,@click.stop为阻止冒泡

<template>
  <input @input.enter="inputChange">
</template>

inputChange(){
  console.log('我键起了enter')
}

当键下enter时才触发函数

v-if\v-else\v-else-if

  <template id="my-app">
   <h2 v-if="scope>90">优秀</h2>
   <h2 v-else-if="scope>60">及格</h2>
   <h2 v-else>不及格</h2>
  </template>

v-if时惰性的，当条件为false时并不会渲染node，会直接销毁掉 当条件为true时，才会真正渲染块中的内容

template(react中的flagments)

<template>
   <template v-if="true">
    <div>
     <h2>hahah</h2>
    </div>
   </template>
   <template v-else>
    <div>
      <h2>hehehe</h2>
    </div>
   </template>
  </template>

vue在解析中当发现时template标签时并不会将该标签进行解析

v-show

v-if为false时不存在node节点，会操作VNode，而v-show为常规属性中的display一样; 当v-show为true时，会将对应元素的display值修改为block,反之，为false时修改为none；如果需要频繁的进行显示或隐藏，可以使用v-show，有利于性能优化

且v-show不支持template，并且不支持v-else

列表渲染 v-for

<div>
  <ul>
    <li v-for="(item,index) in movies">--</li>
  </ul>
</div>

当然也可以是一个对象，这样第一个参数为key的值，第二个参数为key本身，第三个参数为索引值

<div>
  <ul>
    <li v-for="(value,key) in info">--</li>
  </ul>
</div>

甚至可以进行遍历数字，可以从1开始所进行到数字本身

v-for可以和template结合使用

<tempalte>
  <ul>
    <template v-for="item in movies">
      <li></li>
      <li></li>
      <li class='line'></li>
    </template>
  </ul>
</tempalte>

这样在最后的渲染中并不会存在多余的标签，与div不同

数组更新检测

在使用以下数组方法时，只要使用了该方法，就会进行视图更新

.push()添加、.pop()弹出、.shift()删除第一个元素并返回该值、.unshift()、splice()、sort()、reverse()等等

以上的方法会对原数组进行修改，有时候我们会不想对原数组进行修改，则可以是用.filter()、.concat()、.slice()

for of也可以进行遍历，但是仅可以遍历数组，不能遍历对象

v-for中的key

VNode

虚拟节点，在vue中所有标签都以虚拟节点的形式存在，VNode的本质是一个js对象，最大的好处在于跨平台

虚拟节点会形成VNode Tree，即虚拟dom

在v-for中最好绑定一个key，且这个key唯一，主要用作vue的diff算法，在新旧nodes对比时辨识VNodes

如果没有key，则会按照一一位置从vnodes.length最小的开始遍历，当新vnodes与旧vnodes中的vnode没有变化时，将不会进行patch，如果发生了变化，则会进行patch；但是如果新的头部vnode与旧的头部vnode不同，而其余的vnode没有改变时，这时将会浪费很多性能

当新旧vnodes存在key时，判断到key与type相同时，diff算法会认为这个vnode是同一个，如果有对该vnode的修改时，就仅仅修改vnode的属性；如果发现存在不同时，就会跳出while循环，从vnodes的尾部开始diff，继续判断key与type；如果存在新的vnode，则会将一个null与该vnode进行diff，此时当旧的vnode为null时，表示将新的vnode挂载；如果对原有的vnode进行修改，当以上都不进行时，则会卸载旧的vnode，挂载新的vnode；