一、组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：



1、局部组件

创建 01-1-局部组件.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         var app = new Vue({
  11.             el: '#app',
  12.             // 定义局部组件，这里可以定义多个局部组件
  13.             components: {
  14.                 //组件的名字
  15.                 'Navbar': {
  16.                     //组件的内容
  17.                     template: '<ul><li>首页</li><li>学员管理</li></ul>'
  18.                 }
  19.             }
  20.         })
  21.     </script>
  23.         <div id="app">
  24.             <Navbar></Navbar>
  25.         </div>
  27. </body>
  28. </html>

2、全局组件

定义全局组件：components/Navbar.js

  1.  // 定义全局组件
  2. Vue.component('Navbar', {
  3.     template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
  4. })

创建 01-2-全局组件.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- <script>
  10.         // 定义全局组件
  11.         Vue.component('Navbar', {
  12.             template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
  13.         })
  14.     </script> -->
  15.     <div id="app">
  16.         <Navbar></Navbar>
  17.     </div>
  18.       <script src="vue.min.js"></script>
  19.     <script src="components/Navbar.js"></script>
  20.     <script>
  21.         var app = new Vue({
  22.             el: '#app'
  23.         })
  24.     </script>
  25. </body>
  26. </html>

二、实例生命周期



创建 03-vue实例的生命周期.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <button @click="update">update</button>
  11.         <h3 id="h3">{{ message }}</h3>
  12.     </div>
  13.     <script src="vue.min.js"></script>
  14.     <script>
  16.         // 创建一个vue对象
  17.       let app = new Vue({
  18.             el: '#app',//绑定vue作用的范围
  19.             data: {
  20.             message: '床前明月光'
  21.         },
  22.         methods: {
  23.             show() {
  24.                 console.log('执行show方法')
  25.             },
  26.             update() {
  27.                 this.message = '玻璃好上霜'
  28.             }
  29.         },
  30.         //===创建时的四个事件
  31.         beforeCreate () { // 第一个被执行的钩子方法：实例被创建出来之前执行
  32.             console.log(this.message) //undefined
  33.             this.show() //TypeError: this.show is not a function
  34.             // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
  35.         },
  36.         created () { // 第二个被执行的钩子方法
  37.             console.log(this.message) //床前明月光
  38.             this.show () //执行show方法
  39.             // created执行时，data 和 methods 都已经被初始化好了！
  40.             // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
  41.         },
  42.         beforeMount () { // 第三个被执行的钩子方法
  43.             console.log(document.getElementById('h3').innerText) //{{ message }}
  44.             // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
  45.         },
  46.         mounted () { // 第四个被执行的钩子方法
  47.             console.log(document.getElementById('h3').innerText) //床前明月光
  48.             // 内存中的模板已经渲染到页面，用户已经可以看见内容
  49.         },
  50.         //===运行中的两个事件
  51.         beforeUpdate () { // 数据更新的前一刻
  52.             console.log('界面显示的内容：' + document.getElementById('h3').innerText)
  53.             console.log('data 中的 message 数据是：' + this.message)
  54.             // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
  55.         },
  56.         updated () {
  57.             console.log('界面显示的内容：' + document.getElementById('h3').innerText)
  58.             console.log('data 中的 message 数据是：' + this.message)
  59.             // updated执行时，内存中的数据已更新，并且页面已经被渲染
  60.         }
  61.         })
  62.     </script>  
  64. </body>
  65. </html>

四、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库。

创建 04-路由.html

1、引入js

  1. <script src="vue.min.js"></script>
  2. <script src="vue-router.min.js"></script>

2、编写html

  1. <div id="app">
  2.     <h1>Hello App!</h1>
  3.     <p>
  4.         <!-- 使用 router-link 组件来导航. -->
  5.         <!-- 通过传入 `to` 属性指定链接. -->
  6.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  7.         <router-link to="/">首页</router-link>
  8.         <router-link to="/student">会员管理</router-link>
  9.         <router-link to="/teacher">讲师管理</router-link>
  10.     </p>
  11.     <!-- 路由出口 -->
  12.     <!-- 路由匹配到的组件将渲染在这里 -->
  13.     <router-view></router-view>
  14. </div>

3、编写js

  1. <script>
  2.     // 1. 定义（路由）组件。
  3.     // 可以从其他文件 import 进来
  4.     const Welcome = { template: '<div>欢迎</div>' }
  5.     const Student = { template: '<div>student list</div>' }
  6.     const Teacher = { template: '<div>teacher list</div>' }
  7.     // 2. 定义路由
  8.     // 每个路由应该映射一个组件。
  9.     const routes = [
  10.         { path: '/', redirect: '/welcome' }, //设置默认指向的路径
  11.         { path: '/welcome', component: Welcome },
  12.         { path: '/student', component: Student },
  13.         { path: '/teacher', component: Teacher }
  14.     ]
  15.     // 3. 创建 router 实例，然后传 `routes` 配置
  16.     const router = new VueRouter({
  17.         routes // （缩写）相当于 routes: routes
  18.     })
  19.     // 4. 创建和挂载根实例。
  20.     // 从而让整个应用都有路由功能
  21.     const app = new Vue({
  22.         el: '#app',
  23.         router
  24.     })
  25.     // 现在，应用已经启动了！
  26. </script>

4、04-路由.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script src="vue.min.js"></script>
  11.     <script src="vue-router.min.js"></script>
  12.     <div id="app">
  13.         <h1>Hello App!</h1>
  14.         <p>
  15.             <!-- 使用 router-link 组件来导航. -->
  16.             <!-- 通过传入 `to` 属性指定链接. -->
  17.             <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  18.             <router-link to="/">首页</router-link>
  19.             <router-link to="/student">会员管理</router-link>
  20.             <router-link to="/teacher">讲师管理</router-link>
  21.         </p>
  22.         <!-- 路由出口 -->
  23.         <!-- 路由匹配到的组件将渲染在这里 -->
  24.         <router-view></router-view>
  26.         <script>
  27.             // 1. 定义（路由）组件。
  28.             // 可以从其他文件 import 进来
  29.             const Welcome = { template: '<div>欢迎</div>' }
  30.             const Student = { template: '<div>student list</div>' }
  31.             const Teacher = { template: '<div>teacher list</div>' }
  33.             // 2. 定义路由
  34.             // 每个路由应该映射一个组件。
  35.             const routes = [
  36.                 { path: '/', redirect: '/welcome' }, //设置默认指向的路径
  37.                 { path: '/welcome', component: Welcome },
  38.                 { path: '/student', component: Student },
  39.                 { path: '/teacher', component: Teacher }
  40.             ]
  42.             // 3. 创建 router 实例，然后传 `routes` 配置
  43.             const router = new VueRouter({
  44.                 routes // （缩写）相当于 routes: routes
  45.             })
  47.             // 4. 创建和挂载根实例。
  48.             // 从而让整个应用都有路由功能
  49.             const app = new Vue({
  50.                 el: '#app',
  51.                 router
  52.             })
  54.             // 现在，应用已经启动了！
  55.         </script>
  56. </div>
  57. </body>
  58. </html>

五、axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。

在浏览器中可以帮助我们完成 ajax请求的发送。

在node.js中可以向远程接口发送请求。

1、编写数据data.json文件

  1. {
  2.   "success":true,
  3.   "code":20000,
  4.   "message":"成功",
  5.   "data":{
  6.       "items":[
  7.           {"id":"1","name":"zhang3","age":33},
  8.           {"id":"2","name":"li4","age":44},
  9.           {"id":"3","name":"wang5","age":55}
  10.       ]
  11.   }
  12. }

2、获取数据

  1. <script src="vue.min.js"></script>
  2. <script src="axios.min.js"></script>

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

编写05-axios.html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <div v-for="user in userList">
  11.             {{user.name}}-----{{user.age}}
  12.         </div>
  14.     </div>
  15.     <script src="vue.min.js"></script>
  16.     <script src="axios.min.js"></script>
  17.     <script>
  18.         let app = new Vue({
  19.             el:'#app',
  20.             data:{
  21.                 userList:[]
  22.             },
  23.             created () {
  24.                 this. getData()
  25.             },
  26.             methods: {
  27.                 getData(){
  28.                     //$.get(‘url’,data=>{})
  29.                     axios.get('data.json')
  30.                     .then(response=>{
  31.                         console.log(response)
  32.                         this.userList = response.data.data.items
  33.                     })
  34.                     .catch(error=>{
  35.                         console.log(error)
  36.                     })
  37.                 }
  38.             }
  39.         })
  40.     </script>
  41. </body>
  42. </html>

3、查看输出

六、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

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

创建 06-element-ui.html

将element-ui引入到项目

1、引入css

  1.  <!-- import CSS -->
  2. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入js

  1. <!-- import Vue before Element -->
  2. <script src="vue.min.js"></script>
  3. <!-- import JavaScript -->
  4. <script src="element-ui/lib/index.js"></script>

3、编写html

  1. <div id="app">
  2.     <el-button @click="visible = true">Button</el-button>
  3.     <el-dialog :visible.sync="visible" title="Hello world">
  4.         <p>Try Element</p>
  5.     </el-dialog>
  6. </div>

关于.sync的扩展阅读

  1. https://www.jianshu.com/p/d42c508ea9de

4、编写js

  1. <script>
  2.     new Vue({
  3.       el: '#app',
  4.       data: function () {//定义Vue中data的另一种方式
  5.         return { visible: false }
  6.       }
  7.     })
  8. </script>

06-element-ui.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  8.     <!-- import CSS -->
  9.     <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  10.     <!-- import Vue before Element -->
  11.     <script src="vue.min.js"></script>
  12.     <!-- import JavaScript -->
  13.     <script src="element-ui/lib/index.js"></script>
  14. </head>
  15. <body>
  16.     <div id="app">
  17.         <el-button @click="visible = true">Button</el-button>
  18.         <el-dialog :visible.sync="visible" title="Hello world">
  19.             <p>Try Element</p>
  20.         </el-dialog>
  21.     </div>
  23.     <script>
  24.         new Vue({
  25.         el: '#app',
  26.         data: function () {//定义Vue中data的另一种方式
  27.             return { visible: false }
  28.         }
  29.         })
  30.     </script>
  31. </body>
  32. </html>

day03---Vue(04)的更多相关文章

  1. Vue 04

    目录 创建Vue项目 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 项目生命周期 添加组件-路由映射关系 文件式组件结构 配置全局css样式 子组件的 ...

  2. 黑马eesy_15 Vue：04.综合案例（前端Vue实现）

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  3. 黑马eesy_15 Vue：04.Vue案例（ssm环境搭建）

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  4. vue学习04 v-on指令

    vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...

  5. vue视频学习笔记04

    video 4 手动配置自己:webpack+vue-loader webpack加载模块-------------------------------------如何运行此项目?1. npm ins ...

  6. 大白话Vue源码系列(04)：生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  7. ubuntu16.04上vue环境搭建

    $ sudo apt-get install python-software-properties $ curl -sL https://deb.nodesource.com/setup_8.x | ...

  8. React对比Vue（04 父子组件的通信 )

    跟vue差不多 都是props,但是react里面不仅可以给子组件传值,还可以传方法,MD尽然还可以把自己传给子组件,(卧槽vue可没有这个啊 )  vue的传递值差不多,传方法就不用了,子组件可以掉 ...

  9. 04: vue生命周期和实例属性和方法

    1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...

  10. vue总结 04过渡--进入/离开 列表过渡

    进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...

随机推荐

  1. 正则表达式: javascript Unicode 中文字符 编码区间：\u4e00-\u9fa5

    正则表达式: javascript Unicode 中文字符  编码区间:\u4e00-\u9fa5 RegExp 对象 javascript Unicode 中文字符的 编码区间: \u4e00-\ ...

  2. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  3. OOP & 模块化, 多态, 封装

    OOP 面向对象编程 (OOP) 是用抽象方式创建基于现实世界模型的一种编程模式.它使用先前建立的范例,包括模块化,多态和封装几种技术. 在 OOP 中,每个对象能够接收消息,处理数据和发送消息给其他 ...

  4. ESLint All In One

    ESLint All In One ESLint $ yarn add -D eslint .eslintrc.{js,yml,json} 优先级 .eslintrc .eslintrc.js .es ...

  5. Regular Expression & rgb2hex

    Regular Expression & rgb2hex regex // 颜色字符串转换 function rgb2hex(sRGB = 'rgb(255, 255, 255)') { co ...

  6. leetcode & vscode

    leetcode & vscode vscode-leetcode https://marketplace.visualstudio.com/items?itemName=LeetCode.v ...

  7. NGK公链：在规则明确的环境下运行超级节点机制

    首先要跟大家明确的一点是,21个超级节点是投票选举出来的,并不是系统在创立之初就已经确定好了的.那么相信大家也一定很好奇,这21个超级节点是通过什么方式产生? NGK.IO对分布式超级节点使用了一个自 ...

  8. 实用Macbook软件系列

    Macbook Software 实用Macbook软件系列 我的Mac都装了哪些软件 鉴于很多小伙伴刚刚由win系统转换到mac,一开始会有很多不适应的地方,所以本期文章准备给大家介绍下mac上一些 ...

  9. 为什么Linux需要虚拟内存

    本文转载自为什么 Linux 需要虚拟内存 导语 操作系统中的 CPU 和主内存(Main memory)都是稀缺资源,所有运行在当前操作系统的进程会共享系统中的 CPU 和内存资源,操作系统会使用 ...

  10. 执行Python程序时模块报错

    1. 在执行python程序时遇到 'ModuleNotFoundError: No module named 'xxxxx'' : 例如: 图片中以导入第三方的 'requests' 模块为例,此报 ...