学java要学vue吗_学vue之前必看

Vue学习

1.1 vue.js是什么？

​ Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 hello Vue

Vue

{{messages}}

var vm=new Vue({

el:"#app",

data:{

messages:"hello vue"

}

})

还可以通过v-bind绑定元素

Vue

鼠标停在我的上面看看

var vm=new Vue({

el:"#app",

data:{

messages:"hello vue"

}

})

1.3判断和循环

判断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'

}

})

循环for

Title

{{item.message}}

var vm=new Vue({

el:"#app",

data:{

items:[

{message: '前端'},

{message: '后端'},

{message: '运维'}

]

}

})

1.4 methods事件(单向绑定 v-on)

Click Me

var vm=new Vue({

el:"#app",

data:{

message: '小胖学java'

},

methods:{ //方法定义在methods中，v-on绑定事件

SayMessage: function () {

alert(this.message)

}

}

})

1.5双向绑定(v-model)

请输入：

内容为：{{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: '运维'}

]

}

})

1.7axios通信

{{info.name}}

{{info.address.city}}

小胖的Java博客

var vm=new Vue({

el:"#app",

//data属性 vm

data(){

return {

//请求返回合适的参数，必须和json一样

info: {

name: null,

url: null,

address: {

street: null,

city:null

}

}

}

},

mounted(){

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

}

})

1.7 计算属性Computed

{{cruuentTime1()}}

{{cruuentTime2}}

var vm=new Vue({

el:"#app",

data:{

merssage: "wo"

},

methods: {

cruuentTime1: function () {

return Date.now();

}

},

computed:{

cruuentTime2: function () {

//如果computed中的数据发生了改变，就是merssage变了，返回值return也会发生改变

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: '小胖学技术',

jishu:[

{java: "spring"},

{java: "springmvc"},

{java: "mybatis"}

]

}

})

1.9自定义事件内容分发

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: '小胖学技术',

jishu:[

"spring",

"springmvc",

"mybatis"]

},

methods:{

removeItems:function (index) {

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

this.jishu.splice(index,1);

}

}

})