Vue学习
1.1 vue.js是什么？
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.2 hello Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
{{messages}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
messages:"hello vue"
}
})
</script>
</body>
</html>
还可以通过v-bind绑定元素
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<span v-bind:title="messages">
鼠标停在我的上面看看
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
messages:"hello vue"
}
})
</script>
</body>
</html>
1.3判断和循环
判断if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="seen">Yes</h1>
<h1 v-else>No</h1>
</div>
<div id="app2">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
seen: true
}
})
var vm2=new Vue({
el:"#app2",
data:{
type: 'A'
}
})
</script>
</body>
</html>
循环for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[
{message: '前端'},
{message: '后端'},
{message: '运维'}
]
}
})
</script>
</body>
</html>
1.4 methods事件(单向绑定 v-on)
<div id="app">
<button v-on:click="SayMessage">Click Me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message: '小胖学java'
},
methods:{ //方法定义在methods中，v-on绑定事件
SayMessage: function () {
alert(this.message)
}
}
})
</script>
1.5双向绑定(v-model)
<div id="app">
请输入：<input type="text" v-model:value="message"/>
<br/>
内容为：{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message: ''
}
})
</script>
下拉框的双向绑定
<div id="app">
<select v-model="message">
<option disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br/>
选了:{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message: ''
}
})
</script>
1.6Vue组件
<div id="app">
<jinhao v-for="item in items" v-bind:value="item"></jinhao>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("jinhao",{
props:['value'],
template:'<li>{{value.message}}</li>'
})
var vm=new Vue({
el:"#app",
data:{
items:[
{message: '前端'},
{message: '后端'},
{message: '运维'}
]
}
})
</script>
1.7axios通信
<div id="app">
<div>{{info.name}}</div>
<div>{{info.address.city}}</div>
<a v-bind:href="info.url">小胖的Java博客</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
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));
}
})
</script>
1.7 计算属性Computed
<div id="app">
<h1>{{cruuentTime1()}}</h1>
<h1>{{cruuentTime2}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
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();
}
}
})
</script>
1.8组件插槽 slot
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in jishu" v-bind:value="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('todo',{
template: '<div>' +
'<slot name="todo-title"></slot>'+
'<ul>'+
'<slot name="todo-items"></slot>'+
'</ul>'+
'</div>'
});
Vue.component('todo-title',{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component('todo-items',{
props:['value'],
template: '<li>{{value.java}}</li>'
});
var vm=new Vue({
el:"#app",
data:{
title: '小胖学技术',
jishu:[
{java: "spring"},
{java: "springmvc"},
{java: "mybatis"}
]
}
})
</script>
1.9自定义事件内容分发
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in jishu" v-bind:value="item"
v-bind:index="index" v-on:remove="removeItems" v-bind:key="index"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('todo',{
template: '<div>' +
'<slot name="todo-title"></slot>'+
'<ul>'+
'<slot name="todo-items"></slot>'+
'</ul>'+
'</div>'
});
Vue.component('todo-title',{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component('todo-items',{
props:['value','index'],
template: '<li>{{index}}---{{value}} <button v-on:click="remove">删除</button></li>',
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);
}
}
})
</script>