vue学习之路（2）
双向绑定
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test5</title>
</head>
<body>
<div id="app">
{{message}}
<input v-model="message"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'hello许佳琪'
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
</head>
<body>
<div id="app">
<h2>输入框</h2>
<input v-model="message"/>
{{message}}
<br>
<h2>单选框</h2>
性别：
<input type="radio" name="sex" value="男" v-model="selectSex" />男
<input type="radio" name="sex" value="女" v-model="selectSex" />女
选中的性别：{{selectSex}}
<br>
<h2>下拉框</h2>
<select v-model="selected">
//如果v-model初始值没有匹配任何选项
//select会渲染成未选中状态
<option value ="" disabled="">--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
选中的为：{{selected}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'hello',
selectSex:'',
selected:''
},
});
</script>
</body>
</html>
组件
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test2-组件</title>
</head>
<body>
<div id="app">
<test v-for="item in items" v-bind:heihei="item"></test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个组件
Vue.component("test",{
props:['heihei'],
template:'<li>{{heihei}}</li>'
});
var vm = new Vue({
el: '#app',
data: {
items:['java','linux','C']
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test2-组件</title>
</head>
<body>
<div id="app">
<ol>
<test v-for="item in groceryList" v-bind:todo='item' v-bind:key='item.id'></test>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.定义一个组件 test-名字 后面为具体对象
//2.定义模块
Vue.component("test",{
props:['todo'],
template:'<li>{{todo.text}}</li>'
});
var vm = new Vue({
el: '#app',
data: {
groceryList:[
{ id: 0,text: '蔬菜'},
{ id: 1,text: '麻辣王子'},
{ id: 2,text: '小浣熊'}
]
},
});
</script>
</body>
</html>
Axios通信
网址：Axios官网
什么是Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test4-Axios</title>
</head>
<!-- v-clock:解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
<body>
<div id="app" v-cloak>
<div>姓名:{{info.name}}</div>
<div>街道:{{info.address.street}}</div>
<a v-bind:href="info.url">clickMe</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data(){
//请求的返回参数格式与json字符串一致
return{
info:{
name: null,
url: null,
page: null,
address: {
street: null,
city: null,
country: null
}
}
}
},
mounted(){//钩子函数 链式编程 ES6新特性
axios.get('data.json').then(response=>(this.info = response.data));
}
})
</script>
</body>
</html>
Vue实例的生命周期
计算属性—缓存 Computed
计算属性的特性是为了将不经常变化的结算结果进行缓存，节约系统开销。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test5-计算属性</title>
</head>
<body>
<div id="app">
<p>当前时间： {{sayHello()}}</p>
<p>当前时间：{{sayHello1}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
sayHello: function() {
return Date.now()
}
},
computed:{
//computed与method里面的方法不能重名
//优先级：methods>computed
sayHello1: function() {
return Date.now()
}
}
})
</script>
</body>
</html>
区别：
methods:
computed:
computed是直接从内存里面获取值，如果computed里面的数据被刷新，则会刷新。虚拟Dom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test5-计算属性</title>
</head>
<body>
<div id="app">
<p>当前时间： {{sayHello()}}</p>
<p>当前时间：{{sayHello1}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
sayHello: function() {
return Date.now()
}
},
computed:{
//computed与method里面的方法不能重名
//优先级：methods>computed
sayHello1: function() {
this.message;
return Date.now()
}
}
})
</script>
</body>
</html>
Slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test6-slot</title>
</head>
<body>
<div id="app">
<todo>
<todo-titile slot="todo-title" :title="title"></todo-titile>
<todo-items slot="todo-items" v-for="item in city" :item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/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-titile', {
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component('todo-items', {
props: ['item'],
template: '<li>{{item}}</li>'
})
var vm = new Vue({
el: '#app',
data: {
title: '浙江',
city: ['杭州', '临海', '乌镇']
}
})
</script>
</body>
</html>
先定义三个组件，哪里需要slot则加上slot即可，对应的数据则在props里面定义即可；props里面的数据则从data里面获取，而slot之间的联系则通过slot标签里面的name去绑定，view层绑定值则照旧。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
