vue

组件

什么是组件？

就是对一段可以重用的html代码的封装，封装后可以在别的页面中使用，从而提高代码的重用性。
比如：header/footer/login/menu

组件的本质

就是一个自定义的html标签，比如：my-header

组件可以自定义元素形式使用，或者使用原生元素但是以is特性做扩展

注意事项：

组件的名称，如果有多个单词分割，推荐使用中横线 - 。并且不用驼峰
比如： my-header

组件的分类

全局组件：在Vue对象上定义的组件，可以在多个vue实例中使用。
局部组件：在单个vue实例中定义的组件，只能在定义组件的当前实例中使用。

1.全局组件的定义和使用

定义的语法

Vue.component("自定义的标签名称",{
    template: "模板的内容"
})

使用组件

<自定义的标签名称>

2.局部组件的定义和使用

定义的语法

new Vue({
    el:"#id",
    components:{
        "自定义的标签名称1":{
            template: "模板的内容1"
        },
        "自定义的标签名称2":{
            template: "模板的内容2"
        }
    }
})

使用组件

<自定义的标签名称>

组件使用两种HTML模板

直接使用html内容

template: "模板的html内容"

类似于artTemplate在外部定义模板，然后在引入模板



template: "#tmplID"

组件中的数据必须是函数

new Vue({
    el:"#id",
    components:{
        "自定义的标签名称":{
            template: "模板的内容"
            data(){
               return {
                   数据属性:属性的值
               }
            }
        }
    }
})

父子组件

组件的父子关系：在一个组件中定义另一个组件，外层的组件就是父组件，里面的组件就是子组件

Vue.component("父组件名称",{
    template: "父组件的模板内容 <子组件名称>",
    components:{
        "子组件名称":{
            template: "子组件的模板内容"
        }
    }
})

Vue实例中的数据给顶级组件

定义组件

Vue.component("顶级组件名称",{
    template: "顶级组件模板内容"
})

vue实例的数据

new Vue({
    data:{
        数据属性：数据值
    }
})

通过属性绑定把值传给组件

v-bind: 属性名 = '数据‘
简写：
: 属性名 = '数据'


    <顶级组件名称 :属性名称="数据属性">

在组件中通过props属性接收值

props:["属性名称"]

在组件中使用数据

{{ 属性名称 }}

数据传递

父组件的数据传递给子组件

定义父子组件和父组件的数据

Vue.component("父组件名称",{
    template: "父组件的模板内容<子组件名称>",
    components:{
        "子组件名称":{
            template: "子组件的模板内容"
        }
    },
    data(){  // 组件中的数据为函数
        return { // 函数返回数据 对象
            父组件的数据属性：属性的值
        }
    }
})

通过属性绑定把父组件的数据传给儿子组件

<子组件名称 :子数据属性="父组件的数据">

子组件接收父组件传入的数据

props:["子数据属性"]

在儿子组件中使用数据

{{ 子数据属性 }}

重点提醒：

vue组件中的模板必须有一个根元素进行包裹，否侧出错不显示。

路由【重点】

什么是路由？

1.根据浏览器的请求来响应不同页面，页面的内容具体有哪个组件来渲染，由路由来决定。

路由使用步骤

路由模板也是vue的一个插件，需要下载和引入才能使用
https://router.vuejs.org/zh/ 官网下载
引入
定义组件

let Home = { template: "我是首页" };
let About = { template: "关于我们" };
let News = { template: "新闻中心" };

配置路由
说明： path就是导航路径，component路径对应的组件

const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/news', component: News }
]

实例化路由对象:

routes属性名不能改

const router = new VueRouter({
    routes  //属性名和属性值相同 简写为routes
});

在vue实例中挂载路由

new Vue({
    el:"#app",
    router:router    //属性名和属性值相同 简写为router
})

或者

new Vue({
    router
}).$mount("#app")  // 挂载视图的另一种方式

制作路由连接：最终生成a标签

路由视图：显示组件的地方

路由的嵌套（父子路由）

在父组件中使用路由连接和路由视图

let News={ template: `
    
        新闻中心内容
        
            国际新闻
            国内新闻
            公司新闻
         
          
    
` };

ES6 字符串模板引擎可以换行

配置父子路由children

const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { 
        path: '/news', 
        component: News,
        children:[
            {path: 'n1', component: N1},
            {path: 'n2', component: N2},
            {path: 'n3', component: N3}
        ]
    }
];

定义子路由的组件

let N1={template:``};
let N2={template:``};
let N3={template:``};

Vue的UI框架：elementUI

http://element-cn.eleme.io/#/zh-CN

为什么要使用UI组件

把网站开发的常用功能都开发成了组件，直接拷贝就可以使用，规范化项目、标准化项目、提高开发效率。

如何使用？

看官网拷贝代码运行看效果

Vue脚手架的使用： vue-cli

vue-cli的作用

快速搭建标准的项目结构

如何使用

全局安装脚手架工具

cnpm i -g @vue/cli

验证是否安装成功 vue -V

使用脚手架创建项目

vue create 项目名称

比如：
vue create vuedemo

进入项目目录安装依赖（默认是自动，可以ctrl+C）
package.json
文件里面的生产依赖和开发依赖
运行vue的服务器

npm run serve

vue的项目目录结构介绍

src 源文件
- assets 静态资源（图片、全局的css、重置样式）
- components 公共的组件的存放目录 pubcoms
- views 页面组件的存放目录 pages
  - App.vue 当文件组件：根组件
    - 模板
    - vue组件的脚步
    - 组件的样式
  - main.js 项目的入口文件：全局统筹vue的相关插件
  - router.js 路由配置文件
  - store.js 全局的状态管理，使用的vuex插件

vue

组件