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

CDN

推荐:https://cdn.jsdelivr.net/npm/vue,会维持和 npm
发表的流行的本子相同。可以在 https://cdn.jsdelivr.net/npm/vue/
浏览npm
包资源。
也得以从unpkg
cdnjs
获取 (cdnjs 的本子更新可能略滞后)。

vue要旨最大旨的作用

组件化应用营造

要害:须要领悟所有的 Vue 组件都是 Vue 实例,并且接受平等的取舍对象
(一些根实例特有的选项除外)。

零件系统是 Vue
的另一个最首要概念,因为它是一种浮泛,允许大家使用小型、独立和常见可复用的零部件营造大型应用。仔细思考,差不离任意档次的使用界面都可以抽象为一个零件树:

ECMAScript 1

在 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>

支出版本

GitHub 仓库的
/dist 文件夹唯有在新本子发表时才会提交。若是想要使用 GitHub 上
Vue 最新的源码,你需求团结创设!

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

处理用户输入

Vue 提供了 v-model
指令,它能轻轻松松完结表单输入和动用状态之间的双向绑定。

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

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

首先个程序Hello Vue

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

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

当今数量和 DOM
已经被确立了涉及,所有东西都是响应式的。大家要怎么确认呢?打开你的浏览器的
JavaScript 控制台 (就在那些页面打开),并修改 app.message 的值

生命周期图示

下图显示了实例的生命周期。你不须求立刻弄了然所有的事物,但是随着你的持续学习和选用,它的参考价值会愈来愈高。

注:尤其有用

ECMAScript 2

直接用 <script> 引入

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

在付出环境下毫不选择压缩版本,不然你就错过了有着大规模错误相关的告诫!

表明式渲染

给某一个DOM元素绑定属性,如下

<div id="app">

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

</div>

JS代码:

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

其间地点用到的v-bind
特性被称呼指令

多少与艺术

当一个 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` 改变后调用
})

NPM

在用 Vue
营造大型应用时推荐应用 NPMECMAScript,
安装。NPM 能很好地和诸如 webpack 或
Browserify
模块打包器协作使用。同时 Vue 也提供配套工具来支付单文件组件。

# 最新稳定版
$ npm install vue

实例生命周期钩子

各类 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
之类的失实。

前言

用了这么久的vue了,然而一向没有时间写个密密麻麻作品,现在抽一定时间统计下vue的知识点。

首先,Vue 不支持 IE8及以下版本,因为 Vue 使用了 IE8 无法模拟的
ECMAScript 5 特性。但它帮助所有包容 ECMAScript 5 的浏览器。
下边总括的情节是在2.x的版本。

一声令下行工具 (CLI)

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

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

组件与自定义元素的涉嫌

您恐怕早就注意到 Vue 组件相当相近于自定义元素——它是 Web
组件规范的一局地,那是因为 Vue 的零件语法部分参考了该专业。例如 Vue
组件完毕了 Slot API 与 is 特性。不过,仍然有多少个根本不同:

  • Web
    组件规范如故处在草案阶段,并且未被所有浏览器原生完结。相比较之下,Vue
    组件不须要此外 polyfill,并且在具备帮衬的浏览器 (IE9 及更高版本)
    之下表现同样。须要时,Vue 组件也得以打包于原生自定义元素之内。
  • Vue
    组件提供了纯自定义元素所不有所的一对要害成效,最优良的是跨组件数据流、自定义事件通讯以及打造工具集成。

规则与循环

操纵切换一个因素是还是不是出示也格外简单:

<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实例

安装