02、快速安装和快速入门Vue
2019-08-19 本文已影响8人
小白摘葡萄
1、简易安装
要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。
<head>
<meta charset="UTF-8">
<title>Vue 快速入门</title>
<script src="Vue.js"></script>
</head>
可以使用本地的文件，也可以使用CDN的方式。
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、数据驱动
引入之后，我们就可以把它用起来。听说它最牛逼的地方是数据驱动视图，解放DOM操作，让你不再做又复杂又耗性能的DOM操作。那么，我们就看看它是怎么玩的！
假设，我们现在要把js对象中的某个变量的值渲染在页面上，传统的做法，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。
现在，在Vue.js中，你需要这样做：
<div id="app">
<p>欢迎来到{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue.js'
}
})
</script>
我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app')，表明这个实例是关联指定的DOM节点。
在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的message属性的值“Vue.js”就会被渲染到页面中，替换{{ message}} 显示效果为：“Vue.js”。
在此过程中，我们并没有写过操作DOM节点的代码，而且，上一节我们讲过，MVVM模式中的viewModel充当着监控者的角色，假如它监控到model数据发生了变化，便会通知view视图进行更新，这个过程并不需要你去参与。
这就是Vue.js的数据驱动视图。
3、双向绑定
更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。
在Vue中我们使用v-model指令就可以轻松实现。
<div id="app">
<inptu type="text" v-model="number">
<p>数字：{{ number }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
number: ''
}
})
</script>
效果如下图所示：
效果图.png
案例中，我们不需要写代码去监听input控件的内容变化，用户输入的内容，会实时地更新vm实例中的data属性number的值，一旦number更新了，视图也会跟着更新了。因为这一切，都由Vue.js帮你完成了。
