vue就是一个js库,并且无依赖别的js库,直接引入一个js文件就可以使用,跟jquery差不多。vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。
版本选择?
现在vue分为vue1和vue2这两个大版本,然而现在有一些基于vue的框架还不兼容vue2,不过自己折腾可以随意选择一个的,反正文档还算挺详细。
为什么我们要使用vue?
其实跟jquery差不多,都是简化我们的开发。例如我们可以用vue实现像后端模板渲染的功能,可以更加便捷的绑定dom事件,可以把一些页面的组件打包重复使用。下面我们看看如何简单粗暴的使用vue。
安装
使用npm安装:
npm install vue
如何优雅的使用vue当成模板引擎
后端的同学想必挺清楚模板引擎是什么玩意了,而对于刚入门前端的同学来说,往往渲染页面会使用字符串拼接(非常不推荐)或者dom的clone来动态生成html,但是这两种方法写法都很麻烦,而vue却能十分优雅的实现模板渲染这种功能。
我们拿官方的例子来看看,如下图:
#hello world
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
显示效果:
#双向绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
显示效果:
我们可以看到,el里面跟jquery的元素选择标识符是一样的,这个就是选择要渲染的区域。data是一个字典,这个字典就是要填充的数据。而上面的html两个花括号里面一个变量名这种方式就是输出变量值。
也许你会说,循环输出咋办,别担心,vue都提供了。看:
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
显示效果:
方法与事件处理器
其实就是用特定语法代替了直接在html标签写onclick='xxx'这些,也不用jquery写$("#xxx").on("click", function(){});,反正用法很简单,老规矩,上官方例子:
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// 方法内 `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'
效果图:
组件
首先,我们看看官方例子:
<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
渲染为:
<div id="example">
<div>A custom component!</div>
</div>
显示效果:
一眼看过去,相当于宏定义嘛,我们声明一种标签是代表一串特定的html字符串。(我们先这样子将就的用着,其实这组件背后还涉及值的传递,函数绑定这些,但是我们入门,先不管)
单文件的方式使用路由
让我们思考一下,为什么要有路由这东西呢?我们一向的做法是一个页面一个URL,页面切换的时候跳到新的地址。后来,由于请求新页面太耗费流量,工程师们想到使用ajax拉取数据,局部刷新页面,这种方法大大节省了流量(当然这种做法对seo不友好,这里就不展开说了,想了解更多可以持续关注我)。vue的路由其实也是为了页面切换不用重新整个页面重新加载,我们来看看例子:
<div id="app">
<component :is="currentView"></component>
</div>
Vue.component('home', { /* ... */ })
Vue.component('page1', { /* ... */ })
var app = new Vue({
el: '#app',
data: {
currentView: 'home'
}
})
// 在路由处理器中切换页面
app.currentView = 'page1'
可以看到使用vue之后,我们写的代码是十分好维护的。
入门到此为止了
上面这些简单粗暴的使用vue其实可以让我们充分体会到vue的美,特别是小应用小团队,用这些基本上足够应付了。什么是醉完美的?简单的又能提高我们的开发效率就是完美的。
接下来,我们应该如何进一步学习vue呢?
学会用webpack打包组件,并且可以使用打包后的组件
了解一些基于vue的框架,例如Element UI,iView这些UI框架
组件通信,异步组件的用法
服务器渲染
学会开发vue插件
更多angular1/2、ionic1/2、react、微信小程序等技术文章,请关注微信公众号——ionic实战 。
什么是vue?的更多相关文章
-
Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
-
wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
-
wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
-
wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
-
Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
-
Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
-
关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
-
Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
-
窥探Vue.js 2.0 - Virtual&#160;DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
-
初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
-
使用ANTS Performance Profiler&;ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题
一.前言 最近一段时间,网站经常出现两个问题: 1.内存占用率一点点增高,直到将服务器内存占满. 2.访问某个页面时,页面响应过慢,CPU居高不下. 初步判断内存一点点增多可能是因为有未释放的资源一直 ...
-
docker-image container 基本操作 -常用命令
基本概念: container 容器.可以把每个 container 看做是一个独立的主机. container 的创建通常有一个 image 作为其模板.类比成虚拟机的话可以理解为 image 就是 ...
-
linux的一点小随笔
随意写的一些东西,也就为以后自己可能看看... 1.vim安装,sudo apt-get install vim-gtk,于是vim就安装好了.当然在我电脑上还出现了gvim,简单的vim配置(etc ...
-
Jqeury获取table当前行与指定列
今天遇到了一个Jqeury获取table当前行与指定列的问题: 大概的实现要求是一个页面中,上面有几个input输入框,下面有一个table,当在输入框中输入内容的时候,点击添加按钮的时候,在下面ta ...
-
UICollectionView 简单应用和实际操作
1.网格视图 UICollectionView 网格布局 UICollectionViewFlowLayout系统图自带网格布局 系统自带的网格布局 UICollectionViewFl ...
-
java处理数据库不支持的emoji表情符
一般数据库的编码是utf8,utf8是不支持存储表情符的,当存入的微信昵称带有表情符时就会出现乱码情况,有两种解决方法: 1.mysql数据库升级到5.5版本以上,utf8改为utf8mb4,utf8 ...
-
【转载】selenium与自动化测试成神之路
Python selenium —— selenium与自动化测试成神之路 置顶 2016年09月17日 00:33:04 阅读数:43886 Python selenium —— selenium与 ...
-
DISC测试
您的测评结果 您的测评结果是:SC主导DISC图形 结果解读 这种典型行为风格,可被大致描述为是"调解者"的类型.这种类型的人通常生性和善,关注细节.他们关心别人,并在工作中一 ...
-
第二章 logstash - 输出插件之redis与es
最常用的两个输出插件: redis es 一.redis 1.用法 output { redis{ batch => false batch_events => 50 batch_time ...
-
牛客第六场 J.Heritage of skywalkert(On求前k大)
题目传送门:https://www.nowcoder.com/acm/contest/144/J 题意:给一个function,构造n个数,求出其中任意两个的lcm的最大值. 分析:要求最大的lcm, ...