小滴课堂-学习笔记：全栈工程师必备之新版Vue2.6 急速掌握核心内容

 愿景："让编程不再难学，让技术与生活更加有趣"

---

更多架构课程请访问 xdclass.net

目录

第1集 新版VueCli 4.3创建vue项目

第2集 新版Vue快速入门之Vue指令和参数

第3集 新版Vue快速入门之v-if 和v-else条件指令

第4集 新版Vue快速入门之v-for 循环指令

第5集 新版Vue快速入门之v-model

第6集 新版Vue快速入门之v-on监听事件

第7集 Vue常见缩写 v-bind和v-on讲解

第8集 新版Vue快速入门之component组件

第9集 新版Vue快速入门之prop向子组件传值

小滴课堂前端项目技术栈介绍和ES6知识点补充

第1集小滴课堂前端项目技术组件概述

第2集 ECMAScript 6常见语法快速入门《上》

第3集 ECMAScript 6常见语法快速入门《下》

干货文档

---

第1集 新版VueCli 4.3创建vue项目

简介：使用vue cli 4.3创建vue项目

• Vue模板语法开发起步

  • 基于 HTML 的模版语法，允许声明式地将 DOM 绑定至底层 Vue 实例的数据。
  • 用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
  • 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件并应用到 DOM 操作上

• 创建测试vue项目

  vue create my-project
  

• vue-cli创建项目，目录介绍

• vscode打开项目

  • 需要打开文件夹，文件夹里面创建Html

• 原生Vue测试基础语法

• 使用cdn引入vue

•  

• {{}}

  • 文本插值

  • 里面JavaScript 表达式支持

    {{5+5}}
    {{ message.split('').reverse().join('') }}
    

     

• Vscode里面快速打开html

  • 安装 Live Server 插件

 

第2集 新版Vue快速入门之Vue指令和参数

简介：讲解什么是Vue指令

• VUE的文档 https://cn.vuejs.org/

• 指令 :带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时，将某些行为应用到 DOM

  • v-bind 指令

    • HTML 属性中的值更新时使用

  • v-if v-else 指令

    • 逻辑判断

  • v-model 指令

    • 实现双向数据绑定，
    • 一般在 input、select、textarea、checkbox、radio等表单上使用

  • v-on指令

    • 监听事件，并对用户的输入进行响应

     

• 参数: 在指令后以冒号指明，例如 v-bind 指令被用来响应地更新 HTML 属性

    小滴课堂   
  

   

• 附加： 指令表达式取值是不用加 双花括号

 

第3集 新版Vue快速入门之v-if 和v-else条件指令

简介：讲解新版Vue条件指令

• v-if v-else逻辑判断

        
 大于0.5  

        
小于0.5  
        

第4集 新版Vue快速入门之v-for 循环指令

简介：讲解新版Vue的v-for 循环指令

• v-for 循环指令

        

            
 
                {{user.name}}
            
        

第5集 新版Vue快速入门之v-model

简介：讲解新版Vue的v-model

• v-model 实现双向数据绑定

    


       
 {{phone}} 
       手机号 
        
    

    

第6集 新版Vue快速入门之v-on监听事件

简介：讲解新版Vue的v-on指令 监听事件

• v-on 监听事件

        
 {{title}} 
       
         完善标题 
        
    


    

第7集 Vue常见缩写 v-bind和v-on讲解

简介：vue常见缩写v-bind和v-on讲解

 

• v-bind缩写

  
  ...
  
  
  ...

   

• v-on缩写

  
  ...
  
  
  ...

   

• 课程代码

  



        
 {{title}} 
       
         完善标题 
        

         点击跳转 

    


    

第8集 新版Vue快速入门之component组件

简介：讲解vue里面的组件

• vue的组件

  • 扩展 HTML 元素，封装可重用的代码（就是通用的模块）

• 注册组件

  • Vue.component(组件名, 选项)

• 组件可以拷贝多次，复用多次

  • 每个组件都会各自独立维护它的数据

  • data 必须是一个函数，而不是前面讲的json对象

    • 每个实例可以维护一份被返回对象的独立的拷贝, 否则数据就会共享出现问题

第9集 新版Vue快速入门之prop向子组件传值

简介：讲解vue里面通过prop向子组件传值

• 向子组件传外部data的里值,需要加 v-bind

或缩写

 愿景："让编程不再难学，让技术与生活更加有趣"

小滴课堂前端项目技术栈介绍和ES6知识点补充

 

第1集小滴课堂前端项目技术组件概述

简介：常见的技术组件的作用

• 学前必备基础： HTML、CSS 、JavaScript、Vue 基础知识

• Vue: 用于构建用户界面的渐进式JavaScript框架

• 什么是Cube-UI

  • 基于 Vue.js 实现的精致移动端组件库
  • 地址：https://didi.github.io/cube-ui/#/zh-CN

• Vuex: 在Vue项目开发时使用的状态管理工具

  • state：存储数据
  • mutations：同步修改存储数据
  • actions: 异步修改存储数据
  • getters：获取存储数据前进行修改

   

• Axios: 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

  • 从浏览器中创建 XMLHttpRequest,也可以 node.js 发出 http 请求，
  • 支持 Promise API
  • 支持拦截请求和响应，并转换数据

• Vue-router：Vue官方的路由管理器，实现页面前端路由 Hash模式（默认）： History模式：

 

 

第2集 ECMAScript 6常见语法快速入门《上》

简介：讲解ES6里面常见的语法上集

• 什么是ES6 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
• let、const 语法 let : 定义变量，推荐在函数中使用 let 定义变量，而非 var const： 它可以声明一个常量（如果是普通的变量一般大写）

• 箭头函数： ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟一个 =>，紧接着是函数体

  //以前js定义函数
  var sum = function(num1,num2) {
     return num1 + num2;
  };
    
  // 使用箭头函数
  let sum = (num1,num2) => num1 + num2;

   

• 对象词法扩展: 在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法

  function getVideo(make, model, value) {
    return {
      // 简写变量
      make,  // 等同于 make: make
      model, // 等同于 model: model
      value, // 等同于 value: value
    };
  }
   
  let video = getVideo('java', 'java', 99);
  
   output: {
     make: 'java',
     model:'java',
     value: 99,
  }
  

   

第3集 ECMAScript 6常见语法快速入门《下》

简介：讲解ES6里面常见的语法下集

• 解构赋值 一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

  let [a, b, c] = [1, 2, 3];
  // a = 1
  // b = 2
  // c = 3
  let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
  // foo = 'aaa'
  // bar = 'bbb'
   

   

• 在ES6中如何导入模块 import 模块名称 from '模块标识符'

  import axios from 'axios'
  
  import { loginApi } from '@/api/getData.js'
  

   

• 在ES6中如何导出模块

  • 方式一： export default 向外暴露的成员可以使用任意的变量来接收 注意：在一个模块中只能使用export default向外暴露一次

    //user.js
    export default {
        name: 'xdclass.net',
        age: 10
    }
    
    //main.js
    import xd from './user'
    //xd 为一个包含 name 和 age 属性的对象

     

  • 方式二： export 向外暴露的成员只能使用 {} 接收，这叫做 按需导出 注意：一个模块中可以同时使用 export default 和 export 暴露成员

    // user.js
    export default {
        name: 'xdclass.net',
        age: 10
    }
    
    export var teacher = "小滴课堂-二当家小D"
    export var content = '全栈工程，和隔壁老王比较熟悉'
    //main.js
    import xd, { teacher,content } from './user'
    

     

干货文档

                                                        关注公众号发送：“CSDN干货文档”  即可领取