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 | 搜索框聚焦指令 |
置顶指令 | 下拉刷新 |
Filter | |
---|---|
过滤器demo | 过滤器实现分页demo |
过滤器读写数据 | 自定义搜索关键词高亮 |
Transition | |
---|---|
过渡demo | 过渡demo2 |
列表筛选和过渡效果 |
Form |
---|
获取表单值 |
Computed | |
---|---|
计算属性 | 列表筛选和过渡效果 |
Component | |
---|---|
组件demo | 点击预览大图 |
新闻列表DEMO |
Vuex |
---|
Vuex组件间的通信 |
Other |
---|
调用百度地图接口实现查询路线直线距离 |
先安装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)