Vue2学习

1.与React对比

相似之处

• Virtual DOM
• 提供了响应式(Reactive)和组件化（Composable）的视图组件
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

不同之处

• React拥有更丰富的生态系统
• Vue渲染过程自动追踪，每个组件自动获得了shouldComponentUpdate
• React使用JSX Vue推荐模板。 对比来说，前者优点在于开发工具支持好，开发语言单一高效；后者使得基于HTML的模板迁移更容易，开发效率在一定条件下也有提升。

CSS方面

• CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现
• Vue 设置样式的默认方法是单文件组件里类似<style scoped>的标签。
• Vue 的单文件组件里的样式设置是非常灵活的。通过vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成CSS Modules——全部都在<style>标签内。

扩展方面

• 脚手架层面Vue CLI可以在项目生成时进行配置，提供模板，可通过插件扩展运行依赖同时也可以预设模板。
• React Native跨平台开发更强，Vue和Weex合作在积极发展。

2.特性

1.声明式渲染 响应式更新

2.指令

• v-bind 绑定
• v-if 判断
• v-for 遍历
• v-on 事件监听
• v-model 表单输入和应用状态之间的双向绑定

3.组件

组件注册

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
​
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

3.实例

创建

var vm = new Vue({
  // 选项
})

数据与方法

new Vue({
  //data  这里预定义好的property是响应式的
})
//这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

4.实例生命周期钩子

5.模板语法

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
​
<!-- 缩写 -->
<a :href="url">...</a>
​
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
​
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
​
<!-- 缩写 -->
<a @click="doSomething">...</a>
​
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

6.计算属性和侦听器

计算属性的getter函数没有副作用

计算属性是基于它们的响应式依赖进行缓存

7.Class与Style绑定

• 对象语法

  data: {
    isActive: true,
    hasError: false
  }
  ​
  <div
    class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  ​
  ​
  #绑定计算属性
  <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'
      }
    }
  }
  ​
  ​
  //内联样式
  data: {
    activeColor: 'red',
    fontSize: 30
  }
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  

• 数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>
​
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
​
#数组中添加对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
​
​
//内敛样式
<div v-bind:style="[baseStyles, overridingStyles]"></div>
​
//支持多重值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>