Vue2.5 零基础开发去哪儿网实战(二) - Vue 起步

JavaEdge

发布于 2019-03-04 14:53:15

1.2K0

发布于 2019-03-04 14:53:15

文章被收录于专栏：JavaEdge

本章将快速讲解部分 Vue 基础语法，通过 TodoList 功能的编写，在熟悉基础语法的基础上，扩展解析 MVVM 模式及前端组件化的概念及优势。

1 最简单的案例

下载安装

原生实现打印

1.1 创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

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

当创建一个 Vue 实例时，你可以传入一个选项对象. 本教程主要描述的就是如何使用这些选项来创建你想要的行为.

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成.

现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外).

回到案例演示,若使用Vue.js 该如何实现打印呢?

无问题,正常打印

1.2 数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值.

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

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

// 获得这个实例上的属性
// 返回源数据中对应的字段
app.a == data.a // => true

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

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

当这些数据改变时，视图会进行重渲染. 值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性比如：

app.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值. 比如：

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

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

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

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

非接管区域内内容,并不感冒它.

而会原封不动输出.

最古老的直接操作DOM的定时操作.

Vue.js 版本代码,不需要再管 dom 操作,而是将注意力都放在对于数据的管理; 数据是什么,页面也就展示什么.

除了数据属性，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` 改变后调用
})

3 开发TodoList（v-model、v-for、v-on）

3.1 列表渲染

用 `v-for` 把一个数组对应为一组元素

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

Foo
Bar

在 v-for 块中，我们拥有对父作用域属性的完全访问权限. v-for 还支持一个可选的第二个参数为当前项的索引.

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

Parent - 0 - Foo
Parent - 1 - Bar

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

一个对象的 `v-for`

你也可以用 v-for 通过一个对象的属性来迭代。

结果：

John
Doe
30

你也可以提供第二个的参数为键名：

firstName: John

lastName: Doe

age: 30

第三个参数为索引：

0. firstName: John

1. lastName: Doe

2. age: 30

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

`key`

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

不要使用对象或数组之类的非原始类型值作为 v-for 的 key。用字符串或数类型的值取而代之。

最初文件

最初效果

Vue版实现同效

下面开始逐步实现 todolist功能

2-4 MVVM模式试看 2-5 前端组件化 2-6 使用组件改造TodoList 2-7 简单的组件间传值 2-8 章节小结

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.02.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度