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
TitleYes
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通信
小胖的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: '
});
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: '
});
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);
}
}
})
——SQL注入)
![python实例31[解析buildlog]](http://pic.xiahunao.cn/python实例31[解析buildlog])
上 DNS 不查询非掌管 Domain(域) 的解决办法 －－(转))
![永久勘误:微软等面试100题系列，答案V0.4版[第41-60题答案]](http://pic.xiahunao.cn/永久勘误:微软等面试100题系列，答案V0.4版[第41-60题答案])
