简介
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用【来源于百度百科】。VUE官网
个人理解就是VUE 简单易用，完全靠数据驱动的一个轻量级前端框架。结合它的脚手架VUE-CLI及Webpack 可以快速搭建一个可以快速搭建大型单页应用Demo，不利于SEO。不过可以借助Nuxt，快速实现服务端渲染，解决SEO的问题。【个人观点，欢迎留言指正】
安装
- 1、可以简单的采用引入Vue.js方式使用，但不建议这样做。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 2、采用npm方式安装（推荐用法，本教程主要基于此方式）
# 升级或安装 cnpm
npm install cnpm -g
# 安装最新稳定版 VUE
$ cnpm install vue
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 基于 webpack 模板创建一个的新项目
$ vue init webpack vue-demo
#会提示你进行一些配置，可以直接默认回车
#初始化完成进入该项目下，启动项目
$ cd vue-demo
$ cnpm install
$ cnpm run dev
#会有输出 Project is running at http://localhost:8080/，你可通过这个地址访问你的项目了。
运行结果如图：
所有页面是采用.vue文件编写，文件一般分为三部分：模板，js，样式。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
常用模板语法
1、文本数据绑定
使用 {{…}}（双大括号）绑定文本数据。
<div id="app">
<p>{{ message }}</p>
</div>
2、HTML文本绑定
使用 v-html 指令用于输出 html 代码。
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<p>HTML数据绑定</p>'
}
})
</script>
3、HTML标签属性绑定
使用 v-bind 指令给HTML标签绑定属性值。
<div id="app">
<div v-bind:class="{'iclass': isAdd}">
v-bind 指令给HTML标签绑定属性
</div>
div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isDisabled">Button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
iclass: ' ',
dynamicId:'',
isDisabled:true
}
})
</script>
4、 JavaScript 表达式
数据绑定，Vue支持 JavaScript 表达式，但是只能单个表达式。
<!-- 有效表达式 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<!-- 无效（错误）表达式 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}
5、 常用的指令
# v-if 条件成立则会将该元素加入到DOM中渲染，对应的有v-else、v-else-if
<p v-if="condition">v-if成立</p>
# v-show 不管初始条件是什么，元素总是会被渲染，简单地基于 CSS 进行切换是否显示。
<p v-show="condition">v-show成立</p>
#一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
# v-bind:[attributeName] 动态绑定属性值
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
#v-on:[eventName] 动态绑定事件
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
6、双向绑定 v-model
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
7、过滤器
当你需要对数据做些格式化操作时候，vue可以允许你自定义 过滤器。格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 实例 -->
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
8、迭代器v-for
用 v-for 指令可用于遍历数组，对象及数字甚至是组建。
<!-- 遍历数组示例 -->
<!-- 遍历数组元素-->
<ul id="v-for-arr">
<li v-for="item in items">
{{ item.name}}
</li>
</ul>
<!-- 遍历数组元素并获取下标-->
<ul id="v-for-arr">
<li v-for="(item, index) in items">
{{ index}} - {{ item.name}}
</li>
</ul>
var vForArr = new Vue({
el: '#v-for-arr',
data: {
items: [
{ name:vue' },
{ name: 'java' }
]
}
})
<!-- 遍历对象的属性值-->
<ul id="v-for-object" >
<li v-for="value in object">
{{ value }}
</li>
</ul>
<!-- 遍历对象的属性名和值-->
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
<!-- 遍历对象的属性名和值及下标-->
<div v-for="(value, name, index) in object">
{{ index }} - {{ name }}： {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
id: '1',
name: 'forObject'
}
}
})
<!-- 遍历取整数-->
<div>
<span v-for="n in 10">{{ n }} </span>
</div>