1.购物车案例

1.1 基本购物车

    
    
    
    



    
购物车
    

        

            
商品名称
            
价格
            
数量
            
选择
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.number}}
            

        
    

    选中的商品是：{{choice}}
    

    商品价格：{{getPrice()}}

1.2 全选全不选

    
    
    
    




    
购物车
    

        

            
商品名称
            
价格
            
数量
            
选择 
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.number}}
            

        
    
    选中的商品是：{{choice}}
    

    商品价格：{{getPrice()}}

1.3 数量加入加减

    
    
    
    



    
购物车
    

        

            
商品名称
            
价格
            
数量
            
选择 
        
        

            
{{item.name}}
            
{{item.price}}
            
-{{item.number}}+
            

        
    
    选中的商品是：{{choice}}
    

    商品价格：{{getPrice()}}

2.v-model进阶

# v-model的修饰符
    lazy：等待input框的数据绑定后，发生改变后再变化
    number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
    trim：去除首尾的空格

    
    
    





    trim的使用： {{msg}}

3.生命周期钩子

beforeCreate	创建Vue实例之前调用
created  	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）  ******
beforeMount	渲染DOM之前调用
mounted	        渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	        重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用


# 重点：
1 created：在这个里面向后端发送请求，获取数据
2 mounted：
    2.1 定时任务 每隔3s执行一次
       this.t = setInterval(function () {
                    console.log('daada')
                }, 3000)

    # 定时操作的应用场景：可以设置成 间隔不断的 朝后端发送 http请求，以达到实时更新的情况。******
    
    2.2 延迟任务(3s后执行该任务)
    setTimeout( ()=> {
                console.log('3s后执行')
                    # 3s后执行这个代码
                }, 3000)
       
3 destroyed:
    3.1关掉定时器
    	clearInterval(this.t)
        t= null # 保险起见，并把定时器设置空

4.发送ajax请求

# axios: 第三方模块，专门发送Ajax请求
	是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
    
# 语法
 axios
    .get('http://127.0.0.1:5000/')
    .then( response => (this.info = response )  // 请求成功处理  (响应回来的是对象，数据在.data中)
    .catch( function (error) { // 请求失败处理
        console.log(error);
      }) 

    
    
    
    



点我看美女
    

    我的名字是：{{name}}
    

    我的年龄是：{{age}}






# 允许跨源访问--添加响应头
response["Access-Control-Allow-Origin"] = "*"

4.1 加载电影

    
    
    
    



    

        

            
电影标题：{{item.name}}
            
电影主演：{{item.director}}
                        
        
    

5.计算属性

# 格式：
computed:{
	方法函数
	}

# 计算属性 Vs 方法 ：
    不同的是计算属性是基于它们的响应式依赖进行缓存的。
    只在相关响应式依赖发生改变时它们才会重新求值。
    这就意味着只要变量还没有发生改变，多次访问 该计算属性会立即返回之前的计算结果，而不必再次执行函数。

5.1 基本使用

    
    
    





    
    

    1.直接在插值中写代码:
    {{msg.substring(0,1).toUpperCase()+msg.substring(1)}}
    
 
    
    2.写成一个函数:
    {{getMsg()}}

    {{getMsg()}}
    

    
    3.使用计算属性
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}
    {{getCMsg}}

5.2 重写过滤案例

    
    
    



    
    
{{item}}

6.组件化开发

# 1.自定义组件需要有一个根标签 (root element)，一般包裹在一个div中

# 2.父子组件的data是无法直接共享 (需要通过其他方法)

# 3.组件可以有data，methods,computed....,但是data 必须是一个函数, 且必须是 return

# 4.组件名两种：驼峰体和短横线 都可以，但短横线(推荐，最好)
    eg: Vue.component('my-component-name', { /* ... */ })

6.1 全局组件

6.2 局部组件

6.3 动态组件

在一个多标签的界面中使用 is 属性 来切换不同的组件

# 通过指定 component标签的 is属性值，实现显示某个组件
     

    
    
    



    首页  
    美女  
    帅哥
    


    

6.4 keep-alive的使用

当在多个组件之间切换的时候，你有时会想保持这些组件的状态，
以避免反复重新渲染导致的性能问题，失活的组件所有内容将会被缓存

# 用一个 元素将其动态组件包裹起来。

    



# 注意这个 要求被切换到的组件都有自己的名字

7.组件通信

7.1 组件通信之父传子（通过自定义属性）

# 1.在子组件使用中：子组件上自定义属性，通过 属性指令 绑定好父组件的数据变量
    eg： :mymsg="msg"
        
# 2.在子组件定义中：在props方法中注册该属性
    eg: props:['mymsg','age'] 
	
    # Prop验证： props 也可以是对象，key为属性名，value为属性的类型
        eg: props：{mymsg:String}
            
# 3.在子组件定义中：template 就可以使用 该属性变量
	eg: {{mymsg}}
        
        
# 注意：
    HTML中的属性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
    这意味着当你使用DOM中的模板时，驼峰体命名的prop名，属性必须使用其等价的 短横线分隔命名：
    
    
    
    Vue.component('blog-post', {
      props: ['postTitle'],
      template: '
{{ postTitle }}
'
    })

    
    
    




    # 1.在组件上自定义属性，属性指令绑定好变量
    

    
    

7.2 父子通信之子传父(通过自定义事件)

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
    思路：通过子组件触发父组件事件的执行,从而执行父组件事件对应的方法函数 (同时，也可以把子组件中的数据变量传入到父组件事件对应的方法上)

# 监听和触发事件的方法
    使用 $on(eventName)  简写： @事件名   监听事件
    使用 $emit(eventName)               触发事件


# 自定义事件 命名：
    始终使用 kebab-case
    
# 步骤：
    # 1.父组件通过自定义事件,绑定方法
        
    
    # 2.子组件触发父组件事件的执行,把子组件中的变量b，传入到父组件事件对应的方法上
        this.$emit('myevent',this.b)

    
    
    




    

	# 1.父组件通过自定义事件,绑定方法
    
    

7.3 ref属性

# Vue支持：给所有的标签，提供ref属性
    ref= '属性值'

# Vue中 就可以通过 this.$refs.属性值 拿到

    -若ref在普通标签上，拿到的就是普通标签本身
    -若ref在子组件上，拿到的就是子组件对象
    	-通过组件对象，可直接获取，修改属性
        -直接执行方法，传值，返回值

    
    
    




    
    

    
    


    点我试一下

8.vue脚手架

# 脚手架的含义：就是一个写好空模板的vue框架，我们只需填写自己的内容即可


# node的安装，官方下载，一路下一步
    -node === python
    -npm  === pip
    
# 使用npm安装第三方模块，速度慢一些，换成淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后用cmpm代替npm的使用


# 安装脚手架：
    cnpm install -g @vue/cli   (-g 是全局安装的意思)

# 创建vue项目
    vue create 项目名
    
    # 选择-自定义创建项目
    	-Choose Vue version  选择版本
        -Babel    语法兼容
        -Router   路由(常用)
        -Vuex     状态管理器
        选项由空格选中
        
        -选择 In.package.json

# 图形化界面创建vue项目
    vue ui