浅谈VUE

1.学习vue的目标
通过尽可能简单的API实现响应的数据绑定和数组的视图组件
2.核心
一个响应的数据绑定系统，它让数据与DOM保持同步
3.理解MVC架构和MVVM开发方式
实现基于MVVM实现交互式的Web界面
掌握用vue.js实现网站开发
4.组件系统：一种抽象，提供小组件来构建大型应用，然后形成一个组件树。
5.属性和方法
每个vue实例都会代理data对象里的所有属性
被代理的属性是响应的。
6.vue.js数据绑定
插入值：文本

<span>Message:{{ msg }}</span> 

原始的HTML

<div>{{{ raw_html }}}</div>

HTML特性

<div id="item-{{ id }}"></div>

绑定表达式:Javascript表达式 每个绑定只能包含单个表达式
过滤器(Filter):

 {{ message|capitalize }}  过滤器只能在后面   

 过滤器可以串联{{ message|filterA|filterB }}

过滤器也可以接受参数

指令：特殊的带有前缀v-的特性
参数：有些指令可以在后面带一个参数，用冒号隔开

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

修饰符：以半角句号开始的特殊后缀，用于表示指令应当以特殊方式绑定

<a v-bind:href.literal = "a/b/c"></a>

缩写:最常用的v-bind和v-on提供缩写

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

<a v-on:click = "dosomething"></a>    <a @click = "dosomething"></a>

在input中使用v-model来实现数据双向绑定

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'ABCDEFG!'
  }
})
</script>

7.vue的计算属性：computed

基础例子：计算属性的getter
$watch用于观察vue实例上的数据变动,相比较于计算属性，后者更好用一些
计算属性默认的只有getter,需要时可以创建setter

8.vue.js与样式绑定

绑定HTML Class class{{className}}和v-bind:class两者不可混用，推荐使用后者

 //v-bind:class动态地切换class
<div v-bind:class="{'class1':class1 }">
    Hello World
</div>

绑定内联样式：对象语法

vbind指令被用来响应地更新HTML属性

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

数组语法
<div v-bind:style = "[ styleObjectA,styleObjectB ]"></div>
可以将多个样式 对象应用到一个元素上

自动添加前缀

9.vue条件渲染

v-if

   <h1 v-if = "ok">YES</h1> 

template v-if

 <template v-if = "ok">
      <h1>Hello</h1>
      <p>kkkkk</p>
 </template>                //切换多个元素，可以把<template>当作包装

元素，并在上面使用v-if,渲染结果不包含它

v-show：简单的切换元素的css display属性，始终渲染并保存在啊DOM 中，不支持<template>

<h1 v-show = "ok">YES</h1> 

v-else：必须跟在v-if或v-show后面，否则不能识别
v-if vs. v-show
v-if：真实的条件渲染，有更高的切换效率
v-show：简单的基于css切换，有更高的初始切换消耗
需要频繁切换用v-show，不太改变用v-if。
10.列表渲染
v-for：使用v-for指令基于一个数组渲染一个列表
template v-for：v-for用在<template>标签上，用来渲染一个包含多个元素的块
数组变动检测：变异方法:

push()/pop() shift()/unshift() splice() sort()reverse()

替换数组:不会修改原始数组而是返回一个新数组的非变异方法，直接用新数组替换旧数组filter()/concat()/slice()
track-by:用全新对象替换数组
track-by $index
问题：扩展观察数组，为它添加了$set()方法$remove()
需要一个空数组替换items
对象v-for:使用v-for遍历对象，除了$index之外，作用域内还可以访问另外一个特殊变量$key
值域v-for:v-for也可以接收一个整数，此时它将重复模板数次

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

显示过滤/排序的结果:创建一个计算属性，返回过滤/排序过的数组
使用内置的过滤器filterBy和orderBy
计算属性有更好的控制力，也更灵活，因为它是全功能JavaScript。但是通常过滤器更方便。