/vue-tutorial

:jack_o_lantern:Vue on some of the study DEMO, as well as some of my understanding of the Vue and angular two framework, the integration of some of the documents, but also can be forkstar

Vue

Vue文档

Article
Vue-cli脚手架 Vue组件
vue自定义指令 Vue过渡动画
Vue指令 Vue api文档
Vue执行ajax请求 vue实现类似angular服务的方法
Vue源码参考文档

AppDemo

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
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

uppercase和lowercase

让字符串全部大写或者小写

//Model
message: "Wscats"
//View
{{message | uppercase}}

capitalize

让首字母大写

//Model
message: "wscats"
//View
{{message | capitalize}}//Wscats

currency

让数字变成金钱格式和小数点

{{message | currency '￥' "1"}}

参数:

  1. 第一个参数是货币符号String 默认值: "$"
  2. 第二个参数是小数位Number 默认值: 2

pluralize

如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数

{{message | pluralize 'item'}}

debounce

  1. 限制： 需在@里面使用
  2. 参数：毫秒 默认值：300
  3. 功能：包装处理器，让它延迟执行xxx ms， 默认延迟300ms，包装后的处理器在调用之后至少将延迟xxx ms，如果在延迟结束前再次调用，延迟时长重置为xxx ms
disappear: function(){
	document.getElementById("btn").style.display= "none";
}
<button id="btn" @click="disappear|debounce 10000">点击我,我将10秒后消失</button>

limitBy

  1. 限制：需在v-for(即数组)里面使用
  2. 两个参数：
    1. 第一个参数:取得数量
    2. 第二个参数:偏移量
<li v-for="item in items|limitBy 10 0">{{item}}</li>

filterBy

  1. 限制:需在v-for(即数组)里面使用
  2. 三个参数:
    1. 第一个参数: 需要搜索的字符串
    2. 第二个参数: in(可选,指定搜寻位置)
    3. 第三个参数: (可选,数组格式)
<li v-for="item in items|filterBy 'Wscats' in 'name' 'dada' ">{{item}}</li>

orderBy

  1. 限制:需在v-for(即数组)里面使用
  2. 三个参数:
    1. 第一个参数: String，Array，Function类型都得，需要搜索的字符串
    2. 第二个参数: 接受字符串，可选参数order决定结果升序（order >= 0）或降序（order < 0）,默认是升序，这里跟Angular接受布尔值不一样，Vue是接受正负值

自定义过滤器

  1. 全局方法Vue.filter()注册一个自定义过滤器，必须放在Vue实例化前面
  2. 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算
  3. 可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突
  4. 用户从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来说是个优点

组件

  1. 第一步是用构造器定义Vue.extend
  2. 第二步注册Vue.component
  3. 把组件的标签放到对应的视图上

创建组件的步骤

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

安装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)