学java要学vue吗-凯发ag旗舰厅登录网址下载

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

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

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);

}

}

})

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的学java要学vue吗_学vue之前必看的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。