一. 计算属性
1.1. 计算属性的本质
fullname: {set(), get()}
计算属性不加动词，一般不用set(),为只读属性。
computed
:{
fullName
:{
get:function () {
return this.firstName
+' '+this.lastName
}
}
})
1.2. 计算属性和methods对比
计算属性computed在多次使用时, 只会调用一次。methods每次值更新都会调用computed是有缓存的
二. 事件监听
2.1. 事件监听基本使用
v-on: 语法糖 @：
2.2. 参数问题
btnClick
无参数时默认传入event事件
btnClick(event)
btnClick(abc, event) -> $event
2.3. 修饰符
stopprevent.enter.once.native
<div id
="app">
<!-- .stop阻止冒泡
-->
<div @click
="divClick">
<button @click
.stop
="btnClick">按钮
</button
>
</div
>
<br
>
<!-- prevent阻止默认事件
-->
<form action
="baidu">
<input type
="submit" value
="提交" @click
.prevent
="submitClick">
</form
>
<!-- 监听某个键盘的操作
-->
<input type
="text" @keyup
.enter
="keyUp">
<!-- .once修饰符的使用
-->
<button @click
.once
="btn2Click">按钮
2</button
>
</div
>
三. 条件判断
3.1. v-if/v-else-if/v-else
略
3.2. 登录小案例
<div id
="app">
<span v
-if="isUser">
<label
for="username">用户账号
</label
>
<input type
="text" id
="username" placeholder
="请输入账号">
</span
>
<span v
-else>
<label
for="email">用户邮箱
</label
>
<input type
="text" id
="email" placeholder
="请输入邮箱">
</span
>
<button @click
="isUser=!isUser">切换类型
</button
>
</div
>
<script src
="../js/vue.js"></script
>
<script
>
const app
=new Vue({
el
: '#app',
data
:{
isUser
:true,
}
})
</script
>
3.3. v-show
v-show和v-if区别
<!-- v
-if当条件为
false时，不会存在Dom中
-->
<h2 v
-if="isShow" id
="aaa">{{message
}}</h2
>
<!-- V-show只是给元素添加了行内样式：dispaly
:none
-->
<!-- V-show并不会消失，其依旧存放在Dom中
-->
<h2 v
-show
="isShow" id
="bbb">{{message
}}</h2
>
四. 循环遍历
4.1. 遍历数组
v-for自带index下标
<div id
="app">
<ul
>
<li v
-for="item in letters" :key
="index">{{item
}}</li
>
</ul
>
</div
>
<script
>
const app
=new Vue({
el
: '#app',
data
:{
letters
:['A','B','C','D','E']
}
})
</script
>
4.2. 遍历对象
valuevalue, keyvalue, key, index
4.3. 数组哪些方法是响应式的
1.push方法
this.letters
.push('aaa')
2.通过索引值修改数组中的元素(不响应
this.letters
[1]='bbb';
3.pop() 删除最后元素 响应
4.shift() 删除第一元素 响应
5.unshift() 在数组最前面添加元素 响应
6.splice(start
,start
+X,追加元素值
) 删除\替换\插入元素 响应
7.sort() 排序 响应
8.reverse() 反转 响应
9.set(要修改的对象
,索引值
,修改后的值
)
4.4. 作业完成
题目：点哪哪亮
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" //关键点：传入index索引
:class="{active: currentIndex === index}"
@click="currentIndex=index">
{{index}}--{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el: '#app',
data:{
movies:['海王','海贼王','加勒比海盗','海尔兄弟'],
currentIndex:0
}
})
</script>
五. 书籍案例
六. v-model的使用
6.1. v-model的基本使用
v-model <=> v-bind:value && v-on:input
6.2. v-model和radio/checkbox/select
6.3. 修饰符
lazy：失去焦点后更新number：指定数字类型trim：修剪空格
七. 组件化开发（重点）
7.1. 认识组件化
组件化实现组件模块复用
7.2. 组件的基本使用
<script>
const cpnC=Vue.extend({
template:` //使用` `可换行
<div>
<h2>我是标题</h2>
<h2>我是内容AAA</h2>
<h2>我是内容BBB</h2>
</div>`
})
Vue.component('my-cpn',cpnC)
const app=new Vue({
el: '#app',
data:{
message: '你好啊'
}
})
</script>
7.3. 全局组件和局部组件
<script>
const cpnC=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容AAAA</p>
</div>
`
})
Vue.component('cpn',cpnC)
const app=new Vue({
el: '#app',
data:{
message: '你好啊'
},
components:{
cpn:cpnC
}
})
</script>
7.4. 父组件和子组件
<script>
const cpnC1=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>哈哈哈哈哈哈</p>
</div>
`
})
const cpnC2=Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>呵呵呵呵呵呵</p>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
const app=new Vue({
el: '#app',
data:{
message: '你好啊'
},
components:{
cpn2:cpnC2
}
})
</script>
7.5. 注册的语法糖
<script>
Vue.component('cpn1',{
template:`
<div>
<h2>我是标题2</h2>
<p>呵呵呵呵呵呵</p>
</div>
`
})
const app=new Vue({
el: '#app',
data:{
message: '你好啊'
},
components:{
'cpn2':{
template:`
<div>
<h2>我是标题2</h2>
<p>呵呵呵呵呵呵</p>
</div>
`
}
}
})
</script>
7.6. 模板的分类写法
script
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>
</script>
template
<template id="cpn2">
<div>
<h2>我是标题2
</h2>
<p>呵呵呵呵呵呵
</p>
</div>
</template>
template:’#ID’
Vue.component('cpn',{
template: '#cpn2',
})
7.7. 数据的存放
子组件不能直接访问父组件子组件中有自己的data, 而且必须是一个函数.为什么必须是一个函数.
7.8. 父子组件的通信
父传子: props
<script>
const cpn={
template:'#cpn',
props:{
cmessage:{
type:String,
default:'aaaaaaaa'
},
cmovies:{
type:Array,
default:[],
}
},
data(){
return{}
},
methods:{}
}
const app=new Vue({
el: '#app',
data:{
message: '你好啊',
movies:['海王','海贼王','海尔兄弟']
},
components:{
cpn
}
})
</script>
使用：
<div id="app">
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}
</li>
</ul>
<h2>{{cmessage}}
</h2>
</div>
</template>
子传父: $emit
<script>
const cpn={
template:'#cpn',
data(){
return{
categories:[
{id:'aaa',name: '热门推荐'},
{id:'bbb',name: '手机数码'},
{id:'ccc',name: '家用家电'},
{id:'ddd',name: '电脑办公'}
]
}
},
methods:{
btnClick(item){
this.$emit('itemclick',item)
}
}
}
const app=new Vue({
el: '#app',
data:{
info:{
name:'why',
age:18,
height:1.88
},
message:'aaaaaa'
},
components:{
cpn
},
methods: {
cpnClick(item){
console.log('clickhappen',item);
}
}
})
</script>
