04

前端TDK
292 阅读9分钟

VUE基础-第四天

01-反馈

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

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

02-回顾

  • 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-组件复习

  • 组件：vue组件开发思想，一个应用都是由组件组成的。
  • 组成部分：html css js 组成，独立的功能。
    • 在vue中怎么去定义组件，在js文件中定义组件，以后在vue文件中定义。
    • 全局定义
    • // 注册组件
Vue.component('com-span',{
    // 组件的配置对象
    // 和 new Vue() 的选项是一样的  排除 el 
    data(){
        return { //组件数据  独立 }
    }，
    // 支持vue的语法   插值  指令
    template:'<div>//内容</div>'，
    methods:{}
})
    • 局部定义
    • new Vue({
    components:{
     	'组件名称'：‘组件配置对象’   
    }
})
    • 影响组件关系的是 使用时候的位置关系
  • 组件关系：因为不同的关系 组件之间的通讯方式是不一样的。
    • 父子组件

      • 父组件向子组件传值

      • 子组件向父组件传值

    • 兄弟组件
    • 不相关组件

04-组件和模块区别

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

05-单页面应用SPA-特点

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

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

  • 前后端分离

    • 代码分离
    • 项目分离 使用组件化开发 使用框架 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插件
  • 安装

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.params|queryroute 获取数据 // 触发事件 跳转 #/detail 地址 ===> 路由的path /detail // router 调用API // 参数 字符串 也可以是对象 {path:'/detail'} {name:'detail'} // 通过通过js调用API跳转 编程式导航 this.router.push({path:'/detail'}) }

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

  • 激活样式 在选中导航的时候 路由默认会加上选中的类名 根据类型写选中样式即可

  • tag属性 当你想显示的是一个标签套着A元素 指定router-link渲染成的标签 tag="li"

      <!-- tag使用 -->
<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安装
  • Mac安装
    • 打开Terminal直接输入git命令，会自动提示，按提示引导安装即可。

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

18-git-基础概念

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

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

19-git-基础操作

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

 git config --global user.name "zhoushugang"
 git config --global user.email "zhoushugang@itcast.cn"

然后进行操作：

  1. 初始化本地仓库 git init
  2. 查看文件状态 git status 红色已修改 绿色已暂存 什么都看不到 仓库中
  3. 添加到暂存区 git add . 全部提交暂存区
  4. 从暂存区恢复文件 git checkout 文件路径
  5. 提交到本地仓库 git commit -m '备注信息'
  6. 查看提交日志 git log
  7. 切换版本 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
avatar
文章
阅读
粉丝