Vue2Study(一)

前端框架

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.组件

组件注册

1
2
3
4
5
6
7
8
9
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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.实例

创建

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

数据与方法

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

4.实例生命周期钩子

Vue 实例生命周期

5.模板语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 完整语法 -->
<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绑定

  • 对象语法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    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 列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>