先聊一聊昨晚发生的事
昨晚，微信小程序刷爆了朋友圈，使用了
自选股、美团等好多个不同类型的轻应用，体验还是很不错的，不少和原生开发的区别已经很细微了，相对稳定的底层结合热更新、热部署，这也标志着各种围绕着H5的技术愈加成熟。从去年以来，React-Native技术的火爆，紧接着阿里开源Weex，再到微信的应用号、小程序的出现，基本都是封装了底层，自定义了一整套标签、组件...，规范了自己的开发标准，开放了API，我们只需要专注于上层开发就OK了，但想成为大牛，我们需要不断去剖析它们的底层，而JavaScript无疑是我们最重要的一个手段。
以上各种框架、平台的出现，标志着PC到移动互联网过渡的第一个阶段已经结束:
把PC端的应用搬砖式的搬到移动端。 那移动互联网的第二个浪潮又是什么呢？其中一个分支可能是：场景化应用、万物互联。 这意味着：我们的手机中可能不再需要很多的App，只要保持几个几乎每天都会用的就OK了，其他的场景式需求只需要一个统一的入口（二维码、关键字、...）,用完即走。 对于开发者而言，一个项目无论是PC还是移动，如果能够通过脚手架构项目，并可以充分结合热部署、热更新以及灵敏的代码风格检查，这是很美妙的事情。
- 如果喜欢我的文章，可以关注我简书、公众号:
旋之华， 也可以来小码哥，了解下我们的iOS/HTML5培训课程。本专题的所有资料请进入公众号直接下载。
前言
- 移动互联网这几年的重心肯定还是在手机上，未来可能是一块手表、一副眼镜。所以，接下来企业中
Hybrid App开发的需求会更大。本专题主要是带着大家一起学习下Vue.js这样一个前端框架，本专题将通过三个阶段(全面入门、设计模式灵活运用、综合项目实战）来帮助大家灵活的把Vue.js应用到我们已有的项目中，并能够做出一个比较完整的移动端项目。本篇文章为第一个阶段的入门--指令篇。
Vue.js可以用来干嘛？
Vue.js准确来说：是用于开发web(PC端和移动端)界面的前端框架。因为Vue的关注点在开发的视图层，是自底向上增量开发的模式，所以非常容易与我们已有的项目整合。而且，Vue.js让我们可以非常灵活的实现
响应数据绑定和开发复杂的单页应用。目前比较成熟的开发方案是：vue+vue-strap+babel(es6)+webpack+vue-router。而且，Vue.js与jQuery的兼容非常好，非常适合MVVM思想的形成，从而后期可以非常快速过渡到React，angularjs等开发框架。
Vue.js在很多公司都在被使用，稍微大一点的公司比如：淘宝，美团，途牛，苏宁云商，饿了么等等，随着大前端的到来，很多公司会选择Vue.js作为以数据为核心的页面构建方案。
Vue.js快速入门
- 下载Vue.js生产版本的js文件，放入本地的目录中。来，一起体验下：
- Vue.js是通过类似构造函数方式的构造器简洁声明式的将数据渲染进 DOM 的系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js入门</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!--引入Vue.js生产包-->
<script src="js/vue.js"></script>
<script>
(function () {
var app = new Vue({
el: '#app', // el是作用域
data: { // 数据，json格式
message: '小码哥 旋之华'
}
})
})();
</script>
</body>
</html>
- 灵活进行数据绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js入门</title>
</head>
<body>
<div id="app">
<!--
数据关联在message, 只要文本框中的数据改变, p标签中的数据也会进行联动改变
-->
<input type="text" v-model="message">
<!--
<p>{{* message}}</p> 如果在前面加*号，则只会被加载一次
-->
<p>{{message}}</p>
</div>
<script src="js/vue.js"></script>
<script>
(function () {
var app = new Vue({
el: '#app',
data: {
message: '全局数据 一改全改!'
}
})
})();
</script>
</body>
</html>
上述案例中用到了v-model指令，v-model指令可以在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
轻松搞定Vue.js中常用指令
- v-text， v-html 可以通过给标签属性赋值的方式往标签内部插入文本和HTML网页。 此外也可以在标签中间直接写入，比如：
<p>{{message}}</p>, 两种的写法方式不一样，作用也不一样，后面案例中再分析其中不同点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<!--
根据数据的类型往标签中动态注入内容
-->
<p v-html="html"></p>
<p v-text="text"></p>
</div>
<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
// 1. 构造器
var app = new Vue({
el: '#app',
data: {
html: '<div><p>大家好,我是旋之华!</p></div>',
text: 'Hello, world!'
}
});
</script>
</body>
</html>
- v-for 根据数据遍历更新UI界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
</head>
<body>
<div id="app">
<!--
语法格式: xx of xxs
-->
<p v-for="item of items">
{{ item.name }}
</p>
</div>
<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
// 1. 构造器
var app = new Vue({
el: '#app',
data: {
items: [
{name: '张三丰'},
{name: '章四风'},
{name: '张五分'},
{name: '占六分'}
]
}
});
// 2. 往构造器的数据数组中添加数据
app.items.push({name: '占七分'});
// 3. 从构造器的数据数组中删除数据
app.items.pop();
// 4. 往构造器的数据数组最前面插入元素
app.items.unshift({name: '小二'});
</script>
</body>
</html>
- v-if 将根据" "中表达式的值的真假来做出相应的UI界面操作，表达式可以是true和false、三元表达式、条件判断等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
</head>
<body>
<div id="app">
<p>旋之华的考试的分数是: {{score}} </p>
<!-- v-if:最终的运算结果, boolean类型 -->
<p v-if="score >= 80">成绩优秀!</p>
<p v-else>成绩及格!</p>
<p>{{ result ? '结果是真的' : '结果是假的' }}</p>
</div>
<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
score: _.random(60, 100), // 注意:在Vue的数据中心是具备运算功能的
result: false // 采用三目运算符的方式
}
});
</script>
</body>
</html>
- v-on 监听事件调用，主要的写法有
v-on:事件="方法"和@事件="方法"：
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
通过v-on，我们就可以操作数据控制界面的改变，这就在慢慢的去接近了MVVM的设计模式。具体请参照下面案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<body>
<div id="app">
<p>做出的题数:{{count}}</p>
<p>每道题的分数:{{scoreValue}}</p>
<p>最终成绩:{{countScore}}</p>
<button v-on:click="plus">点我+1</button>
<button @click="minus">点我-1</button>
</div>
<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
// 1. 构造器
var app = new Vue({
// 1.0 作用域
el: '#app',
// 1.1 初始数据
data: {
count: 0, // 已做题数
scoreValue: 5, // 每题5分
countScore: 0 // 总得分
},
// 1.2 定义方法
methods: {
// 做对一道题目
plus: function () {
this.count ++;
if(this.countScore >= 100){
this.countScore = 100;
this.count = 100 / this.scoreValue;
alert('你已经对的够多了!');
}
this.countScore = this.count * this.scoreValue
},
// 做错一道题目
minus: function () {
this.count --;
if(this.countScore <= 0){
this.countScore = 0;
this.count = 0;
alert('你已经不能再错了!');
}
this.countScore = this.count * this.scoreValue
}
},
// 1.3 监听数据的改变
watch: {
"countScore": function () { // 监听总分数的变化
if(this.countScore == 90){
alert('成绩达到优秀');
}
}
}
});
</script>
</body>
</html>
- v-show 可以控制标签中的内容进行显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
</head>
<body>
<div id="app">
<!--
根据数据的类型往标签中动态注入内容
-->
<p v-html="html" v-show="flag"></p>
<p v-text="text" v-if="flag"></p>
<button @click="change">切换</button>
</div>
<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
// 1. 构造器
var app = new Vue({
el: '#app',
data: {
html: '<div><p>大家好,我是旋之华!</p></div>',
text: 'Hello, world!',
flag: true // 用于控制标签的显示和隐藏
},
methods: {
// 控制标签的显示和隐藏
change: function () {
this.flag = (this.flag == true) ? false : true;
}
}
});
</script>
</body>
</html>
v-show 和 v-if 都能够实现标签的显示和隐藏，主要区别在于：v-if是预加载，调用的是js，显示的速度比较慢，一般用于逻辑比较复杂，又需要被多次调用的场景； v-show是没有预加载的，控制的是CSS标签，显示速度比较快。
- v-bind
-
Class 与 Style 绑定数据绑定一个常见需求是操作元素的class 列表和它的内联样式。我们可以通过v-bind去绑定。此外，在 v-bind 用于 class 和 style 时， 表达式的结果类型除了字符串之外，还可以是对象或数组。
-
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
- 场景案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.green{
background-color: green;
}
.size{
width:100px;
height: 100px;
}
.bg-color{
background-color: orangered;
}
.class-A{
background-color: red;
}
.class-B{
width: 200px;
height: 200px;
padding: 100px;
}
.class-C{
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--动态绑定标签的src属性-->
<!--
给v-bind:class一个对象,可以动态地切换class;
此外, 也可以在对象中传入更多属性用来动态切换多个class,
而且v-bind:class指令可以与普通的 class 属性共存
-->
<p :class="{'green': isGreen}">根据数据决定是否加载css的green样式</p>
<p :class="{'size': isSize, 'bg-color': isBgColor}">同时设置多个css样式</p>
<p :class="['class-A', 'class-B', 'class-C']">通过数组设置多个样式</p>
<!--
给v-bind:style一个对象,可以动态地切换style;
-->
<p :style="{backgroundColor: bgColor, width: width, height: height}">设置行内样式</p>
<p :style="[styleA, styleB, styleC]">可以通过数组设置多个行内样式</p>
</div>
<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
// 1. 构造器
var app = new Vue({
el: '#app',
data: {
imgSrc: 'http://h.hiphotos.baidu.com/image/pic/item/72f082025aafa40f7c884d31af64034f79f0198b.jpg',
isGreen: true, // 加载green样式
isSize: true,
isBgColor: true,
bgColor: 'blue',
width: '200px',
height: '300px',
styleA:{
fontSize: '30px'
},
styleB:{
width: '200px',
height: '200px',
backgroundColor:'yellow',
padding:'40px'
},
styleC:{
borderRadius: '50%'
}
}
});
</script>
</body>
</html>
写在最后
- 本篇文章主要介绍了Vue.js中常见的指令，这对于我们后面做综合应用还是比较重要的，下一篇主要会带着大家一起了解下Vue.js开放的API, 包括自定义指令等。。。
