Skip to content

Latest commit

 

History

History
341 lines (310 loc) · 8.43 KB

Vue.md

File metadata and controls

341 lines (310 loc) · 8.43 KB
Raw

安装

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