简介
Vue.js (读音 /vjuː/，类似于view) 是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
使用
1.直接<srcipt>引用
直接下载js文件并用<script>标签引用，Vue会被注册一个全局变量
var vm = new Vue({
// 选项
})
2.CDN
推荐：https://cdn.jsdelivr.net/npm/vue，会保持和 npm 发布的最新的版本一致。
3.NPM
在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
$ npm install vue
命令行工具
通过命令行工具，可以快速搭建大型单页易用。
npm install --g vue-cli
vue init webpack my-project //创建基于webpack模板新项目
cd my-project
npm install
npm run dev
文件结构如下
WechatIMG252.jpeg
指令
- v-bind
动态绑定DOM元素属性，元素的属性由vm实例中的data属性提供。例如
<img v-bind:src='url'>
new Vue({
data: {
url: 'http://xxx.jpg'
}
})
v-bind 可以简写 为： 即 <img :src='url'>
- v-model
实现双向数据绑定
<label>name:</label><input type="text" v-model="name" />
//js
export default {
name: 'About',
data: function() {
return {
name: '1231'
};
},
}
- v-if/v-else/v-show
根据条件展示对应的模板内容。v-if 和 v-show 的区别在于，v-if在false的情况下不进行编译，v-show 会在编译后将元素隐藏掉。v-if的切换消耗比v-show高。
<input type="button" v-if="show" value="yes" />
<input type="button" v-else value="no" />
//js
export default {
name: 'About',
data: function() {
return {
show: true
}
},
}
- v-for
用于数据循环
<el-table-column v-for="column in columns" v-bind:key = "column.prop" :prop=
"column.prop" :label="column.label">
</el-table-column>
- v-on
用于事件绑定
<button v-on:click='click'></button>
export default {
name: 'About',
data: function() {
return {
show: true
},
method :{
click: () => {...}
}
}
可以简写为
<button @click='click'></button>
- v-text
参数为string 更新元素的textContent ,{{}}编译后一致。可以避免闪烁。
<span v-text="msg"> </span>
- v-html
更新元素的innerHTML 和v-text类似
<div v-HTML='htmlStr'></div>
计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
