复习
# 1 radio:
-多个radio使用同一个变量，v-model绑定的值就是value的值
-只有一个radio，v-model绑定的值就是true或false
# 2 checkbox:
-多个checkbox使用同一个变量，v-model绑定的值就是value值的数组
-只有一个checkbox，v-model绑定的值就是true或false
# 3 基本的购物车案例
-{{getPrice()}} 只要数据一变化，就会执行---》页面变了，会重新加载
-js的for循环：基于迭代和基于索引---》python只有基于迭代的
# 4 购物车带全选全不选
-又加了一个checkbox，使用的变量是自己的
-给全选全不选的checkbox绑定了一个 change事件
-给单个绑定了一个change事件
# 5 购物车带加减
#6 v-model进阶：lazy，number，trim
# 7 生命周期钩子函数
-8个
-created
-mounted
-setTimeout
-setInterval
# 8 前后端交互
-ajax：jq的ajax，fetch，axios
今日内容
1 计算属性
# 把原来的函数，做成属性，只要原来函数中相关的值变化，属性才重新运算
类似于python的 property 方法可以通过.方法名来调用 类似于属性
1.1案例输入什么以首字母大写形式展现出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
请输入名字:<input type="text" v-model="myName">你的名字是:{{myName}}
<br>
<p>使用函数:{{upperName()}}</p>
<p>使用计算属性:{{getName}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myName: '',
},
methods: {
//这种方法不常用 ，采用字符串截断的方式
upperName() {
return this.myName.substring(0, 1).toUpperCase() + this.myName.substring(1)
}
},
//getName 以后当属性用 类似于python的property方法 把方法变成属性
computed: {
getName() {
return this.myName.substring(0, 1).toUpperCase() + this.myName.substring(1)
}
}
})
</script>
</html>
1.2案例过滤加强版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="myText">
<br>
<ul>
<li v-for="data in newdataList">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'abc', 'abandon', 'c', 'curd', 'd', 'dog', 'doc']
},
computed: {
newdataList() {
return this.dataList.filter(item => {
return item.indexOf(this.myText) > -1
})
}
}
})
</script>
</html>
2 组件化开发之定义局部组件
# 扩展 HTML 元素，封装可重用的代码，目的是复用
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
# 全局组件
# 局部组件
# 总结
1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数
<script>
var vm = new Vue({
el: '.app',
data: {
name: '彭于晏'
},
//局部必须这么写 template里包括一个div
components: {
'children': {
template: `
<div>
<h1 style="background: cornflowerblue">{{name}}</h1>
<child></child>
<hr>
<button @click="handleClick">点我看迪迦</button>
</div>
`,
data() {
return {
name: '迪迦'
}
},
created() {
console.log("我创建了")
},
methods: {
handleClick() {
alert('局部返回弹出来了')
}
},
}
},
})
</script>
3 组件化开发之定义全局组件
// 全局组件
Vue.component('child', {
template: `
<div>
<button @click="handleClick">返回</button>
我是全局组件{{aa}}
<button style="background: red">主页</button>
</div>
`,
//全局属性
data() {
return {
aa: '我是aa'
}
},
//全局方法
methods: {
handleClick() {
alert("全局点击了返回")
}
}
})
4 组件间通信之父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="myText">---->{{myText}}
<children :mytext="myText" :toast="true" aa="true"></children>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: ''
},
components: {
'children': {
template: `
<div>
<h3 style="background: red">{{mytext}}</h3>
<h2>{{toast}}</h2>
<hr>
<button @click="handleClick">点我看美女</button>
</div>
`,
// data() {
// return {}
// },
created() {
console.log("我创建了")
},
methods: {
handleClick() {
alert(this.mytext)
}
},
// props: ['mytext','toast'] // 数组中写自定义属性的名字,在data中不需要再写mytext
}
},
})
</script>
</html>
4.1 属性认证
//props还可以这样用 规定必须是什么类型
props: {
//配置之后才可以用
mytext: String, // myText必须是字符串
toast: Boolean, // 必须是布尔
},
5 组件间通信之子传父 通过自定义事件传递
5.1简介
父子组件和是不是局部组件没有必然联系，父子指的是层级，局部和全局指的是定义位置
5.2子组件传父组件操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
//1.调用子组件
//4.这个事件绑定了一个方法
<child @han="handleClick"></child>
<hr>
{{myText}}
</div>
</body>
<script>
Vue.component('child', {
//2.点击按钮执行handleC方法，目前是在子组件里
template: `
<div>
<button>返回</button>
<span>{{name}}</span>
<button @click="handleC">把name传到父组件</button>
</div>
`,
data() {
return {
name: '我是子组件的name'
}
},
methods: {
//3.执行此方法，$emit 调用父组件的han事件 并传入参数
handleC() {
// 会触发该组件身上的han事件对应的函数执行，参数依次传入
this.$emit('han', this.name,'lqz')
}
}
})
var vm = new Vue({
el: '.app',
data: {
myText: ''
},
methods: {
//5.此方法吧传过来的值复制给了myText 完成了子组件给父组件传值
handleClick(a,b) {
this.myText = a
console.log(b)
}
}
})
</script>
</html>
5.3子组件传父组件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<child @han="handleClick"></child>
<hr>
{{myText}}
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<button>返回</button>
<span>{{name}}</span>
<button @click="handleC">把name传到父组件</button>
</div>
`,
data() {
return {
name: '我是子组件的name'
}
},
methods: {
handleC() {
// 会触发该组件身上的han事件对应的函数执行，参数依次传入
this.$emit('han', this.name,'lqz')
}
}
})
var vm = new Vue({
el: '.app',
data: {
myText: ''
},
methods: {
handleClick(a,b) {
this.myText = a
console.log(b)
}
}
})
</script>
</html>
6 ref属性
ref放在标签上，拿到的是原生节点,原生节点的属性，通过 . 获取到了
ref放在组件上，拿到的是组件对象,
通过这种方式实现子传父（this.$refs.mychild.text）
通过这种方式实现父传子（调用子组件方法传参数）
8 动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<ul>
<li @click="who='home'">首页</li>
<li @click="who='shopping'">购物</li>
<li @click="who='my'">我的</li>
</ul>
<keep-alive>
<component :is="who"></component>
</keep-alive>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
我是：{{name}}
</div>`,
data() {
return {
name: '首页'
}
}
})
Vue.component('shopping', {
template: `
<div>
我是：{{name}}
<br>
购买的商品：<input type="text" v-model="list">--->{{list}}
</div>`,
data() {
return {
name: '购物',
list: ''
}
}
})
Vue.component('my', {
template: `
<div>
我是：{{name}}
</div>`,
data() {
return {
name: '我的'
}
}
})
var vm = new Vue({
el: '.app',
data: {
who: 'home'
},
})
</script>
</html>