VUE笔记

1、vue基础

（1）vue会选择el命中的元素以及其内部的后代元素

（2）在el挂载时尽量选择命中id选择器，因为它是唯一的

（3）el挂载只对双标签有用，但是部分双标签例如html与body不可用

（4）Vue用到的数据都定义在data中

Object.freeze()可以冻结一个对象，被冻结的对象再也不能被修改了。

数据与方法：被创建时就已经存在于data中的实例的属性是响应式的，除了数据属性外还有实例属性与方法，他们的前面加了$以做区分。

2、vue指令

（1）内容绑定，事件绑定：

v-text：设置标签中的内容，但默认写法会替换标签中的所有内容，使用插值表达式{{}}可以指定替换部分内容

v-html：可以解析html结构的指令，而v-text只会解析文本

v-on：为元素绑定事件，指令可以简写为@，绑定的方法定义在methods属性中，方法内部可以通过关键字访问data中的数据，用于监听DOM事件

（2）显示切换，属性绑定：

v-show:根据表达式的真与假，来切换元素的显示与隐藏，指令后的表达式最终都会成为布尔型

<div id = "app">
    <img src = "地址" v-show ="age>=18">
</div> 
​
var app =new Vue({
el:"#app",
data:{
isShow:false,
age:18
}
})

（3）列表循环，表单元素绑定：

v-for : 根据数据生成列表结构，使用方法：()

​

• 列表相同元素{{变量名}}

​

可以用v-for指令基于一个数组渲染一个列表。需要使用item in items格式的语法， items是源数组，item是被迭代数组元素的别名

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在v-for中可以访问所有父作用域中的属性，v-for还支持可选的第二参数，即当前索引index。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可以用of代替in

v-for也能遍历一个对象的属性

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

也可以以第二个参数作为属性名称遍历

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

也可以以第三个参数作为索引遍历

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

维护状态

使用v-for渲染元素列表时，如果改变列表顺序，它不会移动DMO来匹配列表顺序的改变，而是按照索引位置来渲染。为了让它能跟踪每个节点位置，重用和重新排列元素，所以需要给每项提供一个唯一的key属性

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

变更方法：被侦听的数组的变更方法

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

替换数组：使用替换数组不会变更原始数组，而总是返回一个新的数组，可以用新数组代替旧数组

filter()
concat()
slice()

显示排序后结果

当我们需要显示一个数组排序后的结果，而不改变原始数据的条件下，可以创建一个计算属性来返回排序后的数组

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在嵌套的数组中，可以使用这种方法

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

如果整数用作v-for，那么它将会重复对应次数

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

输出：1 2 3 4 5 6 7 8 9

渲染包含多个元素的内容时，与v-if相同，也是利用<template>。

（4）动态参数，属性绑定

v-bind简写可以直接用冒号表示

用方括号括起来的JS表达式作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>

这里的attributeName就是一个动态参数，会被当做一个JavaScript表达式进行动态求值，所求的值会作为最终参数使用。

同理，利用这个特点，我们也可以用v-bind来动态的切换class，从而达到动态切换样式的目的。

<view :class="chatBoxFix ? 'chat-box-fix' : 'chat-box'"> </view>

上面这种切换方式叫做三元表达式，除此之外还有对象语法和数组语法：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
​
data: {
  isActive: true,
  hasError: false
}

渲染结果为：class="static isActive"

<div v-bind:class="[activeClass, errorClass]"></div>
​
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染结果为：class="active text-danger"

除此之外，我们也可以不把绑定的对象写在模板里，可以绑定一个返回对象的计算属性（这种模式非常常用且重要）：

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

动态参数，事件绑定

用v-on来为一个事件绑定事件处理方法，v-on可以简写成@

事件处理方法一般写在methods里面

<div id="test">
    <button @click="greet">
        按钮
    </button>
</div>
​
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

（5）表单输入绑定（v-model）

可以用v-model指令在表单元素：<input>、<textarea>、<select>上创建双向事件绑定。

v-model会忽略表单元素的属性值的初始值，而总是将Vue实例的数据作为数据来源，可以在js里的data里来声明v-model绑定的元素的初始值。

文本的双向绑定：

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框的双向绑定（多个复选框绑定到同一个数组）：

<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>
​
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

单选按钮：

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

选择框：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

v-model还可以添加修饰符：

.lazy : 如果在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。如果添加了lazy修饰符，那么就会转为在change事件后再进行同步，而不是在input时更新：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number : 若想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符：

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

.trim : 若要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：

<input v-model.trim="msg">