开头
如果让我用一句话总结我对 Vue 的理解，我可能会这样说“它真的非常好理解”或者“它就像一个工具，我可以随心所欲的使用它，而又不会受制于它”。在我学习 Vue 的过程中，我非常的开心，因为它很有意思，很优雅。Vue.js简介（1）
这篇文章是我个人对 Vue 的了解。当我第一次学习 Vue 的时候，我希望能有一篇这样的文章帮助指导我学习。如果你想要通过权威的方式学习 Vue 的话，那么你可以参考 Vue 官网的指南，非常的详细，简单明了。
文章系列Part 1: Rendering, Directives, and Events
Part 2: Components, Props, and Slots (待翻译)
Part 3: Vue-cli (待翻译)
Part 4: Vuex (待翻译)
Part 5: Animations (待翻译)
【『翻译』Vue.js简介（Rendering|『翻译』Vue.js简介：Rendering, Directives, and Events）】Vue 吸取并融合了其它框架的成功之处，并且它的代码非常简洁，这是我非常喜欢它的一个原因。比如下面这些特点：
- 虚拟的 DOM 和灵活的组件，提供了一种 View 层优先，props ，并且类似于 React 的 Redux 式的存储方式。
- 类似于 Angular 的条件渲染和数据绑定方式。
- 在简单性和性能方面，受到 Polymer 的启发，Vue 采用了相同的 HTML 代码，styles 样式和 JavaScript 代码书写方式。
接下来我们继续，或许你亲自去阅读他们社区的与其他框架的比较会更好。它很值得一读，如果你更愿意去书写代码的话，那么你可以跳过它。
让我们开始吧！ 让我们从 "Hello,world!" 开始。按照下面这样做你就可以开始了：
{{ text }} Nice to meet Vue.new Vue({
el: '#app',
data: {
text: 'Hello World!'
}
});
DEMO
如果你对 React 很了解的话，这种写法你也一定觉得很熟悉。通过 JavaScript 创建变量，用双大括号模板引用变量，不同的使 Vue 直接采用 Html，而 React 采用JSX语法。JSX 语法很容易上手，但是
Vue 不用把
class 转化为 className 等简洁的写法，让我真的很喜欢它。你可能也注意到Vue非常的轻量，运行起来也很迅速。接下来我们一起尝试下Vue的一些令人喜爱的特性：循环和条件渲染。
条件渲染 我创建了一个items对象，类似导航，以便我知道我可以重用它。把它定义为一个数组可能更有意义，方便以后动态地更改。如果按照原生的 JS 写法可能会是这样的：创建数组，然后创建空的字符串对象，再把数组的每个条目嵌套上
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 + ` ${items[i]} `
}
const contain = document.querySelector('#container');
contain.innerHTML = ` ${full_list}
`;
}listOfStuff();
DEMO
没问题，但是有点凌乱。现在让我们用
Vue 的循环
v-for实现同样的效果：
-
{{ item }}
const app4 = new Vue({
el: '#app',
data: {
items: [
'thingie',
'another thingie',
'lots of stuff',
'yadda yadda'
]
}
});
DEMO
非常的简单明了。如果你了解 Angular，这种写法对你来说肯定很熟悉。这样的条件渲染方式非常的简单，清晰。如果你还在用传统的原生 JS 而且也在寻求改变，那么你可以很容易上手 Vue。
另外一个非常好用的指令是
v-model，它可以动态绑定数据。像这样：
Type here:
{{ message }}
new Vue({
el: '#app',
data() {
return {
message: 'This is a good place to type things.'
}
}
});
DEMO
通过上面的例子，你可能注意到两点。首先，页面没有进行任何 DOM 操作，就能够动态的更新显示的文本内容。Vue 能够通过
v-model 指令在