复习

# 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案例输入什么以首字母大写形式展现出来

    
    
    



    请输入名字:你的名字是:{{myName}}
    

    
使用函数:{{upperName()}}
    
使用计算属性:{{getName}}

1.2案例过滤加强版

    
    
    



    
    

    

        
{{data}}
    

2 组件化开发之定义局部组件

# 扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html
# 全局组件
# 局部组件

# 总结
1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数

3 组件化开发之定义全局组件

  // 全局组件
    Vue.component('child', {
        template: `
            

                返回
                我是全局组件{{aa}}
                主页
            

        `,
        //全局属性
        data() {
            return {
                aa: '我是aa'
            }
        },
        //全局方法
        methods: {
            handleClick() {
                alert("全局点击了返回")
            }
        }
    })

4 组件间通信之父传子

    
    
    




    ---->{{myText}}

    

4.1 属性认证

//props还可以这样用 规定必须是什么类型
                props: {
                    //配置之后才可以用
                    mytext: String, // myText必须是字符串
                    toast: Boolean, // 必须是布尔
                },

5 组件间通信之子传父 通过自定义事件传递

5.1简介

父子组件和是不是局部组件没有必然联系，父子指的是层级，局部和全局指的是定义位置

5.2子组件传父组件操作

    
    
    



    //1.调用子组件
    //4.这个事件绑定了一个方法
    
    

    {{myText}}

5.3子组件传父组件案例

    
    
    



    
    

    {{myText}}

6 ref属性

ref放在标签上，拿到的是原生节点,原生节点的属性，通过 . 获取到了
ref放在组件上，拿到的是组件对象,
	通过这种方式实现子传父（this.$refs.mychild.text）
  	通过这种方式实现父传子（调用子组件方法传参数）

8 动态组件

    
    
    




    

        
首页
        
购物
        
我的