Vue學(xué)習(xí)

1.1 vue.js是什么？

? Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

1.2 hello Vue

Vue

{{messages}}

var vm=new Vue({

el:"#app",

data:{

messages:"hello vue"

}

})

還可以通過v-bind綁定元素

Vue

鼠標(biāo)停在我的上面看看

var vm=new Vue({

el:"#app",

data:{

messages:"hello vue"

}

})

1.3判斷和循環(huán)

判斷if

Title

Yes

No

A

B

C

D

var vm=new Vue({

el:"#app",

data:{

seen: true

}

})

var vm2=new Vue({

el:"#app2",

data:{

type: 'A'

}

})

循環(huán)for

Title

{{item.message}}

var vm=new Vue({

el:"#app",

data:{

items:[

{message: '前端'},

{message: '后端'},

{message: '運(yùn)維'}

]

}

})

1.4 methods事件(單向綁定 v-on)

Click Me

var vm=new Vue({

el:"#app",

data:{

message: '小胖學(xué)java'

},

methods:{ //方法定義在methods中，v-on綁定事件

SayMessage: function () {

alert(this.message)

}

}

})

1.5雙向綁定(v-model)

請輸入：

內(nèi)容為：{{message}}

var vm=new Vue({

el:"#app",

data:{

message: ''

}

})

下拉框的雙向綁定

---請選擇---

A

B

C

選了:{{message}}

var vm=new Vue({

el:"#app",

data:{

message: ''

}

})

1.6Vue組件

Vue.component("jinhao",{

props:['value'],

template:'

{{value.message}}'

})

var vm=new Vue({

el:"#app",

data:{

items:[

{message: '前端'},

{message: '后端'},

{message: '運(yùn)維'}

]

}

})

1.7axios通信

{{info.name}}{{info.address.city}}

小胖的Java博客

var vm=new Vue({

el:"#app",

//data屬性 vm

data(){

return {

//請求返回合適的參數(shù)，必須和json一樣

info: {

name: null,

url: null,

address: {

street: null,

city:null

}

}

}

},

mounted(){

axios.get('data.json').then(response=>(this.info=response.data));

}

})

1.7 計(jì)算屬性Computed

{{cruuentTime1()}}

{{cruuentTime2}}

var vm=new Vue({

el:"#app",

data:{

merssage: "wo"

},

methods: {

cruuentTime1: function () {

return Date.now();

}

},

computed:{

cruuentTime2: function () {

//如果computed中的數(shù)據(jù)發(fā)生了改變，就是merssage變了，返回值return也會發(fā)生改變

this.merssage;

return Date.now();

}

}

})

1.8組件插槽 slot

Vue.component('todo',{

template: '

' +

''+

'

• '+

''+

'

'+

'

'

});

Vue.component('todo-title',{

props:['title'],

template: '

{{title}}'

});

Vue.component('todo-items',{

props:['value'],

template: '

{{value.java}}'

});

var vm=new Vue({

el:"#app",

data:{

title: '小胖學(xué)技術(shù)',

jishu:[

{java: "spring"},

{java: "springmvc"},

{java: "mybatis"}

]

}

})

1.9自定義事件內(nèi)容分發(fā)

v-bind:index="index" v-on:remove="removeItems" v-bind:key="index">

Vue.component('todo',{

template: '

' +

''+

'

• '+

''+

'

'+

'

'

});

Vue.component('todo-title',{

props:['title'],

template: '

{{title}}'

});

Vue.component('todo-items',{

props:['value','index'],

template: '

{{index}}---{{value}} 刪除',

methods:{

remove:function (index) {

this.$emit('remove',index);

}

}

});

var vm=new Vue({

el:"#app",

data:{

title: '小胖學(xué)技術(shù)',

jishu:[

"spring",

"springmvc",

"mybatis"]

},

methods:{

removeItems:function (index) {

console.log("刪除了"+this.jishu[index]+"元素");

this.jishu.splice(index,1);

}

}

})

總結(jié)

以上是生活随笔為你收集整理的学java要学vue吗_学vue之前必看的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。