Vue2.5从零基础入门到实战项目开发去哪儿网App


项目代码

第1章 课程介绍

本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获。

1-1 课程简介

课程流程

image-20200128143518066

知识点

image-20200128143531674

课程安排

image-20200128143728763

学习前提

image-20200128143807549

讲授方式

  1. 通俗易懂的案例讲解
  2. 借助基础知识实现项目
  3. 带着你编写每一行代码
  4. 图文讲解复杂知识点

课程收获

  1. 彻底入门Vue的使用
  2. 理解整个Vue项目的开发流程
  3. 移动端页面布局技巧
  4. 上手中型Vue项目的开发
  5. 规范的代码编写

第2章 Vue 起步

本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,
在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势。

2-1 课程学习方法

官方文档:

https://cn.vuejs.org/v2/guide/

  • 基于官方文档
    • 视频学习后看官方文档

2-2 hello world

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello world</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">{{content}}</div>
  <div>{{content}}</div>
  <script>
    // document.getElementById('app').innerHTML = 'Hello world'
    var app = new Vue({
      el: '#app',
      data: {
        content: 'Hello world'
      }
    })
    setTimeout(function () {
      app.$data.content = 'hi bye'
    }, 1000)
  </script>
</body>

</html>

2-3 开发TodoList(v-model、v-for、v-on)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TodoList</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        list: ['第一课的内容', '第二课的内容'],
        inputValue: ''
      },
      methods: {
        handleBtnClick() {
          this.$data.list.unshift(this.inputValue)
          this.inputValue = ''
        }
      },
    })
  </script>
</body>

</html>

2-4 MVVM模式

传统的 MVP 设计模式

  • Model : 数据层
  • Presenter : 呈现层, 业务逻辑
  • View : 视图层, DOM 展示

image-20200128165658026

  • 实例:

    • 80% 代码在操作 DOM
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>TodoList JQuery</title>
      <script src="./jquery1.12.4.js"></script>
    </head>
    
    <body>
      <div id="app">
        <input type="text" id="input">
        <button id="btn">提交</button>
        <ul id="list"></ul>
      </div>
      <script>
        // M (模型层) V 视图 P(控制器)
        function Page() {
    
        }
        $.extend(Page.prototype, {
          init: function () {
            this.bindEvents()
          },
          bindEvents: function () {
            var btn = $('#btn')
            btn.on('click', $.proxy(this.handleBtnClick, this))
          },
          handleBtnClick: function () {
            var inputElm = $("#input")
            var inputValue = inputElm.val()
            var ulElem = $("#list")
            ulElem.append('<li>' + inputValue + '</li>')
            inputElm.val('')
          }
        })
    
        var page = new Page()
        page.init()
      </script>
    </body>
    
    </html>

MVVM 设计模式

image-20200128172339251

  • 只要操作 Model 层和 View 层
  • Vue 自动帮我们操作 ViewModel 层
    • 通过 Object.defineProperties 和 虚拟 DOM 实现

2-5 前端组件化

  • 每个组件就是页面的一个区域

2-6 使用组件改造TodoList

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TodoList</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <!-- <li v-for="item in list">{{item}}</li> -->
      <todo-item v-bind:content="item" v-for="item in list">
      </todo-item>
    </ul>
  </div>
  <script>
    // // 全局组件
    // Vue.component("TodoItem", {
    //   props: ['content'], // 接收 v-bind:content 传递的值
    //   template: "<li>{{content}}</li>" // 模板内使用字符串
    // })

    var TodoItem = {
      props: ['content'],
      template: "<li>{{content}}</li>"
    }

    var app = new Vue({
      el: '#app',
      components: {
        TodoItem: TodoItem // 注册局部组件
      },
      data: {
        list: ['第一课的内容', '第二课的内容'],
        inputValue: ''
      },
      methods: {
        handleBtnClick() {
          this.$data.list.unshift(this.inputValue)
          this.inputValue = ''
        }
      },
    })
  </script>

</body>

</html>

2-7 简单的组件间传值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TodoList</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <!-- <li v-for="item in list">{{item}}</li> -->

      <!-- v-bind: 可以简写为: -->
      <!-- v-on: 可以简写为@ -->
      <!-- @delete="handleItemDelete" 监听 $emit 传递的 delete 事件 -->
      <todo-item :content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete">
      </todo-item>
    </ul>
  </div>
  <script>
    // // 全局组件
    // Vue.component("TodoItem", {
    //   props: ['content'], // 接收 v-bind:content 传递的值
    //   template: "<li>{{content}}</li>" // 模板内使用字符串
    // })

    var TodoItem = {
      // 父组件向子组件传值, v-bind: 发送和 props 接收
      props: ['content', 'index'],
      template: "<li @click='handleItemClick'>{{content}}</li>",
      methods: {
        handleItemClick: function () {
          // $emit 向外触发事件; 父组件监听此事件传值
          this.$emit("delete", this.index);
        }
      }
    }

    var app = new Vue({
      el: '#app',
      components: {
        TodoItem: TodoItem // 注册局部组件
      },
      data: {
        list: ['第一课的内容', '第二课的内容'],
        inputValue: ''
      },
      methods: {
        handleBtnClick: function () {
          this.$data.list.unshift(this.inputValue)
          this.inputValue = ''
        },
        handleItemDelete: function (index) {
          this.list.splice(index, 1)
        }
      },
    })
  </script>

</body>

</html>

2-8 章节小结

作业: 仔细阅读Vue介绍部分文档, 查漏补缺

  1. v-bind attribute 被称为指令

  2. app3.seen = false : 显示或隐藏元素

  3. v-for 指令可以绑定数组的数据来渲染一个项目列表

    • v-for="todo in todos"
  4. v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法

    • v-on:click="reverseMessage"
  5. v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定

    • <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
      </div>
      <script>
      var app6 = new Vue({
        el: '#app-6',
        data: {
          message: 'Hello Vue!'
        }
      })
      </script>
  6. 组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树:

    • 一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

    • // 定义名为 todo-item 的新组件
      Vue.component('todo-item', {
        template: '<li>这是个待办项</li>'
      })

Component Tree

  1. 子单元通过 prop 接口与父单元进行了良好的解耦。

点击去GitHub查看完整版


文章作者: Eish
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Eish !
评论
 上一篇
Node.js从零开发web server博客项目 Node.js从零开发web server博客项目
Node.js从零开发web server博客项目 篇幅过长, 仅展示目录和部分代码 点击去GitHub查看完整版开发接口(不用框架)http请求概述 DNS 解析,建立 TCP 连接,发送 http 请求 server 接收到 http
2020-06-03
下一篇 
JavaScript ES6-10语法 JavaScript ES6-10语法
第1章 课程介绍与环境搭建 JS作为前端的立身之本,让大家了解学习这门课的必要性。考虑到很多同学刚刚接触前端或者对工程化方法不太了解,为了快速进入到学习状态,我们提供了极其简单的方式帮大家准备好学习环境。 1-1 课程导学 试看怎么学?
2020-06-02
  目录