一:vue特点
- 单页面应用
- 组件化开发
- 组建的重用性
- 开发便捷
二:MVVM 双向数据绑定
M:(model)数据
V:(view)视图 指的就是看到的页面
VM:(viewmodel)视图模型 是MVVM模式的核心 是连接view和model的桥梁
有两种方法
- 一个是将视图转换成数据模型,将看到的页面转换成后端数据,实现方式:dom监听
- 另一种是将模型转换成视图页面,实现方式:数据绑定
总结:在MVVM中,模型视图是不能直接进行交互的 ,必须通过viewmodel进行通信,当数据发生变化的时候,viewmodel能够监听数据的变化然后对视图进行更新,当视图发生变化的时候,viewmodel也能监听视图的变化通知数据的改变,这句就是所谓的双向数据绑定
三:vue属性
el:
只在new实例时创建
new Vue({
el:"#id"||".class" ||HTMLElement
})
data
这里面的data是用来存放数据的 ,用来组织从view对象中抽象出来的属性,讲视图的数据抽象出来存放在data中
<template>
<div id="app >
段落:{{this.title}}
</div>
</template>
<script>
export default {
name: "app",
components: {},
// 这里面的data指的是当前vue的一个属性 里面的函数指的是vue返回的一个对象
data: function() {
return {
title: "登录/注册",
};
},
</script>
mothods
放置页面中的业务逻辑,js方法一般都放置在methods中, 事件方法 调用一次,执行一次,结果不会缓存
注意,不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.a
将是 undefined。
// 业务逻辑相关方法都要写在method里面
<template>
<div>
<p class="title">{{title}}</p>
<p v-on:click="onClick">{{info}}</p>
</div>
</template>
<script>
export default {
//类型:定义在组件中,必须为函数类型\
//作用:抽象view也就是页面显示数据,存放在data中,把view抽象成model
data(){
return{
title:"学习vue.js",
info:"点击一下",
}
},
template:"<p>我是template</p>",
//保存组件的业务逻辑函数
methods:{
onClick:function(){
this.info = "我被点击了";
// return this.info;
}
}
}
</script>
template
用来设置模板,替换页面元素,相当于一个占位符
<body>
<div class="div">
11111
</div>
</body>
<script>
new Vue({
el:".div",
data:{
msg:"我是一条信息"
},
template:"<p>{{msg}}</p>",
})
</script>
computed 计算属性
计算属性需要用到data里面的数据,当依赖值发生变化的时候计算属性也会重新计算,计算结果会被缓存
<div class="div">
<p>{{message}}</p>
<p>{{reversedMessage}}</p>
<button v-on:click="onClick"></button>
</div>
<script>
var vm = new Vue({
el: '.div',
data: {
message: 'Hello'
},
methods:{
onClick(){
this.message+="aaa"
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
window.console.log("1111111")
return this.message.split('').reverse().join('')
}
}
})
</script>
watch属性
watch用来监听data的变化,一个值的改变另一个值也会随着改变,计算结果不会被缓存。
//为data中选项添加观察,当data中的选项数据发生变化,watch将会触发
watch:{
message:function(newValue,oldValue){
window.console.log(`新值${newValue},旧值${oldValue}`);
},
title:"handleTitleChange",
item:{
handler:function(newValue,oldValue){
window.console.log(`新值${newValue},旧值${oldValue}`);
},
deep:true
},
change:[
function(){
window.console.log("change改变1")
},
"change2"
]
}
过滤属性 filter
过滤属性 过滤器就是对显示的值进行进一步的改变,不会改变原来的数据,只是在与原来数据的基础上对数据进行进一步的处理,下面是一个局部引用的实例:
new Vue({
el: '#app',
data: {
time: Date.now()
},
filters: { //过滤器的配置项
'timeFilter': function ( val,type ){
var date = new Date ( val )
return date.getFullYear() + type + ( date.getMonth() + 1 )
+ type + date.getDate()
}
}
})