原文:intro-to-vue-1-rendering-directives-events

译者:nzbin

如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”。每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅。

以上是我对 Vue 的介绍。在我第一次学习 Vue 的时候,我就想要这样的文章。如果你倾向于无党派的方法,请查阅 Vue 简单易懂的 用户指南.

系列文章:

  1. 渲染, 指令, 事件 (你在这!)
  2. 组件, Props, Slots
  3. Vue-cli
  4. Vuex
  5. 动画

我喜欢 Vue 的一点是它吸取了其它框架的优秀之处,并有条不紊的将它们组合在一起。 比如:

  • 具有响应式组件化的虚拟 DOM 只提供视图层, props 和 类 Redux 状态管理与 React 类似。
  • 条件渲染和服务与 Angular 类似。
  • 受到 Polymer 简洁及性能方面的启发,Vue 提供了类似的模式,比如 HTML, 样式以及 JavaScript 组合在一起。

Vue 相比其它框架的优势有: 简洁,提供更多语义化的 API , 比 React 的表现稍好,不像 Polymer 那样使用 polyfill,相比 Angular 有独立的视图。

我还能举一些例子,但是你最好读一下这篇综合的、社区推动的文章对比其它框架 。这篇文章值得一读,但是如果你想先看代码,你也可以先跳过,以后再读。

开始吧!

还是从 "Hello, world!" 的例子开始。运行如下示例:

<div id="app">
{{ text }} Nice to meet Vue.
</div>
new Vue({
el: '#app',
data: {
text: 'Hello World!'
}
});

See the Pen Vue Hello World by Sarah Drasner (@sdras) on CodePen.

如果你熟悉 React,你会发现两者有很多相同之处。通过 mustache 模板以及使用一个变量,可以避免在内容中使用 JavaScript,但是不同的一点是我们直接书写 HTML 而不是 JSX 。虽然 JSX 易于使用,但是我无需再花时间把 class 改成 className,等等。这样启动及运行会更轻量。

现在尝试一下我喜欢的 Vue 的特性: 循环以及条件渲染。

条件渲染

假如有一组元素,类似导航条,我打算重复利用。合理的做法是放在数组中动态的更新。使用普通的 JS (需要 Babel) ,我们会这样做: 创建一个数组,然后创建一个空字符串,用来存放使用 <li> 包裹的元素,再用 <ul> 包裹所有内容,使用 innerHTML 方法添加到 DOM 中:

<div id="container"></div>
const items = [
'thingie',
'another thingie',
'lots of stuff',
'yadda yadda'
]; function listOfStuff() {
let full_list = '';
for (let i = 0; i < items.length; i++) {
full_list = full_list + `<li> ${items[i]} </li>`
}
const contain = document.querySelector('#container');
contain.innerHTML = `<ul> ${full_list} </ul>`;
} listOfStuff();

See the Pen JEEbOP by Sarah Drasner (@sdras) on CodePen.

这种方法是可行的,但是有点麻烦。现在试一试 Vue 的 v-for 循环:

<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
const app4 = new Vue({
el: '#app',
data: {
items: [
'thingie',
'another thingie',
'lots of stuff',
'yadda yadda'
]
}
});

See the Pen Conditional Rendering in Vue by Sarah Drasner (@sdras) on CodePen.

非常简洁。如果你熟悉 Angular,你对此应该不陌生。我发现这种条件渲染的方式简单明了。如果你需要更新内容,修改起来也很简单。

另外一种好的方式是使用 v-model 进行动态绑定。试试下面的例子:

<div id="app">
<h3>Type here:</h3>
<textarea v-model="message" class="message" rows="5" maxlength="72"></textarea><br>
<p class="booktext">{{ message }} </p>
</div>
new Vue({
el: '#app',
data() {
return {
message: 'This is a good place to type things.'
}
}
});

See the Pen Vue Book v-model basic by Sarah Drasner (@sdras) on CodePen.

在这个 demo 中你会注意到两点。首先,可以直接向书中打字并且动态更新文本。Vue 通过 v-model 非常方便的实现了 <textarea><p> 的数据绑定。

其次,你可能注意到我们将数据放在了函数中。在这个例子中,不这样做也可以。我们可以和之前的例子一样放在一个对象中。但是这种方式只能在 Vue 实例中使用,在程序中也是如此 (所以,在组件中不要使用这种方法)。在一个 Vue 实例中这样使用是可以的,但是我们需要在子组件中分享数据。最好一开始就把数据放在函数中,因为使用组件时我们希望每个组件都有自己的状态。

并不是只有简单的输入绑定,甚至 v-if 可以用 v-show 替换,有 v-show 的元素不是销毁或重建组件,而是始终保持在 DOM 中,切换可见性。

Vue 提供了 很多指令 , 下面是我经常使用的一些指令。很多指令都有缩写,所以我会一起列出来。在之后的教程中,我们主要使用指令缩写,所以最好先熟悉一下下面的表格。

名称 缩写 作用 举例
v-if, v-else-if, v-else none 条件渲染 <g v-if="flourish === 'A'"></g>
<g v-else-if="flourish === 'B'"></g>
<g v-else></g>
v-bind : 动态地绑定一个或多个特性,或一个组件 prop 到表达式 <div :style="{ background: color }"></div>
v-on @ 绑定事件监听器到元素 <button @click="fnName"></button>
v-model none 创建双向绑定 <textarea rows="5" v-model="message" maxlength="72"></textarea>
v-pre none 跳过原始内容的编译过程,可以提高性能 <div v-pre>{{ raw content with no methods}}</div>
v-once none 不渲染 <div class=”v-once”>Keep me from rerendering</div>
v-show none 根据状态显示或者隐藏组件/元素,但是会保存在 DOM 中不会销毁 (不同于 v-if) <child v-show=”showComponent”></child> (当 showComponent 为 true 时切换可见性)

也有非常好的事件修饰符和其他 API

加快开发的方法:

  • @mousemove.stope.stopPropogation() 相同
  • @mousemove.prevent 类似于 e.preventDefault()
  • @submit.prevent 提交时不再重新加载页面
  • @click.once 不要和 v-once 混淆,这个 click 事件只触发一次
  • v-model.lazy 不会自动填充内容,它将在事件发生时绑定

你也可以 自定义指令

我们会在稍后的例子中使用这些方法!

事件处理

数据绑定虽然很好,但是没有事件处理也无法发挥更大的用途,因此接下来就试一试! 这是我喜欢的一部分。我们将使用上面的绑定和监听器来监听 DOM 事件。

在应用程序中有几种不同的方法来创建可用的方法。比如在普通的 JS 中,你可以选择函数名,但是实例方法直观地称为 methods!

new Vue({
el: '#app',
data() {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++;
}
}
});
<div id="app">
<p><button @click="increment">+</button> {{ counter }}</p>
</div>

我们创建了一个名为 increment 的方法并且你会注意到函数自动绑定了 this ,会指向实例及组件中的 data 。我喜欢这种自动绑定,不需要通过 console.log 查看 this 的指向。 我们使用缩写 @click 绑定 click 事件。

Methods 并不是创建自定义函数的唯一方式。你也可以使用 watch 。两者的区别是 methods 适合小的、同步的计算,而 watch 对于多任务、异步或者响应数据变化时的开销大的操作是有利的。我经常在动画中使用 watch 。

让我们看看如何传递事件并且进行动态地样式绑定。如果你记得上面的表格,你可以使用 : 来代替 v-bind ,因此我们可以很简单地通过 :style 以及 传递状态,或者 :class 绑定样式 (以及其他属性)。这种绑定确实有很多用途。

在以下的例子中,我们使用 hsl(),因为 hue calculated as a circle of degrees of color ,所以每一个位置都有色值。这种方法很有用,因为任何数值都有效。因此,当我们在屏幕上移动鼠标,背景颜色将相应更新。我们使用 ES6 模板字面量

new Vue({
el: '#app',
data() {
return {
counter: 0,
x: 0
}
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
},
xCoordinate(e) {
this.x = e.clientX;
}
}
});
<div id="app" :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }" @mousemove="xCoordinate">
<p><button @click="increment">+</button> {{ counter }} <button @click="decrement">-</button></p>
<p>Pixels across: {{ x }}</p>
</div>

See the Pen Showing simple event handling by Sarah Drasner (@sdras) on CodePen.

你应该看到我们甚至不需要传递 @click 事件,Vue 将它作为方法的参数(这里显示为 e )自动传递。

此外,原生方法也可以使用,比如 event.clientX,并且很容易关联 this 实例。在元素的样式绑定中,CSS 属性需要使用驼峰命名。在这个例子中,你可以看到 Vue 的简单明了。

实际上我们甚至不需要创建一个方法,如果事件足够简单,我们也可以在组件中直接增加计数器的值:

<div id="app">
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/backpack.jpg" width="235" height="300"/>
<div class="quantity">
<button class="inc" @click="counter > 0 ? counter -= 1 : 0">-</button>
<span class="quant-text">Quantity: {{ counter }}</span>
<button class="inc" @click="counter += 1">+</button>
</div>
<button class="submit" @click="">Submit</button>
</div><!--item-->
</div>
new Vue({
el: '#app',
data() {
return {
counter: 0
}
}
});

See the Pen Backpack Shop Counter by Sarah Drasner (@sdras) on CodePen.

我们没有使用任何方法而是直接在 @click 事件中修改状态。而且我们也可以在其中添加一点逻辑判断(因为在购物网站中不会有小于零的东西)。 一旦这种逻辑过于复杂,即使可读性下降,最好还是写到一个方法中。这是个很好的选择。

Vue.js 系列教程 ①的更多相关文章

  1. Vue.js 系列教程 ②

    这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...

  2. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  3. Vue.js 系列教程 4:Vuex

    这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...

  4. Vue.js 系列教程 5:动画

    原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地 ...

  5. Vue.js 系列教程 2:组件,Props,Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  6. Vue.js 系列教程 3:Vue

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  7. Vue.js 系列教程 1:渲染,指令,事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  8. vue.js 系列教程

    Vuejs——(1)入门(单向绑定.双向绑定.列表渲染.响应函数) Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器 Vuejs——(3)计算属性,样式和类绑定 Vuejs——(4)v ...

  9. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

随机推荐

  1. keil c51的内部RAM(idata)动态内存管理程序(转)

    源:keil c51的内部RAM(idata)动态内存管理程序 程序比较简单,但感觉比较有意思,个人认为有一定应用价值,希望大家有更好的思路和方法,互相促进. 程序的基本思路是:在CPU堆栈指针SP以 ...

  2. ubuntu 开启 ftp 服务 | mingming-killer

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  3. sublime C++ build system配置体验

    近期准备实习,于是终于步入了sublime的阵营,sublime确实性感. 在配置win7下C++编译运行集成环境的时候遇到点问题,于是接触了一下JSON格式,最后终于自己搞定了.. 参考文档:htt ...

  4. Laravel Cache 使用

    在项目中使用 laravel 的 cache 时,使用下面形式方法: $value = Cache::remember('users', $minutes, function() { return D ...

  5. (中等) POJ 1703 Find them, Catch them,带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  6. 四、Hbase

    一.什么情况下使用Hbase 例子: 这里Order By无时不刻的处理,我们要看到刚才的足迹,不能使用缓存技巧. 根据时间戳来查询,显然很快,应为Hbase就是以时间戳来存的. 将最近的数据放在内存 ...

  7. 贪心法基础题目 HDU

    贪心算法的基本步骤: 1.从问题的某个初始解出发.2.采用循环语句,当可以向求解目标前进一步时,就根据局部最优策略,得到一个部分解,缩小问题的范围或规模.3.将所有部分解综合起来,得到问题的最终解. ...

  8. HUST 1606 Naive

    预处理一下,然后o(1)询问. #include<cstdio> #include<cstring> #include<cmath> #include<str ...

  9. The account '...' is no team with ID '...'

    iOS升到9.2之后,有一个大坑,原先真机调试的开发者账号(未付费),连不了Xcode了,会弹出一个提示框提示你, The account '...' is no team with ID '...' ...

  10. STM32F103外部中断编程

    STM32F103外部中断编程   中断,顾名思义就是停下手头的活,去干另外一件急活,干完急活然后回来继续干手头的活. 单片机和人一样,有时候也有更急的程序需要执行,执行完之后再回来执行之前正在执行的 ...