Vue学习笔记（一）

初学Vue.js

mustache语法

<!-- mustache语法中不仅可以直接写变量，也可以写简单的表达式-->
<div id=' app '>
  <h2>{{name}}</h2>
  <h2>{{firstName + ‘ ’ + lastName}}</h2>
  <h2>{{firstName }} {{ lastName}}</h2>
</div>
<script>
const app = new Vue({
  el:'#app'
  data:{
    name : 'Kobe Bryant',
    firstName : 'Kobe',
    lastName : 'Bryant'
  }
})
</script>

计算属性computed

<div id='app'>
  <h2>{{name}}</h2>
</div>
<script>
const app = new Vue({
  el:'#app'
  data:{
    firstName : 'Kobe',
    lastName : 'Bryant'
  },
  computed:{
	name:function(){
	  return this.firstName+' '+this.lastName
	}
  }
})
</script>

每个计算属性都有getter和setter，通常情况下只需要getter来读取，但在某些情况下，也可以提供一个setter来设置（和Java中的JavaBean类似）。

//计算属性的完整写法
//一般没有set方法，只读属性
computed:{
	name:{
	  set: function(){},
	  get: function(){
	    return this.firstName+' '+this.lastName
	  }
	  
	}
  }

methods的结果不会被缓存，而计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。所以，当该结果频繁使用时，使用计算属性具有更高的效率。

ES6对象增强写法

属性初始化简写和方法简写：

登录切换的input复用问题

B站教程链接

数组中的响应式方法

方法	作用
push()	在数组尾添加元素
pop()	删除数组中最后一个元素
shift()	删除数组中第一个元素
unshift()	在数组头添加元素
splice()	删除元素、替换元素、添加元素
sort()	排序数组
reverse()	逆置数组

let arr=['a','b','c','d']
//删除元素：第二个元素传入需删除元素的个数（如果不传，则删除后面的所有元素）。
arr.splice(1,2)//删除从下标1开始的2个元素
//替换元素：第二个元素传入需替换元素的个数。
arr.splice(1, 3, 'e','f','g')//替换从下标1开始的3个元素
//添加元素：第二个参数传入0（代表删除0个元素）
arr.splice(1, 0, 'e','f','g')//从下标1开始添加的3个元素

JavaScript的高阶函数

B站教程：https://www.bilibili.com/video/av59594689?p=44

指令

v-once

该指令表示元素或组件只渲染一次，不会随着数据的改变而改变。

<div id='app'>
  <h2 v-once> {{name}}</h2>
</div>
<script>
const app = new Vue({
  el:'#app',
  data:{
	name: 'Bob'
  }
})
</script>

v-html

该指令更新元素的 innerHTML，将字符串中的HTML代码渲染出来。

<div id='app'>
  <h2 v-html='url'> </h2>
</div>
<script>
const app = new Vue({
  el:'#app',
  data:{
	url: '<a href="https://www.baidu.com">百度一下</a>'
  }
})
</script>

v-text

该指令作用与Mustache语法类似，都是用于将数据显示在界面中。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<!-- 注意：v-text会覆盖原来标签内的内容 -->
<!-- ”你好”将会被覆盖 -->
<span v-text="msg">你好</span>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!-- mustache语法不会被渲染，直接显示 -->
<span v-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<div id='app'>
  <h2> {{str}} </h2>
  <h2 v-cloak> {{str}} </h2>
</div>
<script>
//延时之后，渲染完成之前，{{str}}会以原形式存在，影响观感
//使用v-cloak后，{{str}}渲染完成之前不会出现
setTimeout(function({
  const app = new Vue({
  el:'#app',
  data:{
	str: '百度一下'
    }
  })
}),1000)

</script>

v-bind

动态绑定标签属性。

<div id='app'>
  <img v-bind:src='url'></img>
  <!-- v-bind语法糖，直接用“:”代替 -->
  <img :src='url'></img>
</div>
<script>
const app = new Vue({
  el:'#app',
  data:{
	url: 'https://cn.vuejs.org/images/logo.png'
  }
})
</script>

动态绑定class

动态绑定class，可以是对像类型，也可以是数组类型。v-bind绑定的类和普通的类不会冲突，二者会合并在一起。如果表达式过于冗长，也可以写计算属性。

<style>
  .active{
    color:red;
  }
  .line{
	font-size:16px;
  }
  .title{
	font-family: cursive;
  }
</style>
<div id='app'>
  <!--格式： <h2 :class="{类名1:boolean,类名2:boolean}"></h2> -->
  <h2 :class="{active:isActive}">绑定对象类型</h2>
  <h2 :class="classArr">绑定数组类型</h2>
  <button v-on:click="butClick">动态绑定class</button>
</div>
<script>
const app = new Vue({
  el:'#app',
  data:{
	isActive: true,
	//数组里的类名若是不加引号，则会被认为是vue实例中的变量
	classArr: ['active','line','title']
  },
  methods:{
	btnClick:function(){
	  this.isActive = ! this.isActive
	}
  }
  
})
</script>

动态绑定style

动态绑定style，可以是对像类型，也可以是数组类型。写CSS样式的时候，可以使用驼峰式，比如 font-size 可以写成 fontSize；也可以短横线分隔，如 ‘font-size’（记得加引号）。

<!--格式：{CSS属性名: value} 注意：value要加上引号，否则会被vue当成变量处理-->
<h2 :style="{fontSize: '20px'}"></h2>

v-on

为元素绑定事件监听。

<!--为按钮绑定一个点击事件监听-->
<button v-on:click="btnClick"></button>
<!--语法糖写法-->
<button @click="btnClick"></button>

调用事件监听方法时，不需传入参数时可以省略括号；需要传入参数且需要传入event时，用$event传入事件。

<div id="app">
  <!--方法定义需要参数，但调用时不传参，不会报错，但是参数为undefined-->
  <button @click="btnClick()">按钮1</button>
  <!--方法定义需要参数，但调用时不传参且不加括号，vue会把event事件对象传入-->
  <button @click="btnClick">按钮2</button>
  <!--方法定义需要参数和事件对象，用$event传入事件对象-->
  <button @click="btn3Click(2333,$event)">按钮3</button>
</div>
<script>
const app = new Vue({
  el:'#app',
  methods:{
	btnClick(param){
	  console.log(param)
	},
	btn3Click(param,event){
	  console.log(param,event)
	}
  }
  
})
</script>

v-on修饰符详细说明。

v-if v-else v-else-if

<div id="app">
  <h2 v-if="true">此元素会被渲染</h2>
  
  <h2 v-if="false">此元素不会被渲染</h2>
  <h2 v-else>此元素会被渲染</h2>
</div>

v-show

v-show的作用和v-if类似，都可以决定一个元素是否显示在界面。

<div id="app">
  <!--
	包含v-if的元素不存在与DOM中；
	包含v-show的元素存在DOM中，只是元素中多了display:none
  -->
  <h2 v-if="false">此元素不会被渲染</h2>
  <h2 v-show="false">此元素不会被渲染</h2>
</div>

故当元素需要频繁切换显示和隐藏时，v-show的效率更高。

v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<!--遍历数组-->
<div v-for="item in items">
  {{ item.text }}
</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>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

<!--key中绑定index是没有用的，要保证key的唯一性-->
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

总结就是key的主要作用在于高效地更新虚拟DOM。

v-model

在表单控件或者组件上创建双向绑定。

<input type="text" v-model="message">

等同于：

<input type="text" :value="message" @input="message=$event.target.value">

v-model结合radio类型使用

<label><input type="radio" name="sex" value="男" v-model="sex">男</label>
<label><input type="radio" name="sex" value="女" v-model="sex">女</label>

v-model结合checkbox类型使用

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})
</script>

v-model结合select类型使用

官方教程：https://cn.vuejs.org/v2/guide/forms.html