学习Vue.js入门，简单了解一下

Vue开发入门

1.1 Vue框架的优点

• Vue是 渐进式框架 , 出现在JavaScript之后，但因其易于使用、灵活、速度快，对JavaScript的主流地位有着很大的威胁。

• Vue 遵循 渐进增量 的设计原则，它的核心库专注于用户界面 ，使得现有项目可以方便得集成使用Vue。

• Vue 既可以构建出很小的原型， 也可以构建出复杂的大型Web应用。

• Vue 对于初学者十分友好，容易上手。

• Vue 还吸取了其他类似框架(如React、Angular和Polymer) 的精华。

  总之，Vue框架就是吸收了其他框架的一些优点还有着自己的优点的框架，值得我们学一学。

1.2 第一个Vue应用

code：

这是demo01，一个简单的html文件，里面主要包含了<div> 标签和一些<script> 标签，后续我们会针对div 标签研究Vue的一些功能。

result：

运行一下控制台的显示出来了这段话，还显示了我自己使用的Vue版本。

1.3 创建一个Vue实例

Code:

这是demo02，一个js文件，里面运用Vue创建了一个实例

Result:

对自己的浏览器安装了一个插件 Vue.js devtools ,之后在浏览器打开后，检查就有Vue选项，可以看到一棵默认名为Root 的Vue实例树，点击它可以看到详细的属性。

Code:

可以使用name属性来更改Vue实例的名字

Result:

1.4 借助模板实现DOM的动态性

先来看一下，模板的第一个功能：文本插值。先将<div> 做出一些改变

再看看<p> 标签中 的 message 这个变量在js代码中的应用，

所以，我们运行一下，看看运行结果

可以看到，message 的值填补到了<div> 标签中的<p> 标签位置，所以，我们可以推断一下，Vue为开发者实现了数据与DOM的绑定，如果我们在console控制台改变一下message的值，会发生什么呢？

输出上面一行语句之后，浏览器界面立刻发生了变化，而且是实时变化！

所以，我们可以下结论了，Vue背后运用了一种数据绑定 的技术，这样可以使得数据改变时，开发者不用做任何事情，Vue会帮助开发者自动更新数据。是不是很智能，比起自己慢慢更新数据，Vue简直太人性化了。

当然实时更新数据仅仅是Vue框架的一个优点而已，它还具有很强的交互性，下面我们来看看Vue框架是如何交互的。我们想要用户输入内容然后显示到页面上，要达到这样的效果，可以在模板中使用指令。

Vue中的所有指令都是带 v- 前缀的，下面我们会用到v-model 指令。

Code：

在模板里面添加一个<input> 元素，并将<input> 元素的值与 message 数据属性进行绑定。

Result：

当我们删除文本框的内容，重新输入时，会发现文本框内的数据会跟随改变，并呈现在文本框上方。

综上所述，我们可以知道，Vue可以借助模板实现DOM的动态性，而且能够通过v-model指令将input元素绑定到数据属性，给页面添加交互。