vue组件

组价件化开发

组件

• 组件就是一个自定义的html标签，通过组件名作为自定义标签名

组件注册

• 全局组件
  • 全局祖册设置在根实例注册之前

  Vue.component('组件名',{
    /*
      选项内容
    */
    template: '
这是全局祖册的组件
'
  });
  

• 选项内容

  • template选项
    • 设置组件的结构，最终被引入根实例或其他组件中
    • 只能有一个根元素
  • data选项 必须是一个函数，return返回数据

• 局部组件

  new Vue ({
    ...
    components: {
      'my-con':{
        template : '#tmp',
        data(){
          return {
            title : '标题'
          }
        }
      }
    }
  })
  

组件通信

• 组件间数据传递叫组件通信

• 父组件传递给子组件

  • 通过子组件的props选项接收父组件的传值
  • 父子组件间的所以props都是单向下行绑定的
  • props属性的命名规则：
    • 建议使用camelCase 采用kebab-case进行绑定

  
    
  
      
  我是标题
      
    
  
  
  

• 子组件传递给父组件

  • 通过事件向父组件传值

• 组件与v-model

  • v-model用于组件时，需要通过props与自定义事件实现

• 非父子组件的传值

  • 兄弟组件的传值

• 其他的通信方式

  • eventBus
  • 发送数据的组件触发bus事件，接收的组件给bus注册对应的事件
    • 给bus注册对应的事件通过$on()操作
  • $root 访问当前组件树的根实例，不建议使用
  • chidren 用于便捷访问父子组件 不建议使用
  • $refs 获取设置ref属性的html标签或子组件
    • 给子组件设置ref属性，渲染后通过$refs获取子组件实例

组件插槽

• 插槽 slot
• 单个插槽

  
    

      
        
这是第一个组件的内容
      
    
  
  

• 可以在插槽中设置默认内容，如果没有传入内容默认就是显示默认内容
• 具名插槽

  
    

      
        
这是第一个组件的内容
        
我是脚步
      
    
  
  

内置组件

• 动态组件
  • 适用于多个组件频繁切换的处理
  • component用于将一个元组件渲染为动态组件，以is属性决定渲染哪个组件
  • is属性会每次切换组件时，vue都会创建一个新的组件实例
• keep-live组件
  • 用于保留组件状态或避免组件重新渲染
  • include可以是数组可以是正则可以是字符串
  • exclude属性用于指定哪些组件不会被缓存
  • max属性用于设置最大缓存个数

• 过渡组件
  • 用于在vue插入，更新，或者移除DOM时，提供多种不同方式的应用过渡，动画效果
  • transition组件
    • 条件渲染 v-if
    • 条件展示 v-show
    • 动态组件
    • 组件根节点
    • 进入的类名
      • v-enter
      • v-enter-to
      • v-enter-active
    • 离开的类名
      • v-leave
      • v-leave-to
      • v-leave-active
    • 设置了name的transition组件需要将v-改成name-
  • 自定义过渡类名
  • transition-group
    • 用于给列表统一设置过渡动画

vue Router

• vue router 是vue.js的官方插件，用来快速实现单页应用

单页应用

• 指的是网站的所以功能都在的单个页面中进行呈现
• 具有代表性的有后台管理系统，移动端，小程序等
• 优点：
  • 前后端分离，提高了开发效率
  • 业务场景切换时，局部更新结构
  • 用户体验好，更加接近本地应用
• 缺点：
  • 不利于seo
  • 初次首屏加载速度比较慢
  • 页面复杂度比较高

前端路由

• 前端路由指的是url与内容间的映射关系
• hash方式
  • 通过haskchange事件监听hash变化，并进行网页内容更新
  • location.hash.replace('#','');

    const router = {
      routes: {},
      route(path,callback){
        this.routes[path] = callback;
      },
      //初始化路由
      init(){
        const that = this;
        window.onhashchange = function(){
          const hash = location.hash.replace('#','');
          that.routes[hash] && this.routes[hash]();
        }
      }
    };
  

• history方式
  • 采用的是html5提供的新功能实现前端路由

    const router = {
      routes: {},
      route(path,callback){
        this.routes[path] = callback;
      },
      go(path){
        history.pushState(null,null,path){
          this.routes[path] && this.routes[path]();
        }
      }
    };
  

vue router

• 基本使用
  • 安装
  • 提供了 router-link router-view
    • router-link 默认是a标签 可以通过tag设置
    • router-view显示路由匹配到的组件
• 命名视图
  • 如果导航后，希望同时在同级展示多个视图(组件),这时就需要进行命名视图
  • 路由中通过components属性进行设置不同视图的对应组件
• 编程式导航
  • router.push()用来导航到一个新的url
  • router-link的to属性使用绑定方式也可属性对象结构
  • 导航守卫

    router.beforeEach((to,from,next)=>{
      console.log(to,from);
      next();
    })
  

vue-cli

• 创建项目 vue create project-demo
• 启动项目 npm run serve
• 目录与文件
  • public 预览文件目录
  • src
    • assets 静态资源目录
    • components 项目组件目录
    • App.vue 根目录
    • main.js 入口文件
• 打包与部署
  • 打包
    • npm run build 打包
  • 部署
    • npm i -g serve 静态文件服务器
    • 在dist下通过serve直接开启一个服务器