Vue.js学习(一)————基础概念初探

Posted by liveipool on December 15, 2016

Vue.js学习(一)————基础概念初探

1.安装

HWFC项目使用的vue-cli进行的快速构建,具体的各种安装查看官方文档相应部分:安装

2.介绍

官网给的介绍是:

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.1声明式渲染

什么叫声明式渲染?不太懂。
声明式渲染.png
这样,就会在对应的地方显示出HelloVue!现在数据和DOM已经被绑定在一起,所有的元素都是响应式的。打开浏览器的控制台,并修改app.message,可以看到上例相应地更新(响应式的作用)。

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

这里面的v-bind属性被称为指令。指令带有前缀 v-,以表示它们是 Vue.js 提供的特殊属性。它们会在渲染过的 DOM 上应用特殊的响应式行为。这个指令的简单含义是说:将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

2.2 条件与循环

条件与循环.png
这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。

v-for:可以绑定数据到数据来渲染一个列表:

<ol>
  <li v-for="todo in todos">
    
  </li>
</ol>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

以其其他一些典型的如处理用户输入的:v-on、v-model等,具体参见官方教程

2.3 用组件构建

用组件构建.png
组件系统在Vue里的重要性不言而喻,和他搭配紧密的webpack最核心的概念也是模块化,因此这部分内容肯定不是几句话就能讲清楚的,需要查阅大量的资料,专门用些专题来总结一下才行。

在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例,然后在另一个组件模板中写入它:

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

<ul>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ul>

3.Vue实例

Vue实例.png

3.1实例生命周期

现在并不能理解,只是知道可能有哪几个阶段,但每个阶段在什么时候出现,什么时候使用完全没有概念,这个需要在以后的编程过程中进行积累,先把文档上的生命周期图截下来吧,多看几遍有个印象。
实例生命周期1.png

实例生命周期2.png

4.模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

5.计算属性

计算属性也是Vue中非常重要的一个概念,这个概念比较新文档上的例子较多,注意它和Methods以及Watched Property等的区别:计算属性

6.事件处理器

通过v-on或简写为@来实现,具体参考:事件处理器

为什么要在HTML中监听事件?

为什么在HTML中监听事件.png
Vue的单文件组件我也有相似的问题,违背了SOC传统理念,这个后面多看看文章理解下。

7.组件

这一部分是Vue的关键,内容相当多,必需得多看几次官方文档:组件

第一次看的心得

第一遍两三个小时看下来,只看了基础部分,也已经晕了,很多地方并没有弄懂,而且只是看了一遍,并没有在实际的项目中去运用,所以真要开始写还基本写不出啥。
基础.png
想当于这一次只是把基础的内容过了一遍,知道了大概有哪些东西,而那些具体的部分都需要专门去深入研究,比如组件部分感觉就得看个一两天或许能掌握了大部分。而且还是不能只是看,得动手写,不过这样很多个知识点较为分散的看文档,也很难在项目中练习,只能说先有个印象,以后在项目中真正遇到时再根据文档写一遍,只有这样才能说是真正掌握了。后面进阶的看了一下有些什么深入响应式的原理等等,这个就只能慢慢来了。
Vue虽然轻巧,但它的知识也是非常多的。所谓的轻巧,也是因为Vue内部做了非常多的工作,让我们在其上能够轻巧的编程,不过我的要求肯定不止于此,不仅要在知道怎么做,还要知道为什么要这么做,这样才能真正把一个框架学懂。
说得再多都是空话,继续慢慢看吧。。。