2020-06-18 Vue

★组件-概念

概念：

• JS模块：对一个逻辑的封装，说白了就是一个js文件（模块）

• vue组件：把网页分成若干块，针对界面功能的封装，一个组件包含（HTML,CSS,JS）

• vue组件也是一个vue实例，在定义组件的时候可以使用vue的配置选项 ,例如你可以使用 data method ... 这样的配置选项，有一个选项不能使用 el

优点：

• 组件与组件之间是相互独立的，拥有自己的数据data、函数methods...，可维护性提高。
• 可复用

★组件-全局注册

全局注册的意思：在任何vue实例下都可以使用。

具体语法：

• 定义 Vue.component(组件名称,组件配置对象)

• 组件配置对象 和 vue实例配置对象 是几乎一样，没有el选项。

• template选项，声明组件结构的（组件自己的模板）。有且只有一个根标签。必须有这个选项

• data选项，必须指定一个函数，函数的返回对象是用来声明数据的。

使用组件：

• 在vue实例管理的视图中#app，把 组件名字 当中一个标签来使用，组件的名字不能用原生的标签来命名。
• 例如：div span a article footer header section ... 原生标签。

演示代码：

★组件-局部注册

局部注册的意思：仅仅在注册组件的当前vue实例管理的视图中才可以使用。

具体语法：

• 语法：new Vue({ components:{组件的名字:组件配置对象} })

• 组件配置对象 和 vue实例配置对象 是几乎一样，没有el选项。

• template选项，声明组件结构的（组件自己的模板）。有且只有一个根标签。必须有这个选项

• data选项，必须指定一个函数，函数的返回对象是用来声明数据的。

使用组件：

• 在vue实例管理的视图中#app，把 组件名字 当中一个标签来使用，组件的名字不能用原生的标签来命名。
• 例如：div span a article footer header section ... 原生标签。

演示代码：

★组件-组件嵌套

演示代码：

注意：局部定义的组件仅仅只能在当前注册的vue实例管理的模板（视图）中使用。

08-★★组件-组件传值

组件特点：组件与组件之间是相互独立的，数据也是相互独立的，但是组件与组件之间不可避免的要进行数据通信。

组件与组件之间的关系不同，传值的方式也不同。分为三种关系：

• 父组件传值给子组件
• 子组件传值给父组件
• 非父子传值 (后面项目中讲解)

父传子

总结：

• 使用子组件的时候写属性 :message="父组件数据"
• 定义子组件的时候写props配置选项 props:['message']

子传父

• 铺垫知识：组件的自定义事件（绑定，触发）
  • 原生事件 dom元素|标签能支持的事件
  • 自定义事件 给组件添加的事件，需要通过代码才能触发。

// 触发组件的自定义事件  vue实例提供$emit是用来触发自定义事件的函数
组件实例.$emit('input')

jquery的自定义事件的绑定和触发

image.png

• 通过自定义事件的绑定和触发可以实现，子组件传值给父组件。

画图分析：

image.png

总结：

• 使用子组件的时候，绑定自定义事件
• 在子组件内部，通过 $emit 触发自定义事件，此时可以传参
• 当你触发自定义事件的时候，在事件函数中 $event 就是触发自定义事件时候的传参。

★vue-router-使用步骤

vue-router是一个基于vue的插件，实现前端路由功能的，在基于vue的项目当中使用。
文档地址： https://router.vuejs.org/zh/
下载地址：https://unpkg.com/vue-router/dist/vue-router.js

使用步骤：

• 引入，vue.js的下面。

• vue-router控制的是 （地址------>组件），所以是先准备组件。
  • vue-router实现的是 不同的地址对应不同的组件。

// 组件配置对象
const Home = {template:'首页界面'}
const My = {template:'我的音乐界面'}
const Friend = {template:'朋友界面'}

• 定义路由规则（什么地址------>什么组件）

// routes路由规则配置
const routes = [
  // path:路径 component:组件 固定写法
  {path: '/', component: Home},
  {path: '/my', component: My},
  {path: '/friend', component: Friend}
]

• 初始化vue-router这个插插件，使用路由规则。

// 引入插件后 全局变量 VueRouter 构造函数
// router路由实例
const router = new VueRouter({
  // 路由插件配置对象
  // routes 配置选项作用是：指定路由规则
  routes
})

• 把实例好的router对象，挂载到vue的根实例（#app的vue实例）中，才能vue+vue-router配合使用。

// 其实所有的组件都是在#app容器下显示渲染的
// 所以也可以把#app容器称为根容器，管理这个容器的vue实例，称为：根vue实例
new Vue({
  el: '#app',
  // router 选项：配置路由实例
  router
})

• 使用 router-link 来当跳转连接 (默认解析成a标签)

    
    

      首页
      我的音乐
      朋友
    

• 使用 router-view的指定路由对应的组件显示的位置

案例代码：

  
    
    
    
  
  
    

      

        
        首页
        我的音乐
        朋友