Vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue安装
1.直接script引入
直接下载并用script标签引入,vue会注册为一个全局变量。如果写代码的话,建议下载开发版本,在开发环境下不要使用压缩版本,不然就会失去了所有常见错误的相关警告
npm i vue
2.在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
命令行工具
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本
##解析Vue文件方法
下载vue-loader,.vue的文件才会解析
Vue的使用
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
输出:
Hello Vue!
el后边是要绑定的标签ID
data是数据
条件指令
v-if
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
现在你看到我了
1.v-if指令 值为真则显示,值未假,则不显示,v-if是惰性的,如果初始条件为假,则什么也不做
2.v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销
3.如果在运行时条件很少改变,使用 v-if 较好,但v-if有更高的切换消耗,v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
事件监听器
v-on
简写:@
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
这是一个实现点击功能的代码,点击按钮会将页面上显示的Hello Vue.js!显示为!sj.euV olleH
v-on:click可以简写为@click,后面的值是函数名,函数一定要写在methods里面
数据的双向绑定
v-model
简写方式(:)
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
结果是你在输入框输入什么,然后在p标签输出什么