双向绑定
vue.js是mvvm框架,即双向数据绑定,当数据发生改变时,视图会随之发生改变,而视图发生改变时,数据也应当随之发生改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
输入的文本为:<input type="text" v-model='message'>{{message}}
<select v-model='select'>
<!-- 苹果手机当下拉框第一项为空时,将无法选择,因此需要增加一个默认项 -->
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Value:{{select}}</span>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:'',
select:'',
},
})
</script>
</body>
</html>
组件
组件vuejs和vue的区别是可复用的Vue实例,即自定义标签,通过数据绑定,实现参数传递问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<test v-for= "total in totals" v-bind:item="total"></test>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>
<script>
Vue.component("test",{
props: ['item'],
template: '<li>{{item.text}}</li>'
})
var vm = new Vue({
el:"#app",
data:{
totals:[
{text:'学习'},
{text:'Vue'},
{text:'组件'}
]
},
})
</script>
</body>
</html>
Axions异步通信
获取数据
var vm = new Vue({
el:"#vue",
mounted(){ //钩子函数
axios.get('json文件').then(response=>(得到数据后将发生的事))
}
})
返javascript回数据
<div id="vue">
<div>
{{info.name}}
</div>
<a v-bind:href="https://blog.51cto.com/u_15489116/4942523/info.url"></a>
</div>
var vm = new Vue({
el:"#vue",
data(){
return{
info:{}
}
}
mounted(){ //钩子函数
axios.get('json文件').then(response=>(this.info=response.data))
}
})
计算属性
能够将计算结果缓存
调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>
{{dataTime()}}
</p>
<!-- 此时将会输出一个时间戳 -->
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
methods:{
dataTime:function(){
return Date.now()
},
},
computed:{
dataTime:fucntion(){
return Date.noe()
}
}
})
//methods和computed的区别在于一个是属性,一个是方法
</script>
</body>
</html>
计算属性的特点:将不经常变化的计算结果进行缓存,节约开销
solt
插槽,在封装的标签中留下数据插口,便于数据的动态插入,新版Vue已经使用v-solt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<test>
<test-title slot="test-title" :title="title"></test-title>
<test-titles slot="test-titles" v-for="iteam in iteams" :iteam="iteam"></test-titles>
</test>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>
<script>
Vue.component("test",{
template: '<div>\
<slot name="test-title"></slot>\
<ul>\
<slot name="test-titles"></slot>\
</ul>\
</div>'
})
Vue.component("test-title",{
props:['title'],
template:'<div>{{title}}</div>'
})
Vue.component("test-titles",{
props:['iteam'],
template:'<li>{{iteam}}</li>'
})
var vm = new Vue({
el:"#app",
data:{
title:"一个尝试",
iteams:['幸苦','测试','心累']
},
methods:{
dataTime:function(){
return 15
},
}
})
</script>
</body>
</html>
删除元素
splice()
js删除数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<test>
<test-title slot="test-title" :title="title"></test-title>
<!-- 双引号中的数据是对象的数据 -->
<test-titles slot="test-titles" v-for="(iteam,index) in iteams" :iteam="iteam" :index="index" v-on:remove="removed(index)"></test-titles>
</test>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>
<script>
Vue.component("test",{
template: '<div>\
<slot name="test-title"></slot>\
<ul>\
<slot name="test-titles"></slot>\
</ul>\
</div>'
})
Vue.component("test-title",{
props:['title'],
template:'<div>{{title}}</div>'
})
Vue.component("test-titles",{
props:['iteam','index'],
template:'<li>{{iteam}} <button @click="remove">删除</button></li>',
methods:{
remove:function(index){
this.$emit('remove',index) //子组件通过$emit触发父组件的自定义事件,父组件通过props将数据传递给子组件
}
}
})
var vm = new Vue({
el:"#app",
data:{
title:"一个尝试",
iteams:['幸苦','测试','心累']
},
methods:{
dataTime:function(){
return 15
},
removed:function(index){
this.iteams.splice(index,1)
}
}
})
</script>
</body>
</html>
vue-cli
是官方提供的一个脚手架,用于快速生成一个vue的项目模板
主要功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
创建一个Vue项目
超详细博客
vue init webpack hello-vue(项目名)
Webp数据废土ack
什么是Webpack
是一个js的静态模块打包器,会递归地构建一个依赖关系图
建议多看几次
Vue:v数据漫游uhtml文件怎么打开e-routvue.js论文er路由
是vue的官方路由器,配置方式
建议多看几次
发表评论