vue从入门到进阶:简介(一)

前言

就此了如此老之vue了,但是一直从未时间写单系列文章,现在压缩得时间总结下vue的知识点。

首先,Vue 不支持 IE8跟以下版本,因为 Vue 使用了 IE8 无法模拟的
ECMAScript 5 特性。但它支持有兼容 ECMAScript 5 的浏览器。
脚总结的始末是以2.x之版本。

安装

直接用 <script> 引入

直接下载并用 <script>
标签引入,Vue 会被注册也一个全局变量。

于付出条件下毫不以压缩版本,不然你就夺了富有大错误系的警戒!

CDN

推荐:https://cdn.jsdelivr.net/npm/vue,会保持与 npm
发布之摩登的版相同。可以在 https://cdn.jsdelivr.net/npm/vue/
浏览npm
包资源。
也可于unpkg
cdnjs
获取 (cdnjs 的版更新可能有些滞后)。

NPM

在用 Vue
构建大型应用时推荐下 NPM
安装。NPM 能很好地同如 webpack 或
Browserify
模块打包器配合下。同时 Vue 也供配套工具来支付单文件组件。

# 最新稳定版
$ npm install vue

指令行工具 (CLI)

飞搭建大型单页应用,只需要几分钟即可创建并启动一个牵动热重载、保存时静态检查以及可用于生产环境的构建配置的种:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

支出版本

GitHub 仓库的
/dist 文件夹只有当新本子发布时才会付给。如果想使以 GitHub 上
Vue 最新的源码,你要协调构建!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

率先只程序Hello Vue

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

今数量和 DOM
已经让立了涉嫌,所有东西还是响应式的。我们设怎么确认为?打开你的浏览器的
JavaScript 控制台 (就当此页面打开),并修改 app.message 的值

vue核心最中心的功能

声明式渲染

于有一个DOM元素绑定属性,如下

<div id="app">

    鼠标悬停几秒钟查看此处动态绑定的提示信息!

</div>

JS代码:

var app = new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

里头点用到的v-bind
特性被称之为指令

法和巡回

支配切换一个要素是否出示也一定简单:

<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-for一声令下可以绑定数组的数量来渲染一个品种列表:

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

当决定台里,输入 app.todos.push({ text: '新项目' }),你会发觉列表最后补充加了一个初类型。

拍卖用户输入

Vue 提供了 v-model
指令,它能够自在实现表单输入和用状态之间的双向绑定。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

组件化应用构建

重在:需要知道有的 Vue 组件都是 Vue 实例,并且接受平等之挑三拣四对象
(一些彻底实例特有的选项项除外)。

零件系统是 Vue
的其它一个重点概念,因为其是同等种浮泛,允许我们利用小型、独立和一般只是复用的组件构建大型应用。仔细考虑,几乎任意档次的下界面都得以抽象为一个零部件树:

于 Vue 里,一个组件本质上是一个怀有预定义选项的一个 Vue 实例。在 Vue
中注册组件很粗略:

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

今日而可以据此其构建另一个组件模板:

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但是这么见面吧每个待处件渲染同样的公文,这看起连无炫酷。我们当能从父作用域将数据传到子组件才对。让咱们来窜一下零部件的概念,使的会承受一个prop

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop",类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现行,我们得使用 v-bind 指令以需处件传到循环输出的每个组件中:

<div id="app">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量,即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”,稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop",类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

其一事例子单元通过prop接口及大单元进行了帅的解耦。我们今天得以更进一步改善
<todo-item>零件,提供更复杂的沙盘与逻辑,而未会见潜移默化及父亲单元。
在一个巨型应用被,有必不可少将不折不扣应用程序划分为组件,以要出还易保管

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

零件和由定义元素的关联

君恐怕早已注意到 Vue 组件非常类似于从定义元素——它是 Web
组件规范之一致片段,这是盖 Vue 的零部件语法有参考了该标准。例如 Vue
组件实现了 Slot API 与 is 特性。但是,还是来几个重大区别:

  • Web
    组件规范还是处在草案等,并且不被所有浏览器原生实现。相比之下,Vue
    组件不欲其他 polyfill,并且在具备支持的浏览器 (IE9 及重新强版本)
    之下表现同样。必要经常,Vue 组件为得以打包为原生自定义元素中。
  • Vue
    组件提供了纯自定义元素所不有的片重大功能,最突出的凡过组件数据流、自定义事件通信以及构建工具并。

剖析一个完全的vue实例

数码以及方法

当一个 Vue 实例被创造时,它向 Vue 的响应式系统受加入了该 data
对象吃可知找到的保有的性。当这些性之价发生反时,视图将会见生出“响应”,即匹配更新也新的价值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 它们引用相同的对象!
vm.a === data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

最主要:当这些数量变动时,视图会进行重复渲染。值得注意的是只有当实例被创造时
style=”background-color: #f9f2f4;”>data丁是的性能才是响应式的。也就是说要您加加一个新的习性,比如: style=”color: #c7254e; background-color: #f9f2f4;”>vm.b = 'hi'

那么对 b的变更将非会见硌任何视图的创新。如果您懂得您晤面在晚些时候需要一个性,但是同样开始它吗空或无在,那么您唯有得安装有些初始值。比如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

咱俩呢足以利用ES6正式中提供的一个法Object.freeze(),其方式作用就是是冻对象,对目标被的特性进行修改无效。也就是凡是会拦修改现有的性,也意味着响应系统无法再追踪变化

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data () {
    return {
      obj
    }
  }
})

<div id="app">
  <p>{{ obj.foo }}</p>
  <!-- 这里的 `obj.foo` 不会更新! -->
  <button @click="obj.foo = 'baz'">Change it</button>
</div>

除去数据性,Vue 实例还暴露了部分灵光的实例属性和办法。它们都发前缀
$,以便同用户定义之习性区分开来。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

实例生命周期钩子

每个 Vue
实例在让创造时都要透过同文山会海的初始化过程——例如,需要安装数据监听、编译模板、将实例挂载到
DOM 并当数量变化时更新 DOM
等。同时于这个历程遭到吗会见运作有名叫生命周期钩子的函数,这吃了用户以不同等级添加自己的代码的机会。

比如 created钩子可以为此来在一个实例被创造之后执行代码:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有部分旁的钩子,在实例生命周期的两样等级于调用,如 mountedupdated
destroyed。生命周期钩子的
this
上下文对调用它的Vue 实例。

决不当增选属性或回调上利用箭头函数,比如 style=”color: #c7254e; background-color: #f9f2f4;”>created: () => console.log(this.a)
style=”color: #c7254e; background-color: #f9f2f4;”>vm.$watch('a', newValue => this.myMethod())。因为箭头函数是与父级上下文绑定在一块的, style=”color: #c7254e; background-color: #f9f2f4;”>this
不见面是要你所预期的 style=”color: #c7254e; background-color: #f9f2f4;”>Vue
实例,经常导致 style=”color: #c7254e; background-color: #f9f2f4;”>
Uncaught TypeError: Cannot read property of undefined 或 style=”color: #c7254e; background-color: #f9f2f4;”>
Uncaught TypeError: this.myMethod is not a function
之类的左。

生命周期图示

生图展示了实例的生命周期。你无需及时为明白有的物,不过随着你的不停学习和下,它的参考价值会越加高。

注:特别发因此