# 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 计算属性
# 把原来的函数，做成属性，只要原来函数中相关的值变化，属性才重新运算，提高效率
关键字：computed
1.1首字母大写
<!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="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)
}
},
computed:{
// getName 以后当属性用
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
# 全局组件
# 局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<div id="app">
# 局部组件（components）
<child></child>
</div>
<body>
<script>
var vm = new Vue({
el:'#app',
data:{},
components:{
'child':{
# 注意：自定义组件需要有一个root element，一般包裹在一个div中
template:`
<div>
<h2>{{name}}</h2>
<hr>
<button @click="handclick">点我要你好看</button>
</div>`,
# 注意：组件里的data必须是函数
data(){
return {
name:'lhs'
}
},
methods:{
handclick() {
alert('点到你了')
}
}
}
}
})
</script>
</body>
</html>
# 总结
1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数
3 组件化开发之定义全局组件
# Vue.component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<div id="app">
<child></child>
<hr>
<children></children>
</div>
<body>
<script>
//全局组件
Vue.component('children',{
template: `
<div>
<button @click="handclick1">返回</button>
{{name}}
<button>主页</button>
</div>
`,
data(){
return {
name:'主页'
}
},
methods: {
handclick1(){
this.name='返回'
}
}
})
var vm = new Vue({
el:'#app',
data:{},
// 局部组件
components:{
'child':{
template:`
<div>
<h2>{{name}}</h2>
<hr>
<button @click="handclick">点我要你好看</button>
</div>`,
data(){
return {
name:'lhs'
}
},
methods:{
handclick() {
alert('点到你了')
}
}
}
}
})
</script>
</body>
</html>
4 组件间通信
1 父子组件传值 (props down, events up)
2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)
3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件
4 Ref<input ref="mytext"/> this.$refs.mytext
5 事件总线var bus = new Vue();* mounted生命周期中进行监听
4.1组件间通信之父传子
# 通过自定义属性实现
<!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>
# 注： :toast="true"是布尔类型 aa="true"是一个字符串
</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可是是数组也可以是一个对象
props: ['mytext','toast'] // 数组中写自定义属性的名字,在data中不需要再写mytext
},
}
},
})
</script>
</html>
4.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">---->{{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
props: {
mytext: String, // myText必须是字符串
toast: Boolean, // 必须是布尔
},
}
},
})
</script>
</html>
5 组件间通信之子传父
# 通过自定义事件传递
<!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通过子传父控制字组件显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
普通方式
<button @click="isShow=!isShow">点击隐藏显示</button>
<navbar v-show="isShow"></navbar>
<hr>
字传父方式
<mybutton @myevent="handleShow"></mybutton>
<navbar v-show="isShow"></navbar>
</div>
</body>
<script>
Vue.component('mybutton', {
template: `
<div>
<button @click="handleClick">点我隐藏显示</button>
</div>
`,
methods: {
handleClick() {
this.$emit('myevent')
}
}
})
Vue.component('navbar', {
template: `
<div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
`,
data() {
return {
name: 'lqz'
}
},
methods: {
handleEvent() {
// this.$emit('myevent') //myevent:子组件中监听自定义事件
this.$emit('myevent', 100) //100表示传递的参数
}
}
})
var vm = new Vue({
el: '#box',
data: {
isShow: true
},
methods: {
handleShow() {
this.isShow=!this.isShow
}
}
})
</script>
</html>
7ref属性
ref放在标签上，拿到的是原生节点,原生节点的属性，通过 . 获取到了
ref放在组件上，拿到的是组件对象,
通过这种方式实现子传父（this.$refs.mychild.text）
通过这种方式实现父传子（调用子组件方法传参数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<div id="app">
# <h1>放在普通标签上</h1>
<input type="text" v-model="mytest" ref="myinput">===>{{mytest}}
<button @click="handclick" ref="mybutton">点我</button>
<hr>
# <h1>放在组件上</h1>
<button @click="handclick1">点我看帅哥</button>
<children ref="mychild"></children>
</div>
<body>
<script>
Vue.component('children',{
template:`
<div>
<button>前进</button>
{{name}}
<button>后退</button>
</div>
`,
data(){
return {
name:'主页'
}
},
})
var vm = new Vue({
el:'#app',
data:{
mytest:''
},
methods:{
handclick(){
console.log(this.$refs)
console.log(this.$refs.myinput)
console.log(this.$refs.myinput.value)
},
handclick1(){
this.$refs.mychild.name='帅哥'
}
}
})
</script>
</body>
</html>
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>
