vue

组件

什么是组件?

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

组件的本质

就是一个自定义的html标签,比如:my-header
<my-header></my-header>
组件可以自定义元素形式使用,或者使用原生元素但是以is特性做扩展

注意事项:

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

组件的分类

  1. 全局组件: 在Vue对象上定义的组件,可以在多个vue实例中使用。
  2. 局部组件: 在单个vue实例中定义的组件,只能在定义组件的当前实例中使用。
1.全局组件的定义和使用
  1. 定义的语法
Vue.component("自定义的标签名称",{
    template: "模板的内容"
})
  1. 使用组件

<自定义的标签名称></自定义的标签名称>

2.局部组件的定义和使用
  1. 定义的语法
new Vue({
    el:"#id",
    components:{
        "自定义的标签名称1":{
            template: "模板的内容1"
        },
        "自定义的标签名称2":{
            template: "模板的内容2"
        }
    }
})
  1. 使用组件

<自定义的标签名称></自定义的标签名称>

组件使用两种HTML模板
  1. 直接使用html内容

template: "模板的html内容"

  1. 类似于artTemplate在外部定义模板,然后在引入模板
<script id="tmplID" type="text/html">
   模板的html内容
</script>

template: "#tmplID"

组件中的数据必须是函数

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

父子组件

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

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

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

  1. 定义组件
Vue.component("顶级组件名称",{
    template: "顶级组件模板内容"
})
  1. vue实例的数据
new Vue({
    data:{
        数据属性:数据值
    }
})
  1. 通过属性绑定把值传给组件

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

<div id="app">
    <顶级组件名称 :属性名称="数据属性"></顶级组件名称>
</div>
  1. 在组件中通过props属性接收值

props:["属性名称"]

  1. 在组件中使用数据

{{ 属性名称 }}

数据传递

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

  1. 定义父子组件和父组件的数据
Vue.component("父组件名称",{
    template: "父组件的模板内容<子组件名称></子组件名称>",
    components:{
        "子组件名称":{
            template: "子组件的模板内容"
        }
    },
    data(){  // 组件中的数据为函数
        return { // 函数返回数据 对象
            父组件的数据属性:属性的值
        }
    }
})
  1. 通过属性绑定把父组件的数据传给儿子组件
<子组件名称 :子数据属性="父组件的数据"></子组件名称>
  1. 子组件接收父组件传入的数据
props:["子数据属性"]
  1. 在儿子组件中使用数据
{{ 子数据属性 }}

重点提醒:

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

路由【重点】

什么是路由?

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

路由使用步骤

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

  2. 引入<script src="../vue-router.js"></script>

  3. 定义组件

let Home = { template: "<h1>我是首页</h1>" };
let About = { template: "<h1>关于我们</h1>" };
let News = { template: "<h1>新闻中心</h1>" };
  1. 配置路由
    说明: path就是导航路径,component路径对应的组件
const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/news', component: News }
]
  1. 实例化路由对象:
  • routes属性名不能改
const router = new VueRouter({
    routes  //属性名和属性值相同 简写为routes
});
  1. vue实例中挂载路由
new Vue({
    el:"#app",
    router:router    //属性名和属性值相同 简写为router
})

或者

new Vue({
    router
}).$mount("#app")  // 挂载视图的另一种方式
  1. 制作路由连接:最终生成a标签
<router-link to="路径"></router-link>
  1. 路由视图: 显示组件的地方
<router-view></router-view>

路由的嵌套(父子路由)

  1. 在父组件中使用路由连接和路由视图
let News={ template: `
    <div>
        <h1>新闻中心内容</h1>
        <p>
            <router-link to="/news/n1">国际新闻</router-link>
            <router-link to="/news/n2">国内新闻</router-link>
            <router-link to="/news/n3">公司新闻</router-link>
        </p> 
        <router-view></router-view>  
    </div>
` };
  • ES6 字符串模板引擎 可以换行
  1. 配置父子路由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}
        ]
    }
];
  1. 定义子路由的组件
let N1={template:``};
let N2={template:``};
let N3={template:``};

Vue的UI框架:elementUI

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

为什么要使用UI组件

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

如何使用?
<!-- 引入样式 -->
<link rel="stylesheet" href="element.css">

<!-- 引入vue的库文件-->
<script src="../vue.min.js"></script>

<!-- 引入组件库 -->
<script src="element.js"></script>

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

Vue脚手架的使用: vue-cli

vue-cli的作用

快速搭建标准的项目结构

如何使用

  1. 全局安装脚手架工具

cnpm i -g @vue/cli

验证是否安装成功 vue -V

  1. 使用脚手架创建项目

vue create 项目名称

比如:
vue create vuedemo

  1. 进入项目目录安装依赖(默认是自动,可以ctrl+C)
    package.json
    文件里面的生产依赖和开发依赖

  2. 运行vue的服务器

npm run serve

vue的项目目录结构介绍

  • src 源文件
    • assets 静态资源(图片、全局的css、重置样式)
    • components 公共的组件的存放目录 pubcoms
    • views 页面组件的存放目录 pages
      • App.vue 当文件组件: 根组件
        - <template></template> 模板
        - <script></script> vue组件的脚步
        - <style></style> 组件的样式
      • main.js 项目的入口文件: 全局统筹vue的相关插件
      • router.js 路由配置文件
      • store.js 全局的状态管理,使用的vuex插件
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容

  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,521评论 0 6
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,754评论 4 45
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,365评论 0 11
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,722评论 1 12
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,310评论 0 3