| Article | |
|---|---|
| Vue-cli脚手架 | Vue组件 |
| vue自定义指令 | Vue过渡动画 |
| Vue指令 | Vue api文档 |
| Vue执行ajax请求 | vue实现类似angular服务的方法 |
| Vue源码参考文档 |
| Demo | |
|---|---|
| 新闻列表DEMO(1) | 新闻列表DEMO(2) |
| CNode社区DEMO | 图灵机器人 |
| Demo | |
|---|---|
| Vue生命周期 | Vue的$nextTick |
| Vue触发组件销毁 |
| Controller | |
|---|---|
| 路由(v1)demo | 路由(v1)demo2 |
| 路由(v2)实例demo |
| Directive | |
|---|---|
| 指令demo | 自定义指令demo |
| 滑动手势demo | 搜索框聚焦指令 |
| 置顶指令 | 下拉刷新 |
| ref获取节点 | 指令实现属性过滤 |
| 旋转图形的登录验证 |
| Filter | |
|---|---|
| 过滤器demo | 过滤器实现分页demo |
| 过滤器读写数据 | 自定义搜索关键词高亮 |
| Transition | |
|---|---|
| 过渡demo | 过渡demo2 |
| 列表筛选和过渡效果 |
| Form | |
|---|---|
| 获取表单值 | 购物车逻辑 |
| Computed | |
|---|---|
| 计算属性 | 列表筛选和过渡效果 |
| 旋转图形的登录验证 |
| Component | |
|---|---|
| 组件demo | 点击预览大图 |
| 新闻列表DEMO |
| Vuex |
|---|
| Vuex组件间的通信 |
| Other | |
|---|---|
| 调用百度地图接口实现查询路线直线距离 | 配合Echarts图表 |
先安装1.X的版本
npm install vue@1新建index.html，引入vue.js文件
Vue比Angular轻,Vue的源码比较小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js"></script>
<body>
<!--V-->
<div id="demo">
<p>{{name}}</p>
</div>
</body>
<script>
new Vue({
el: "#demo",//element
//M
data: {
name: "w"
}
})
</script>
</html>一般用id来绑定new Vue中的el，因为id具有唯一性，当然事实上class也是可以的，但不建议使用
指令，以属性值呈现在便签上，实现某类方法的复用
下面是Vue和Angular指令的简单对比，发现Vue总是简洁点
| Angular指令 | Vue指令 | Vue指令 |
|---|---|---|
| ng-show | v-show | |
| ng-hide | v-else | |
| ng-if | v-if | |
| ng-repeat | v-for | |
| ng-model | v-model | |
| ng-click | v-on:click | @click |
| ng-change | v-on:change | @change |
| ng-keyup | v-on:keyup | @keyup |
| ng-class | v-bind:class | :class |
| ng-style | v-bind:style | :class |
| ng-bind | v-text | {{}} |
| ng-bind-html | v-html | {{{}}} |
| ng-controller | 无 | 无 |
| ng-app | 无 | 无 |
Vue.directive（指令的名字,接受一个对象）
Vue.directive('color',{
bind:function(){
}
})new Vue({
directives: {
dirName: { //定义指令}
}
});对象里面有常用三个属性值:bind,update,unbind，全部属性如下表
| 属性值 | 用法 |
|---|---|
| bind | 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作 |
| inserted | 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中） |
| update | 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新 |
| componentUpdated | 被绑定元素所在模板完成一次更新周期时调用 |
| unbind | 只调用一次， 指令与元素解绑时调用 |
使用指令要加前缀v-
定义：
Vue.directive('color',{...})使用：
<p v-color="yellow">{{name}}</p>1.x有内置过滤器2.x已经移除大部分，但自定义过滤器还是有
注意Angular和Vue使用内置过滤器时候，接受参数的语法是不一样的
//Angular语法
{{num|currency:"￥" 1}}
//Vue语法
{{num|currency "￥" 1}}| Angular过滤器 | Vue过滤器 |
|---|---|
| uppercase | uppercase |
| lowercase | lowercase |
| currency | currency |
| filter | filterBy |
| limiteTo | limiteBy |
| orderBy | orderBy |
| json | json |
| 无 | number |
| 无 | date |
| 无 | capitalize |
| 无 | pluralize |
| 无 | debounce |
让字符串全部大写或者小写
//Model
message: "Wscats"
//View
{{message | uppercase}}让首字母大写
//Model
message: "wscats"
//View
{{message | capitalize}}//Wscats让数字变成金钱格式和小数点
{{message | currency '￥' "1"}}参数:
- 第一个参数是货币符号
String默认值: "$" - 第二个参数是小数位
Number默认值: 2
如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数
{{message | pluralize 'item'}}- 限制： 需在@里面使用
- 参数：毫秒 默认值：300
- 功能：包装处理器，让它延迟执行xxx ms， 默认延迟300ms，包装后的处理器在调用之后至少将延迟xxx ms，如果在延迟结束前再次调用，延迟时长重置为xxx ms
disappear: function(){
document.getElementById("btn").style.display= "none";
}
<button id="btn" @click="disappear|debounce 10000">点击我,我将10秒后消失</button>- 限制：需在v-for(即数组)里面使用
- 两个参数：
- 第一个参数:取得数量
- 第二个参数:偏移量
<li v-for="item in items|limitBy 10 0">{{item}}</li>- 限制:需在v-for(即数组)里面使用
- 三个参数:
- 第一个参数: 需要搜索的字符串
- 第二个参数: in(可选,指定搜寻位置)
- 第三个参数: (可选,数组格式)
<li v-for="item in items|filterBy 'Wscats' in 'name' 'dada' ">{{item}}</li>- 限制:需在v-for(即数组)里面使用
- 三个参数:
- 第一个参数: String，Array，Function类型都得，需要搜索的字符串
- 第二个参数: 接受字符串，可选参数order决定结果升序（order >= 0）或降序（order < 0）,默认是升序，这里跟Angular接受布尔值不一样，Vue是接受正负值
- 全局方法
Vue.filter()注册一个自定义过滤器，必须放在Vue实例化前面 - 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算
- 可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突
- 用户从input输入的数据在回传到model之前也可以先处理
分别为下面这几种情况：
过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。
<p>{{num | WscatsCal 10 20}}</p>添加两个过滤器,注意不要冲突
<p>{{num | sum | currency }}</p>从input输入的数据在回传到model之前也可以先处理
<input type="text" v-model="message | change">全局方法 Vue.filter()注册一个自定义过滤器，必须放在Vue实例化前面
Vue.filter("WscatsCal", function(){})
new Vue({});上面的例子直接注册在Vue全局上面，其他不用这个过滤器的实例也会被迫接受，其实过滤器可以注册在实例内部，仅在使用它的实例里面注册 换言之就系Vue既可以全局注册过滤器，也可以局部注册过滤器，这点相比Angular来说是个优点
- 第一步是用构造器定义
Vue.extend - 第二步注册
Vue.component - 把组件的标签放到对应的视图上
var Wscats = Vue.extend({//第一步:定义
template: '<p>我是Oaoafly Wscats</p>'
})
Vue.component('myWscats', Wscats)//第二步:注册到Vue上面(这里是全局注册)
var myDemo = new Vue({//第三步:创建实例化
el: '#demo'
})除了上面的全局注册组件，也可以局部注册组件，如下面代码
<div id="demo">
<p>{{name}}</p>
<first-compenent></first-compenent>
</div>
//JS
var Wscats = Vue.extend({
template: "<p>这是第一个组件</p>"
})
//注册
Vue.component("firstCompenent", aaa)
new Vue({
el: "#demo",
data: {
name: "组件DEMO"
},
components: {
firstCompenent: Wscats
}
})可以用<template>标签将模板写在外面，这样比较容易编写代码
注意此处必须是id，用class不行
<template id="#WscatsCp">
<div>我是Oaoafly Wscats</div>
</template>components: {
WscatsCp: {
template: '#WscatsCp'
}
}安装vuex
cnpm install vuex
引入JS，记得在vue后面引入
<script src="js/vuex.js"></script>定义vuex状态管理的仓库
var store = new Vuex.Store({
//存储数据的地方
state: {
name: "新闻",
author: "wscats",
searchName: ""
},
mutations: {
//改变值的方法
changeName: function(state, a) {
state.name = a
},
changesearchName: function(state, a) {
state.searchName = a
}
},
//获取数据的方法
getters: {
getName: function(state) {
return state.name
}
}
})把store注入到构造器里面
new Vue({
el: "#demo",
components: {},
store //注入store
})获取vuex中的state的值
利用this.$store.state.searchName获取值
computed: {
searchName: function() {
//vuex的state里面拿数据
return this.$store.state.searchName
},
},
//也可以用方法来获取
methods: {
getSearchName: function() {
//vuex的state里面拿数据
this.searchName = this.$store.state.searchName
},
},设置vuex中的state的值 commit的第一个参数是触发vuex中的mutations的函数，让它帮我们修改对应的值
this.$store.commit('changesearchName',this.searchName)