Vue零基础学习

Vue

1、构建Vue对象

id名称
Vue对象,el指定id，data指定数据，method指定方法
v-on:可以用@符号代替

2、事件修饰符

​ 父元素里面有子元素，点击子元素，父元素也会依次触发事件

.stop:阻止冒泡
.capture:优先冒泡
.self:只有自己能触发自己

.once: 只能触发一次

3、条件语句

v-if = “show”,show为true时显示，为false时不显示

v-else: 排除if以外的其他情况

v-else-if = “number > 10”: 多个选择

4、循环语句

• 语法：v-for = “object in list”，再用object的属性访问具体的值，list是JSON的集合

• v-for = “object,index in list”,可访问list下标，从0开始

• 遍历数字：v-for = “i in 10”,输出1，2…10

5、属性绑定

v-bind:href = “page”,page的值在Vue对象中声明

v-bind:href 可简写为**:href**

6、双向绑定

将视图上的数据放到Vue对象，或将Vue对象上的数据显示到视图上

v-model = “value”, value在Vue对象的data里

.lazy : 失去焦点后绑定

.number : string类型转为number类型

.trim : 去掉前后的空白

7、Vue属性

• 计算属性computed:{} : 在Vue对象中声明computed:{}，函数里面可以写计算函数，在前端页面用$:{{}}调用函数就行。methods也能达到一样效果，但computed有缓存，methods无。

• 过滤属性filters:{} : 单个过滤器，多个过滤器，全局过滤器

• 监听属性watch:{} : 监听属性值的变化

8、Vue组件

(1) 局部组件

new Vue({
components:{
	'product':{
		template:'<div>....</div>'
	}
}
)}

（2）动态参数

Vue.component('product',{
	props:['product'],
	template: '<div>{{product}}</div>',
})

​ (3) 遍历Json数组

<div id="div1">
	<product v-for="item in products" v-bind:product="item"></product></div>
	
	Vue.component('product',{
		props:['product'],
		template: '<div @click="increase">{{product.number}}'
	})
	
	new Vue({
		el:'#div1',
		data:{
			products:[
				{"name":"abc","number":"123"},
				{"name":"bcd","number":"234"}
			]
		}
	})

9、路由Router

局部刷新

10、Vue.js Ajax

• fetch.js方式：

mounted:function(){
	self = this
	fetch(url).then(function(r){
		r.json().then(function(jOb){
			self.heros = jOb;
		})
	}).catch(function(err){
		console.log("错误"+err);
	})
}

• axios.js方式：

mounted:function(){
	var self = this
	axios.get(url).then(function(r){
		self.heros = r.data;//字符串
		self.heros = eval("("+self.heros+")");//字符串转为数组对象
	})
}