• Vue 组件
  • axios实现数据请求
  • 计算属性
    • 案例一：首字母大写
    • 案例二：过滤案例
  • 监听属性
  • 局部组件
  • 全局组件
  • 组件通信之父传子
  • 组件通信之子传父
  • ref属性（组件间通信）
    • 普通标签使用
    • 组件使用ref属性
  • 事件总线（不常用）
  • 动态组件和keep-alive

Vue 组件

axios实现数据请求

    
    
    
    




    

        

            
电影名字是：{{film.name}}
            
            
电影介绍：{{film.synopsis}}
        
    

from flask import Flask,make_response,jsonify

app=Flask(__name__)
@app.route('/films')
def films():
    import json
    with open('./movie.json','r',encoding='utf-8') as f:
        res=json.load(f)
    obj = make_response(jsonify(res))
    obj.headers['Access-Control-Allow-Origin']='*'
    return obj

if __name__ == '__main__':
    app.run()

计算属性

我们可以通过计算属性computed来缓存计算，什么意思呢？

在Vue中我们可以使用插值来展示数据，插值的普通函数，只要页面一刷新，函数就会重新运算，不管和函数有关没关的值都会变，函数也会重新计算，导致运行效率降低；

那么我们可以将自定义函数写在computed中来控制，把函数当成属性来用，调用不需要加括号，只有这个函数使用的属性(变量)发生变化，函数才重新运算，这样做可以减轻压力，减少资源浪费

案例一：首字母大写

    
    
    
    
    
    



    

        输入内容： ----》 {{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}
        


        
函数绑定(会刷新页面，也不推荐)：
        
计算属性(推荐)：
    

    

    

         
输入内容： -----》{{mytext1}}
    

我们可以发现只有和属性相关的才会打印，如果下面输入内容只是打印了普通函数，就算函数内和mytext1不相关

案例二：过滤案例

    
    
    



    

    

        
{{data}}
    

监听属性

watch来设置监听属性，当mytext发生变化，就会执行和mytext绑定的函数方法

    
    
    




    --->{{mytext}}

局部组件

写在components里的是局部组件，位置被限制，只能再局部使用

比如如下例子中，Top组件只能在只能再id为app的标签(div)内使用， Top组件内如果想再定义子组件，只能在该组件内的template中的div内使用

全局组件

任意位置都可以使用，但是也得是在vue实例托管的div范围内

组件通信之父传子

组件间data数据不同享，数据传递，如果我们想从父组件传递到子组件数据通过props自定义属性来实现，比如如下例子：

    
    
    
    
    
    



    子组件显示：
    

    父组件输入内容：

组件通信之子传父

ps:Vue内置的对象都以$xx出现

我们可以通过自定义事件来实现子组件向父组件传递数据，在子组件中使用$emit('自定义事件',参数)来实现

    
    
    
    
    
    




    

  
父组件
 
接收子组件发送的数据：{{childText}}

ref属性（组件间通信）

普通标签使用

普通标签使用ref属性，通过$refs获取到的就是ref属性所在的标签，获取到的是一个对象，如果多个标签写了ref属性，那么就将所有带ref属性的标签弄到一个对象中，可以对html进行操作设置等，如下示例：

    
    
    
    
    
    



    
普通标签使用ref
    

    

    
点我

组件使用ref属性

ref属性，如果放在组件上，就是当前组件对象

    
    
    
    
    
    





通信：
父组件按钮：点我

事件总线（不常用）

动态组件和keep-alive

动态组件：实现点击不同的连接显示不同的页面，实现跳转，使用component标签，用is属性绑定，指定哪个显示哪个

keep-alive：通过keep-alive标签实现组件不销毁，保留原来输入的内容

    
    
    




    

        
首页
  
        
订单
        
商品