一、什么是Vue.js?
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
二、Vue.js的特点？
1.简洁：HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
2.数据驱动：自动追踪依赖的模板表达式和计算属性。
3.组件化：用解耦、可复用的组件来构造界面。
4.轻量：~24kb min+gzip，无依赖。
5.快速：精确有效的异步批量 DOM 更新。
6.模块友好：通过 NPM 或 Bower 安装，无缝融入你的工作流。
三、引入一个Vue.js的包？
<script src="js/vue.min.js"></script>
四、Vue.js的小例子
【1】创建一个简单的Vue的应用
HTML段：
<div id="div1">{{text}}</div>
Script段：
new Vue({
el:"#div1",
date:{
text:"我是第一个Vue.js的例子"
}
})；
【2】双向数据的绑定（v-nodel）
HTML段：
<div id="div3">
<input type="text" v-model="Text"/>
<p>{{Text}}</p>
</div>
Script段：
new Vue({
el:"#div3",
date:{
Text:"站位"
}
});
【3】列表输出（v-for）
HTML段：
<div id="div2">
<ul>
<li v-for="x in text2">{{x.name}}{{x.sex}}</li>
</ul>
</div>
Script段：
new Vue({
el:"#div2",
date:{
text2:[
{"name":"calay","sex":"女"},
{"name":"jaden","sex":"女"},
{"name":"cindy","sex":"女"},
]
}
});
【4】条件判断（if）
HTML段：
<div id="div5">
<div v-if="5>2">如果5>2我就显示</div>
</div>
因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个元素当做包装元素，并在上面使用v-if，最终的渲染结果不会包含它：
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
【5】过滤器
{{message | uppercase}}
这样就能输出message的大写了,过滤器也能串联在一起使用:
{{message | reverse | uppercase}}
这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:
Vue.filter('reverse',function(value){
return value.split('').reverse().join('')
})
05
小巧
说起小巧，那应该首先要关注下Vue的源码大小，Vue的生产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半。
小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间。
如Vue的核心默认是不包含路由和 Ajax 功能，但是如果项目中需要路由和AJAX，可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource，同时你也可以使用其他你想要使用的库或插件，如jQuery的AJAX等。
是不是感觉非常的灵活？那就用起来吧！
文章原创，未经许可禁止转载。
网友评论