04

时间 2019-11-16

原文原文链接

VUE基础-第四天css

01-反馈html

姓名意见或建议
*** 学了vue后神清气爽,腰不疼了,腿不软了
*** 组件之间传值,必须利用子组件的props选项吗?用data能够吗
*** 老师，对于组件没怎么听懂，能够再讲解一下么？感受天天的知识重点都在下午，又容易犯困，好难吸取啊！！前端

问题：经过安装基于你的编辑器的插件，启动服务。
为何须要启动一个服务？咱们写的是页面，运行在浏览器，跑在服务器中。
node阶段：访问的方式 127.0.0.1:80 便可 localhost:3000 本机
命令行工具：在任何的目录快速启动服务。 server-cli
- 安装： npm i -g server-cli
- 启动：切到文件的目录，执行 server-cli 命令

02-回顾vue

axios
- 做用在 nodejs 和浏览器端发送请求
- 服务端
  - 简绍 json-server 接口服务器
  - 某个目录定义 db.json 文件写好数据
  - 启动服务 json-server --watch db.json
  - 怎么访问：
    - 基于restful风格的接口
    - get post put delete
    - localhost:3000/brands
- 客户端发请求：使用axios插件特色：基于promise
- axios.get() axios.post() axios.put() axios.delete()
- 表格案例经过 axios 实现和后台数据交互
watch
- 侦听器: 监听某个数据的变化，去作一些事件，通常是异步的操做。
- 实现搜索功能
组件
- 看下面。

03-组件复习node

组件：vue组件开发思想，一个应用都是由组件组成的。

组成部分：html css js 组成，独立的功能。

在vue中怎么去定义组件，在js文件中定义组件，之后在vue文件中定义。
全局定义

// 注册组件
Vue.component('com-span',{
    // 组件的配置对象
    // 和 new Vue() 的选项是同样的  排除 el 
    data(){
        return { //组件数据  独立 }
    }，
    // 支持vue的语法   插值  指令
    template:'<div>//内容</div>'，
    methods:{}
})
复制代码

局部定义

new Vue({
    components:{
     	'组件名称'：‘组件配置对象’   
    }
})
复制代码

影响组件关系的是使用时候的位置关系

组件关系：由于不一样的关系组件之间的通信方式是不同的。
- 父子组件
  - 父组件向子组件传值 webpack
  - 子组件向父组件传值ios
- 兄弟组件
- 不相关组件

04-组件和模块区别git

组件：由HTML CSS JS 组成的，构建UI界面。
模块：是由若干个js函数组成，js代码，js功能。
组件是否可以使用模块，组件methods:{}使用js函数，使用模块。

05-单页面应用SPA-特色github

spa是单页面应用程序（single page application）,通俗：在一个页面开发一个完整网站功能。
优势：
- 使用更流畅（不须要跳转页面，局部更新页面内容）
- 彻底前端组件化（可维护性高，使用框架来实现vue）
缺点：
- 第一次访问很慢（首屏加载慢，按需加载）
- 开发复杂（全部的功能在一个页面完成）模块化开发webpack
- 不利于 SEO 搜索引擎优化（几乎全部的内容都是js渲染上去的，搜索引擎收录的是页面的源码）
  - 服务端渲染

06-单页面应用SPA-铺垫概念web

先后端分离
- 代码分离
- 项目分离使用组件化开发使用框架 vue
基于前端路由
- 路由：是个概念，经过URL标识符去映射不一样的功能，描述这个映射关系的就是路由。
- 前端路由：根据不一样的URL标识符渲染不一样的组件（不一样的网页内容）。
- 思考路由的实现：url标识符改变却不跳转，去局部更新页面内容。

07-路由-路由实现原理

<!-- 需求：不一样的URL地址 局部去更新app容器的内容 不能跳转-->
<!-- 1. 不让它跳转 也能改变URL标识符  -->
<!-- 2. 经过在标识符前加#号  叫哈希 hash  能够经过 location.hash 获取 -->
<!-- 3. 若是url标识改变 对应内容改变  路由也就实现-->
<!-- 4. 经过 hashchange 事件来监听标识符的改变-->
<!-- 5. 不一样标识展示不一样的内容  局部更新-->
<ul>
  <li><a href="#/home">首页</a></li>
  <li><a href="#/list">列表</a></li>
  <li><a href="#/detail">详情</a></li>
</ul>
<div id="app">
  <!--更新内容的位置-->
</div>
<script>
  const app = document.querySelector('#app')
  window.onhashchange = function () {
    // 改变了hash
    // 获取hash
    const hash = location.hash
    // 不一样标识展示不一样的内容  局部更新
    // 定义 映射关系  路由规则
    switch (hash) {
      case '#/home':
        app.innerHTML = '首页内容'
        break
      case '#/list':
        app.innerHTML = '列表内容'
        break
      case '#/detail':
        app.innerHTML = '详情内容'
        break
    }
  }
</script>
复制代码

08-路由-vue-router-文档

vue-router在vue项目中来实现路由功能。
vue-router是基于vue的一个插件，使用时候先引入vue在去引入vue-router插件
安装
- 本地
- cnd unpkg.com/vue-router/…
- npm

09-路由-vue-router-体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 连接 -->
  <ul>
    <li>
      <router-link to="/home">首页</router-link>
    </li>
    <li>
      <router-link to="/list">列表</router-link>
    </li>
    <li>
      <router-link to="/detail">详情</router-link>
    </li>
  </ul>
  <!-- 容器 -->
  <router-view></router-view>
</div>
<script src="assets/vue.js"></script>
<script src="assets/vue-router.js"></script>
<script>
  /*使用vue-router*/
  const router = new VueRouter({
    //路由规则
    routes: [
      // component 指定组件的配置项
      {path:'/home',component:{template:'<div>首页内容</div>'}},
      {path:'/list',component:{template:'<div>列表内容</div>'}},
      {path:'/detail',component:{template:'<div>详情内容</div>'}}
    ]
  })

  /*实例*/
  const vm = new Vue({
    el: '#app',
    /*挂载 到 vue选项*/
    router
  })
</script>
</body>
</html>
复制代码

10-路由-vue-router-使用步骤

一共六步：
- 定义 router-link 指定 to 属性， to跳转URL
- 定义 router-view 指定渲染组件的位置
- 定义组件选项对象
- 定义路由规则 routes 数组
- 实例化 vue-router 对象
- 挂载到根实例 router 选项
  Title
  首页列表详情

11-路由-vue-router-动态路由

不一样的URL标识符，指定显示同一个组件，这样的路由规则就是动态路由
好比： edit/824 edit/870 指定的是同一个编辑组件
```
<router-link to="/edit/824">编辑</router-link>
<router-link to="/edit/870">编辑</router-link>
复制代码
```
// 动态路由规则定义 edit/824 edit/870 :id ---> url路径形参 {path:'/edit/:name',component:Edit}

13-路由-vue-router的to属性赋值

router-link的to属性的用法还有不少种：首页列表详情 AAA BBB CCC100 CCC200 DDD

12-路由-vue-router-重定向

原本你想访问的 /list 路径访问列表页面，强制把路径改为了 /home , 访问了主页。
redirect 重定向

// 在路由规则中配置：

// 当你访问 / 路径时重定向到 Home 组件

// redirect 字符串路径标识符 //{path: '/', redirect:'/home'},

// redirect 对象 {name:'home'} //{path: '/', redirect: {name: 'home'}},

// redirect 对象 {name:'home'} {path: '/', redirect: {path: '/home'}},

14-路由-vue-router-编程式导航

js跳转路由

goDetail(){ // this.route 获取数据 // 触发事件跳转 #/detail 地址 ===> 路由的path /detail // router.push({path:'/detail'}) }

15-路由-vue-router-激活样式&tag

激活样式在选中导航的时候路由默认会加上选中的类名根据类型写选中样式便可
tag属性当你想显示的是一个标签套着A元素指定router-link渲染成的标签 tag="li"
```

<router-link to="/home" tag="li"><a>首页</a></router-link>
复制代码
```

16-路由-vue-router-嵌套路由

使用嵌套路由的步骤：

/实现嵌套路由的步骤/ /*1. 渲染二级导航热门文章体育文章 */ /*2. 定义路由规则 /list/hot ==> Hot */ /*3. 定义路由规则 /list/sports ==> Sports */ /*4. 按照定义在同一级规则不能够 */ /5.1 须要把路由规则定义在一级路由的 children 属性下/ /5.2 在一级路由对应的组件中准备子路由对应组件渲染位置/

代码：

// 3. 定义 组件配置对象
  const Home = {template: '<div>首页内容</div>'}
  const List = {
    template: `<div>
                  <router-link to="/list/hot" tag="li">热门文章</router-link>
                  <router-link to="/list/sports" tag="li">体育文章</router-link>
                  <router-view></router-view>
              </div>`
  }
  const Detail = {template: '<div>详情内容</div>'}

  const Hot = {template: '<div>热门++++</div>'}
  const Sports = {template: '<div>体育++++</div>'}

  // 4. 定义 路由规则
  const routes = [
    {path: '/home', component: Home},
    {
      path: '/list', component: List, children: [
        {path: '/list/hot', component: Hot},
        {path: '/list/sports', component: Sports}
      ]
    },
    {path: '/detail', component: Detail}
  ]
  // 5 实例化 路由对象
  const router = new VueRouter({routes})
  // 6. 挂载到vue实例
  const vm = new Vue({
    el: '#app',
    router
  })
复制代码

17-git-介绍和安装

Window安装
- git-scm.com/download/wi… 下载Git客户端软件，和普通软件安装方式同样。
Mac安装
- 打开Terminal直接输入git命令，会自动提示，按提示引导安装便可。

git是：分布式版本控制系统（多台计算机同时来维护版本库）

18-git-基础概念

git 命令行工具，学习操做命令。

工做区（项目目录）已修改
暂存区已暂存
本地仓库（版本存放的地方）已提交

19-git-基础操做

在使用git版本管理功能----作信息配置工做：

git config --global user.name "zhoushugang"
 git config --global user.email "zhoushugang@itcast.cn"
复制代码

而后进行操做：

初始化本地仓库 git init
查看文件状态 git status 红色已修改绿色已暂存什么都看不到仓库中
添加到暂存区 git add . 所有提交暂存区
从暂存区恢复文件 git checkout 文件路径
提交到本地仓库 git commit -m '备注信息'
查看提交日志 git log
切换版本 git reset --hard 版本号

20-git-远程仓库操做

若是你想分享项目给其余人，须要共享仓库，也称为：远程仓库。
共享仓库在服务端搭建，外网服务器，成本很高，使用共享仓库服务平台。
平台 github gitee(码云) gitlab

21-git-平台github

注册平台的账户
在平台去建立共享仓库
只输入仓库名字，其余不选择，目的：空仓库
提交git push 仓库的网络地址 master
https: github.com/zhousg/baid…
- 输入用户名和密码
ssh:git@github.com:zhousg/baidu.git
- 须要配置免用户名和密码
拉取
- 本地没有仓库 git clone 仓库的网络地址 [项目的名称]
- 本地有了仓库 git pull 仓库的网络地址 master