Vue 基本语法1

使用
1.实例化（new Vue）
new Vue({
	el:选择器 //规定vue的作用范围
	data{
		k1:数据1，
		k2:数据2，
	}
})

2.插值
文本插值：
1》在节点中插值{{key1}}
	v-once #这个数据是一次性的
2》v-text#插入文本
html插值：
1》v-html#插入html

{}花括号问题：
在节点之间<h1></h1>
在节点内<h2 v-html="html"></h2>,不需要加花括号

3》属性
v-属性:"属性值"

--------------------------------------------------------
vue的指令
	是带有v-前缀的特殊属性：系统自带的指令<div v-XXX>
	v-if
	v-else
	v-bind:href
	完整写法：
	缩写：:href
	v-on:click
	v-on:keydown
	v-on:keyup.参数
	v-on:keyup.37 ===>按键盘左键
事件：
冒泡
默认事件
	完整写法：v-on:click.prevent==>取消默认方法
	缩写：@click

--------------------------------------------------
vue的计算属性
{{}}内放入大量逻辑代码==》过量，难维护
解决办法：计算属性[computed]
基本写法：默认走的get() computed:{
	b:function(){}//只能获取不能设置
}
完整写法：computed:{ //计算属性
	c:{ //属性对象
	get:function(){ //获取值
		return this.a+2;
	},
	set:function(val){ //设置值
		this.a=val;
	}
	}
}
--------------------------------------------------
vue class 和style的绑定
class绑定：
:class = "data数据中的值"
:class="{bg:isActive}"
<h1 :class="aaa">这是一个标题缩写</h1>
<h1 :class="{bg:isActive}">这是一个标题</h1>
<h1 :class="{bg:true}">这是一个标题</h1>

<style>
.bg{
	background-color: blue;
}
.fz{
	font-size: 18px;
}
</style>
<h1 :class="{bg:true ,fz:false}">对象形式</h1> 
数组写法
<h1 :class="[bg1,fz1]">数组写法取data里数据</h1>
data:{				
	bg1:"bg",
	fz1:"fz"
},
style绑定
对象写法
:style="{background:bg,color:cl}" ===>bg和cl都是数据里数据

数组写法
:style="[aaaa,bbbb]"
data:{
aaaa:{background:"red"},
bbbb:{color:"blue"}
}
--------------------------------------------------------
条件渲染

v-if
v-else
v-else-if

v-show
<div v-show="bool">11111</div>
<button @click="show">按钮</button>
methods:{
	show:function(){
		if(this.bool){
			this.bool=false
		}else{
			this.bool=true
		}
	}
}
v-if和v-show区别
1》v-show 没有v-else
2》v-show不支持template
3》v-show 只是做简单的css切换 显示隐藏的

--------------------------------------------------
vue 列表渲染
<li v-for="item in arr">
{{item}}</li>
<li v-for="(item,index) in arr">
{{item}}===>{{index}}</li>

-----------------------------------------------
vue事件处理器
1》监听事件
v-on:click:事件名称
@click:事件名称
2》方法事件处理器(参数)
@事件名称=方法名称(参数..)
3》事件修饰符
阻止冒泡;@click.stop 
取消默认：@click.prevent
串联：@click.prevent.stop || @keydown.enter.37
4》按键修饰符
@keyup.37 || @keydown.enter
Vue.config.keyCodes.f1=112;//可以给f1 等单独设置值

-----------------------------------------------------
vue表单控件绑定
1》v-model:数据的双向绑定
v-model.trim去除空格
v-model.lazy相当于失去焦点值改变时触发事件
---------------------------------------------------
vue 数据交互
1》jquery ==>$.ajax
2》js原生 :es6====>axios
3》vue===>resource

GET :this.$http.get()
POST:this.$http.post()
JSONP:this.$http.jsonp()

this.$http({
	url:xxx
	
}).then(function(){},function(){});//第一个funciton 表示成功后函数，第二个表示失败后执行函数


$ bower install vue-resource ---->下载到打开的当前目录下 bower-components

GET请求
this.$http.get("user/list",{
params:{ //传递的参数
act:1,
userName:"张三"
}
}).then(function(res){//成功后执行函数

},function(err){ //失败后执行函数

})

post请求
this.$http.post("user/list",
{
act:1,
userName:"张三"
}，
{emulateJSON:true}
).then(function(){},function(){})
--------------------------------------------------------------------
vue 的生命周期
生命周期钩子函数
1beforeCreate:
2.created:
3.beforeMount:
4.mounted
5.beforeUpdate
6.updated
7.beforeDestroy
8.destroyed

--------------------------

vue自定义指令
v-zhangsan
v-color
全局：
vue.directive(指令名称，function(){})
局部：