本博客面向有一定HTML,JS基础，但对VUE没什么了解的初学者
参考教程：VUE官方教程 ，菜鸟教程：VUE
VUE.js简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
VUE的官方文档无论是对初学者还是专业人员都很有帮助！
点此进入VUE官网
VUE 的安装
- CDN引入方式
在页面文件直接插入以下代码即可
<script>https://unpkg.com/vue/dist/vue.js</script>
- 下载VUE.js到本地再引入
点击链接下载后，在页面文件中用引入 点此下载vue.min.js
NPM方式安装VUE-CLI(脚手架）
请先确保您安装了node.js 3.0及以上版本
VUE脚手架适合较大项目开发，如果只是做VUE的小案例可以不用脚手架，但也推荐您安装VUE-CLI
方法1:在命令行中输入
npm install -g vue-cli
方法2：使用国内镜像安装，命令行输入
npm install -g cnpm -registry=https://registry.npm.taobao.org
回车后，
cnpm install -g vue-cli
VUE的声明式渲染
- HTML 部分
<div id="app">
{{ message }}
</div>
- JS部分
var app = new Vue({ //创建VUE实例
el: '#app', //将实例挂载到#app上
data: { //定义数据
message: 'Hello Vue!'
}
})
其中 {{ message }}称作mustache语法，表示对应VUE实例中的message值
所以页面上显示：Hello Vue!
条件与循环
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
由v-if指令控制元素是否显示，seen为true时显示，为false时不显示
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
语法v-for表示循环显示，'site in sites'中的site可以理解为形参，代表数组中的每一项，sites对应data中的sites数组
那么要循环显示的元素则为site.name 。最终显示效果如下：
-
Runoob
-
Google
-
Taobao