二、Vue基础语法

插值操作

1. Mustache（双大括号）
   将data中的文本数据，插入到HTML中

<h2>{{ name }}</h2>
<h2>{{ name }} {{ lastname }}</h2>
<h2>{{ num * 2}}</h2>

2. v-once
   该指令后面不需要跟任何表达式（比如之前的v-for后面是有跟表达式的）
   该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变

<h2 v-once>{{ name }}</h2>

3. v-html

<div id="app">
  <h2>{{ link }}</h2>
  <h2 v-html="link"></h2>
</div>
<script src="js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      link: '<a href="http://www.baidu.com">百度一下</a>>'
    }
  })
</script>

4. v-text
   接受一个string类型

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

5. v-pre
   v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

<h2>{{ message }}</h2> <!--第一个h2元素中的内容会被编译解析出来对应的内容-->
<h2 v-pre>{{ message }}</h2> <!--第二个h2元素中会直接显示{{ message }}-->

6. v-clock
   在某些情况下（浏览器刚打开的瞬间），我们浏览器可能会直接显示出未编译的Mustache标签

<style>
 [v-clock]{ display:none;}
</style>

<div id="app" v-cloak>
 <h2>{{message}}</h2>
</div>

<script>
 setTimeout(function (){
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好'
   }
  })
 },100)
</script>

绑定属性

1. v-bind指令，语法糖（缩写）是:
2. 有哪些属性需要动态进行绑定呢？
   比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
   
3. 绑定class

①对象语法
用法一：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值（true or false）

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

②数组语法
用法一：直接通过[]绑定一个类

 <h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

4. 绑定style

①对象语法

 :style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性
②数组语法

 <div v-bind:style="[baseStyles, overridingStyles]"></div>

style后面跟的是一个数组类型
多个值以，分割即可

计算属性

计算属性的缓存：计算属性比methods性能高，计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

事件监听

1. v-on指令，语法糖（缩写）是@
   v-on:click可以写成@click
2. 参数
   情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
   情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
   
   
3. v-on修饰符

停止冒泡

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

阻止默认事件

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

监听键的点击

<button @keyup.enter="keyClick">按钮</button> //回车键

只触发一次

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

条件判断

1. v-if、v-else-if、v-else
   建议第二种方式
   
   
2. input复用问题
   原因：因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
   解决：可以给对应的input添加key，并且我们需要保证key的不同
   
3. v-show
   v-if当条件为false时，压根不会有对应的元素在DOM中。
   v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
   开发中如何选择呢？
   当需要在显示与隐藏之间切片很频繁时，使用v-show
   当只有一次切换时，通过使用v-if
   

循环遍历

1. v-for遍历数组

<li v-for ="item in movies">{{item}}</li> //没有索引值
<li v-for ="(item, index) in movies">{{index+1}}---{{item}}</li>//获取索引值

2. v-for遍历对象
   只获取value
   获取key和value，格式(value, key)
   获取key和value和index，格式(value, key，index)
   

3. 组件的key属性
   有key的时候会优先把key和内容一一对应起来，没有key的时候会很笨，往中间插入的时候会依次往后排，所以我们需要使用key来给每个节点做一个唯一标识。
   diff算法，所以一句话，key的作用主要是为了高效的更新虚拟DOM。
   
   

4. 检测数组更新
   以下都是可以做到响应式的：
   
   以下不是响应式的：
   this.letters[0] = ‘bbbbbb’; //通过索引值修改数组中的元素不是响应式的
   可以这样做：
   this.letters.splice(0, 1, ‘bbbbbb’) //又可以响应式啦
   set(要修改的对象, 索引值, 修改后的值)
   Vue.set(this.letters, 0, ‘bbbbbb’)

v-model

1. v-model
   实现表单元素和数据的双向绑定
   因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变

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

2. v-model原理
   v-model其实是一个语法糖，它的背后本质上是包含两个操作：
    • v-bind绑定一个value属性
    • v-on指令给当前元素绑定input事件

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

等同于

<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

3. v-model：radio

<div id="app">
 <label for="male"><input type="radio" id="male" value="男" v-model="sex">男</label>
 <label for="female"><input type="radio" id="female" value="女" v-model="sex">女</label>
 <h2>您选择的是{{sex}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
 el:'#app',
 data:{
  message:'hello',
  sex:''
 }
})
</script>

4. v-model：checkbox

单个复选框：v-model即为布尔值

<div id="app">
<!-- 单个 -->
 <label for="agree">
  <input type="checkbox" id="agree" v-model="checked">同意协议
 </label>
 <p>是否选中：{{checked}}</p>
 <button v-bind:disabled="!checked">下一步</button>
</div>
<script src="js/vue.js"></script>
<script>
 var app = new Vue({
  el:'#app',
  data:{
  message:'hello',
   checked: false
  }
 })
</script>

多个复选框：对应的data中属性是一个数组

<div id="app">
 <!-- 多个 -->
 <input type="checkbox" value="篮球" v-model="hobbies">篮球
 <input type="checkbox" value="足球" v-model="hobbies">足球
 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
 <p>您的爱好是{{hobbies}}</p>
</div>
<script src="js/vue.js"></script>
<script>
 var app = new Vue({
  el:'#app',
  data:{
   message:'hello',
   hobbies:[]
  }
 })
</script>

5. v-model：select
   单选：v-model绑定的是一个值，选中option中的一个时，会将它对应的value赋值到mySelect中
   多选：v-model绑定的是一个数组，选中多个值时，就会将选中的option对应的value添加到数组mySelects中，要加上multiple属性
6. 值绑定
   动态的给value赋值，可以通过v-bind:value动态的给value绑定值

<div id="app">
 <label v-for="item in allHobbies" :for="item">
  <!-- value值不能写死，动态遍历展示到这个位置-->
  <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
 </label>
 <p>您的爱好是{{hobbies}}</p>
</div>
<script src="js/vue.js"></script>
<script>
 var app = new Vue({
  el:'#app',
  data:{
   message:'hello',
   hobbies:[],
   allHobbies: ['篮球','足球','羽毛球','乒乓球','台球','排球','高尔夫球']
  }
 })
</script>

7. 修饰符

.lazy //默认情况下，v-model默认是在input事件中同步输入框的数据的，这个可以让数据在失去焦点或者回车时才会更新。
.number //默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

<input type="number" v-model.number="old">

.trim //过滤内容左右两边的空格

阶段案例

1. 保留两位小数

<td>{{item.price.toFixed(2)}}</td>

3. 价格复用方案一

<td>{{getFinalPrice(item.price)}}</td>
<script>
methods: {
 getFinalPrice(price){
  return '¥'+ price.toFixed(2)
 }
}
</script>

3. 价格复用方案二（过滤器）
   Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤。经常用于格式化文本，比如字符全部大写，货币单位使用逗号分隔，日期形式的转换等。过滤的规则是自定义的，通过给Vue.js添加选项来设置，格式{{message|filter}}，message为要过滤的对象，filter为过滤条件。
   过滤器会自动把管道（就是|这东西）前面的元素作为第一个参数传入

<td>{{item.price | showPrice}}</td>
<script>
filters: {
 showPrice (price){
  return '¥'+ price.toFixed(2)
 }
}
</script>