Vue.js之深入浅出
介绍引言
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
一、Vue的引入
Vue.js 是极轻量级的前端框架，官方提供了在线地址引入js文件：https://unpkg.com/vue；
我们也可以通过下载官方的文件到本地，在html页面进行引入， Vue.js为开发版本，包含了完整的调试和警告信息；Vue.min.js为发布版本不包含警告和调试信息；
<head>
<meta name="viewport" content="width=device-width" />
<title>MyVue</title>
<!--引入官方在线js文件-->
<script src="https://unpkg.com/vue"></script>
<!--引入本地vue.js文件-->
<script src="/Scripts/vue.js"></script>
</head>
二、Vue之Hello World！话不多说，直接上Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyVue</title>
<!--引入本地vue.js文件-->
<script src="/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
{{user.message}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user:{message:'Hello Vue !'}
}
});
</script>
</body>
</html>
写完这段，不得不为Vue的数据驱动模式折服，html和js数据完美融合（就像剑法的最高境界：人剑合一），可以理解为前端的MVVM模式，并且足够简洁，如果使用过Angular.js，那么Vue的学习将更加容易。
赶紧来看下刚才的实例用到的语法吧！
（1） Vue实例，我们针对于元素的操作都将依赖于Vue的实例，它通过构造函数的形式，来初始化实例；
（2） el属性：el相当于Vue的DOM选择器属性，类似jQuery的选择器。官方称它为挂载点，并且不建议直接挂载到html或者body节点，而是实际应该操作的元素；
（3） data属性：它表示当前挂载点需要的所有数据，以Json的结构处理，它允许你定义或者传入任何Json数据（实例中定义了user实体，并给它定义了一个属性message；
习惯了jQuery的我，总是想着DOM操作。Vue上手的话，必须扭转这种思维了，它提供了简洁的API，并以数据驱动，无需直接操作DOM。它是通过特殊的Vue HTML语法和数据形成双向绑定；当数据发生变化，DOM将由Vue自动更新。
三、Vue之条件语句，还是直接上代码！
不过在代码之前，这次我不得不先把本段用到的语法赘述清楚：
v-if，条件语法，完整模块为：v-if … v-else-if…v-else…；满足条件时，加载条件所在的DOM元素；条件可以是任意bool表达式，或者data内的任意bool属性；
v-show，单纯的改变css的display属性来控制是否显示DOM元素，条件同样是bool表达式；
v-on:，事件绑定，如v-on:click绑定的是鼠标左键单击事件，值为methods下的任意方法；
methods，用来定义挂载点下需要的所有方法；
this，可以理解为当前挂载点，可获取到data下的所有内容。
v-bind:，DOM元素的属性绑定，如v-bind:value绑定的是DOM元素的value属性，值可以是data下的任意字段，注意，bind为 单向绑定；
v-model，表单控件的绑定，如文本框上的v-model则会绑定到value属性，值同样是支持data的任意字段；
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyVue</title>
<!--引入本地vue.js文件-->
<script src="/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" v-bind:value="value" v-on:click="show" />
<div v-if="showUser">{{user.message}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user:{message:'Hello Vue !'},
showUser:false,
value:'show'
},
methods:{
show:function(){
this.showUser=!this.showUser;
this.value=this.showUser?'hide':'show';
}
}
});
</script>
</body>
</html>
Word 天！跪服Vue，我只要改变了data.showUser的值，DOM自动变化（并不是简单的操作了css的display属性，而是改变了DOM元素！），神奇啊！从代码和操作对比图可以看出，我点击按钮的时候修改了showUser的值，来判定是否显示message消息，并控制按钮的value属性；从始至终，我并没有关注DOM的任何元素，只需要修改数据值，不得不说，Vue让前端变成了数据操控DOM。作为没有用过Angular.js的我来说，不敢想象原来jQuery的写法的繁杂程度，简直是震惊了！如果屏幕前的你还没有从灵魂上感受到什么是双向绑定，再来看下面的例子！
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyVue</title>
<!--引入本地vue.js文件-->
<script src="/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" v-model="value" v-on:click="show" />
<br />
<br />
<input type="text" v-model="user.message" />
<input type="button" v-on:click="change" value="change message" />
<div v-if="showUser">{{user.message}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user:{message:'Hello Vue !'},
showUser:true,
value:'hide'
},
methods:{
show:function(){
this.showUser=!this.showUser;
this.value=this.showUser?'hide':'show';
},
change:function(){
this.user.message='I am vue.js .';
}
}
});
</script>
</body>
</html>
上图是文本框的初始值，它的value和user.message做了绑定，我现在手动键入文本框的值。
奇迹出现了，原来的div下的message消息自动跟着变化了，静态图看不到效果，实际上他是在文本框一边键入，一边在变化，效果像是onkeydown事件。我现在通过点击按钮“change message”来设定message字段的值，继续看奇迹。
哇偶，文本框和消息还是在同步变化。到此处，如果还感受不到vue双向绑定的魅力，我只能卖给你一块儿“智商充电宝”了！
四、最后一节，Vue之http请求
写到这里，很遗憾的告诉大家， Vue.js仅仅是View层面的东西，并不包含http请求的模块，我们需要借助jQuery或者vue-rsource.js
Github下载：
GitHub - pagekit/vue-resource: The HTTP client for Vue.js
https://github.com/pagekit/vue-resource
语法：vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
除了jsonp以外，另外6种的API名称是标准的HTTP方法。
POST代码实例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyVue</title>
<!--引入本地vue.js文件-->
<script src="/Scripts/vue.js"></script>
<!--引入vue-resource.js-->
<script src="/Scripts/vue-resource.js"></script>
</head>
<body>
<div id="app">
UserName:<input type="text" name="UserName" v-model="params.name" /><span style="color:red;">*</span>
<span style="color:red;" v-if="isEmpty">UserName 必填！</span>
<span v-if="user.UserName">{{user.UserName}}: {{user.Message}}</span>
<br />
<input type="button" value="show" v-on:click="show" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user: { UserName: null, Message: null },
params: { name: null },
isEmpty: false
},
methods: {
show: function () {
if (!this.params.name) {
this.isEmpty = true;
return;
}
this.isEmpty = false;
this.$http.post('/Home/GetUser', this.params).then(
function (result) {//success
this.user = result.data;
},
function (result) {//error
}
);
}
}
});
</script>
</body>
</html>
后台代码（HomeController下的Action：GetUser）：
public JsonResult GetUser(string name)
{
UserInfo user = new UserInfo()
{
Message = "Hello Vue.js !",
UserName = name
};
return Json(user);
}
到此结束，POST代码在不做任何解析，如果你能全部看完，恭喜你，本篇文章没有浪费你宝贵的时间，你Vue已经入门了！
Vue.js之深入浅出的更多相关文章
- Vue.JS React 精彩文章汇总
JavaScript深入系列 [干货] JavaScript数组所有API全解密 [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...
- Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
随机推荐
- 模板C++ 03图论算法 1最短路之单源最短路（SPFA）
3.1最短路之单源最短路(SPFA) 松弛:常听人说松弛,一直不懂,后来明白其实就是更新某点到源点最短距离. 邻接表:表示与一个点联通的所有路. 如果从一个点沿着某条路径出发,又回到了自己,而且所经过 ...
- SQL Server AG集群启动不起来的临时自救大招
SQL Server AG集群启动不起来的临时自救大招 背景 前晚一朋友遇到AG集群发生来回切换不稳定的情况,情急之下,朋友在命令行使用命令重启WSFC集群 结果重启WSFC集群之后,非但没有好转,导 ...
- 『珍藏】eclipse快捷键
提示所有快捷键的快捷键是 ctrl+shift+L 菜单是在: window-->preferences-->general-->keys 提供能容帮助是 alt+/ Ctrl+1 ...
- 判断客户端使用的是安卓还是苹果，然后加载对应的css文件
<script type="text/javascript" charset="utf-8"> var browser = { versions: ...
- .NET和JAVA 反射对比
反射是一个程序集发现及运行的过程,通过反射可以得到*.exe或*.dll等程序集内部的信息.使用反射可以看到一个程序集内部的接口.类.方法.字段.属性.特性等等信息.在System.Reflectio ...
- [HNOI2007]紧急疏散EVACUATE （湖南2007年省选）
[HNOI2007]紧急疏散EVACUATE 题目描述 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是'X',那么表示这是一面 ...
- 【Python3之socket编程】
一.socket的定义 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后 ...
- 无法为具有固定名称“MySql.Data.MySqlClient”的 ADO.NET 提供程序加载在应用程序配置文件中注册的实体框架提供程序类型“MySql.Data.MySqlClient.MySqlProviderServices,MySql.Data.Entity.EF6”
"System.InvalidOperationException"类型的未经处理的异常在 mscorlib.dll 中发生 其他信息: 无法为具有固定名称"MySql. ...
- Kotlin基本语法和使用
Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发.与Java相比,Kotlin的语法更简洁.更具表达性,而且提供了更多的特性. Kotlin是使用Java开发者的思维被创 ...
- linux下swoole的安装
//官方推荐的安装方式1:下载压缩包 wget https://github.com/swoole/swoole-src/archive/swoole-1.8.4-stable.zip 2:解压缩 u ...