Vue

发布日期: 2020-06-02

文章字数: 1.6k

阅读时长: 8 分

阅读次数:

第1章课程介绍

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

1-1 课程简介

课程流程

知识点

课程安排

学习前提

讲授方式

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

课程收获

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

第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 展示

实例:

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 设计模式

只要操作 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介绍部分文档, 查漏补缺

v-bind attribute 被称为指令
app3.seen = false : 显示或隐藏元素
v-for 指令可以绑定数组的数据来渲染一个项目列表
- v-for="todo in todos"
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
- v-on:click="reverseMessage"

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 实例。

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

Component Tree

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

点击去GitHub查看完整版

Eish

https://iknow.fun/2020/06/02/vue2-5-cong-ling-ji-chu-ru-men-dao-shi-zhan-xiang-mu-kai-fa-qu-na-er-wang-app/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Eish !

Web Vue

Node.js从零开发web server博客项目

2020-06-03 Node.js

JavaScript Node.js

JavaScript ES6-10语法

2020-06-02 JavaScript

Web JavaScript

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

第1章 课程介绍

1-1 课程简介

课程流程

知识点

课程安排

学习前提

讲授方式

课程收获

第2章 Vue 起步

2-1 课程学习方法

2-2 hello world

2-3 开发TodoList（v-model、v-for、v-on）

2-4 MVVM模式

2-5 前端组件化

2-6 使用组件改造TodoList

2-7 简单的组件间传值

2-8 章节小结

点击去GitHub查看完整版

第1章课程介绍