vue
? ? 特點:?
1)vue是一套構(gòu)建用戶界面的漸進式框架(mvvm)
2)輕便,入門容易, 漸進式
步驟:
1、引用文件。
2、window主要是為了獲取元素,如果不用放在代碼下面。
3、寫法：new Vue（{
? ? ? ? ? ? ? ? el:''
? ? ? ? ? ? ? ?data:{
? ? ? ? ? ? ?msg,
? ? ? ? ? ? ? arr
},
? ? ? ? ? ? ?methods:{
}）
4、指令：
v-model=""
v-for="v in arr"
v-for="(i,v) in arr" $index
v-for="(k,v) in json" $key
{{v}}
v-show改變display，DOM結(jié)構(gòu)里面還在
v-if改變的是DOM結(jié)構(gòu)
v-on:click/keyup...
@click
@click.stop阻止冒泡
@click.prevent阻止默認(rèn)事件
@keyup.13/@keyup.enter
v-bind:src
v-bind:style="json對象"
v-bind:class="字符串|數(shù)組|json"
v-bind:id
:src=""
5：自定義指令
angular:
app.directive('ngRed',function(){
return function(scope,element.attr){
element.css('background','red')
}
})
vue
v-red
Vue.directive('red',function () {
//this.el原生的對象
this.el.style.background='red';
});
6、自定義元素指令
Vue.directive('on').keyCodes.ctrl=17;
@keyup.ctrl=""
模板：
非轉(zhuǎn)譯輸出
{{}}
{{*}}只初始化顯示一次，后面不能更改
轉(zhuǎn)譯輸出
{{{}}}
變量、表達(dá)式（a+1）、arr或str的方，三目
7、過濾器：
{{msg|過濾器的名稱 參數(shù)}}
自定義過濾器
angular
app.filter('data',function(){
return function(s){
//s要過濾的
}
})
vue
Vue.filter('data',function (s) {
//s要過濾的
return
});
8、交互
vue本身沒有交互功能功能，需要別的插件協(xié)助vue-resource
下載：npm install vue-resource
獲取數(shù)據(jù)? 這里get和post都一樣
this.$http({
url:'a.txt',
method:'POST|GET'
}).then(function (res) {
alert(res.data)
},function () {
})
發(fā)送數(shù)據(jù)
----
$a=$_GET['bbb'];
$a+=1;
echo $a;
?>
-----
get
this.$http({
url:'a.txt',
method:'GET',
params:{數(shù)據(jù)}
}).then(function (res) {
alert(res.data)
},function () {
})
post
this.$http({
url:'post.php',
method:'post',
body:{
aaa:22
},
emulateJSON:true? //定義傳送數(shù)據(jù)的格式
}).then(function (res) {
console.log(res.data)
},function () {
})
jsonp
百度https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
this.$http({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
method:'jsonp',
params:{
wd:'a'
},
jsonp:'cb'
}).then(function (res) {
console.log(res.data)
},function () {
})
9、實例：
var vm=new Vue({})
vm.$data就是data
vm.$el就是元素
vm.$watch('監(jiān)聽的數(shù)據(jù)',function(變化后的數(shù)據(jù)的值，變化前的數(shù)據(jù)的值){
})
注：上面只能監(jiān)聽簡單的數(shù)據(jù)，如果是json需要深度監(jiān)聽
深度的監(jiān)聽
vm.$watch('監(jiān)聽的數(shù)據(jù)',function(變化后的數(shù)據(jù)的值，變化前的數(shù)據(jù)的值){
},{deep:true})
vm.$mount('容器元素')手動掛在vue
vm.$log()查看現(xiàn)在的數(shù)據(jù)狀態(tài)
vm.$destroy()銷毀對象
10、生命周期
就是vue對象（vm）從出生到消亡
鉤子函數(shù)
對象在某個固定的階段去調(diào)用的函數(shù)
created -->實例已經(jīng)創(chuàng)建完畢
beforeCompile -->編譯之前
compiled? ---->編譯之后
ready? ? ? ---->插入到文本之后
beforeDestroy? --->銷毀之前
destroyed? --->銷毀之后
