从零开始的vue学习笔记（二）

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。data的数据和视图同步更新。
实例创建后添加一个新的属性，对这个属性的的改动将不会触发任何视图的更新。
如果需要一个属性，但是一开始它为空或不存在，仅需要设置一些初始值。
Object.freeze()方法可以阻止修改现有的属性
除了数据属性，Vue 实例还包含实例属性与方法，前缀为$，例如：vm.$data，vm.$el，vm.$watch()(这里假设vm是某个实例名)，详情可以参考API

实例生命周期钩子

Vue实例有自己的生命周期，提供了一些钩子函数给我们写自己的逻辑代码：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated

ps：不要在选项属性或回调上使用箭头函数，即这些钩子函数不要用箭头函数的写法，因为他们没有this

生命周期图

模板语法

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
```
<span>Message: {{ msg }}</span>
```
v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
```
<span v-once>这个将不会改变: {{ msg }}</span>
```

原始 HTML

v-html 指令输出真正的html，而不是字符串

<p>Using mustaches: {{ rawHtml }}</p> 输出字符串

<p>Using v-html directive: <span v-html="rawHtml"></span></p> 输出rawHtml变量代表的HTML

使用 JavaScript 表达式

所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

指令

常见有v-if,v-on,v-bind,v-for。

参数：
```
<a v-bind:href="url">...</a>
```
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定

动态参数：
```
<a v-bind:[attributeName]="url"> ... </a>
```
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用

修饰符：
```
<form v-on:submit.prevent="onSubmit">...</form>
```
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例子的.prevent就是修饰符

缩写：
```


<a v-bind:href="url">...</a>



<a :href="url">...</a>



<a v-on:click="doSomething">...</a>



<a @click="doSomething">...</a>
```

计算属性和侦听器

模板一般不要加入过多的逻辑，只是用来渲染会职责分明一些，把逻辑处理防盗计算属性，会更加合理；

  <p>Computed reversed message: "{{ reversedMessage }}"</p>

var vm = new Vue({

  el: '#example',

  data: {

    message: 'Hello'

  },

  computed: {

    // 计算属性的 getter

    reversedMessage: function () {

      // `this` 指向 vm 实例

      return this.message.split('').reverse().join('')

    }

  }

})

这里的reversedMessage就是计算属性，可以逆序一个字符串。

定义一个方法，能够达到同样的效果：

  <p>Reversed message: "{{ reversedMessage() }}"</p>

<p>

// 在组件中

methods: {

  reversedMessage: function () {

    return this.message.split('').reverse().join('')

  }

}

两者区别：计算属性是基于它们的响应式依赖进行缓存的，方法总会再次执行函数；在不同场景下选择不同的方式吧~

tips：使用计算属性，而不是侦听属性（watch里定义的方法）；计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter；自定义的侦听器watch在数据变化时执行异步或开销较大的操作时是最有用的

Class 与 Style 绑定

v-bind 用于 class 和 style，表达式结果的类型除了字符串之外，还可以是对象或数组

先介绍Class绑定

绑定对象

<div

class="static"

v-bind:class="{ active: isActive, 'text-danger': hasError }">

</div>

data: {

isActive: true,

hasError: false

}

当 isActive 或者 hasError 变化时，class 列表将相应地更新,也可以让绑定对象不内联定义在模板里，结果也是一致的：

<div v-bind:class="classObject"></div>

data: {

classObject: {

  active: true,

  'text-danger': false

  }

}

绑定计算属性也可以更灵活的展现（不举例子了）

绑定数组

<div v-bind:class="[activeClass, errorClass]"></div>

data: {

  activeClass: 'active',

  errorClass: 'text-danger'

}

绑定组件（语法和前面完全类似）

Style绑定

v-bind:style 的对象语法

绑定对象

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {

  activeColor: 'red',

  fontSize: 30

}

或者直接写

<div v-bind:style="styleObject"></div>

data: {

styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

绑定数组

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

条件渲染

v-if、v-else-if、v-else可以配合使用：

    <div v-if="type == 'A'">

      A

    </div>

    <div v-else-if="type == 'B'">

        B

    </div>

    <div v-else="type == 'C'">

        C

    </div>

    data : {

        type : "B"

    }

在<template> 元素上使用 v-if 条件渲染分组，显示多个元素

<template v-if="ok">

  <h1>Title</h1>

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

</template>

用key管理重复元素

<template v-if="loginType === 'username'">

  <label>Username</label>

  <input placeholder="Enter your username" key="username-input">

</template>

<template v-else>

  <label>Email</label>

  <input placeholder="Enter your email address" key="email-input">

</template>

使用key标示元素后，Vue不会采用偷懒的复用，而会重新渲染元素

v-show：只有显示和不显示两种

<h1 v-show="ok">Hello!</h1>

v-if vs v-show：需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

列表渲染

v-for用于列表渲染

迭代数组

<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' }

  ]

}

})

ps:index从0开始，in可以替换为of，迭代插值写的是{{index}} ，不是{{item.index}}

迭代对象

<div v-for="(value, name, index) in object">

  {{ index }}. {{ name }}: {{ value }}

</div>

new Vue({

  el: '#v-for-object',

  data: {

      object: {

          title: 'How to do lists in Vue',

          author: 'Jane Doe',

          publishedAt: '2016-04-10'

      }

  }

})

使用唯一key配合v-for保证渲染正确（删除、排序、过滤等场景用得到）
```
<div v-for="item in items" v-bind:key="item.id">



</div>
```
数组变异方法 (mutation method)

push()、pop()、shift()、unshift()、splice()、sort()、reverse()，例子：
```
example1.items.push({ message: 'Baz' })
```
这些方法会直接改变数组本身
非变异 (non-mutating method) 方法

filter()、concat()、slice()
```
example1.items = example1.items.filter(function (item) {

return item.message.match(/Foo/)

})
```
这些方法不会改变传入的数组本身，但是方法的返回值是一个新数组，可以把这个数组赋值给原来的数组达到同样的效果

注意事项

数组的一些错误写法：

  var vm = new Vue({

  data: {

      items: ['a', 'b', 'c']

  }

  })

  vm.items[1] = 'x' // 不是响应性的

  vm.items.length = 2 // 不是响应性的

正确写法：

//第一个问题

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

//实例写法

vm.$set(vm.items, indexOfItem, newValue)

//第二个问题

vm.items.splice(newLength)

对象的一些错误写法：

var vm = new Vue({

data: {

  a: 1

}

})

// `vm.a` 现在是响应式的

vm.b = 2

// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性，但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性：

var vm = new Vue({

data: {

  userProfile: {

    name: 'Anika'

  }

}

})

Vue.set(vm.userProfile, 'age', 27)

//或者

vm.$set(vm.userProfile, 'age', 27)

表单输入绑定

v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定,本质上是语法糖。

文本

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>

<p style="white-space: pre-line;">{{ message }}</p>

<br>

<textarea v-model="message" placeholder="add multiple lines"></textarea>

tips: (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

复选框

多个复选框，绑定到同一个数组，例子：

  <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>

new Vue({

  el: '#example-3',

  data: {

      checkedNames: ['Jack']

  }

})

单选按钮

  <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: 'Two'

  }

})

选择框

单选：

<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: 'A'

  }

})

多选时 (绑定到一个数组):

  <div id="example-6">

  <select v-model="selected" multiple style="width: 50px;">

      <option>A</option>

      <option>B</option>

      <option>C</option>

  </select>

  <br>

  <span>Selected: {{ selected }}</span>

  </div>

  new Vue({

  el: '#example-6',

  data: {

      selected: ['A','B']

  }

  })

v-for显示下拉框例子：

  <select v-model="selected">

  <option v-for="option in options" v-bind:value="option.value">

  {{ option.text }}

  </option>

</select>

<span>Selected: {{ selected }}</span>

new Vue({

  el: '...',

  data: {

      selected: 'A',

      options: [

      { text: 'One', value: 'A' },

      { text: 'Two', value: 'B' },

      { text: 'Three', value: 'C' }

      ]

  }

  })

值绑定

单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串，有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串（不举例子了）
修饰符
- .lazy
  
  在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步
```
  

  <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">
```