• 前端框架Vue2.0+Vue3.0学习笔记01

    一、Vue技术_课程简介

    1、前端框架小白

    2、熟练掌握Vue2

    3、轻松玩转Vue3

    ①、vue基础

    ②、vue-cli

    ③、vue-router

    ④、vuex

    ⑤、element-ui

    ⑥、vue3

    二、Vue技术_Vue简介

    1、Vue是什么？

    一套用于构建用户界面（把你拿到手里的数据，通过某种办法变成用户可以看见的界面）的渐进式（Vue可以自底向上逐层的应用：①、简单应用:只需一个轻量小巧的核心库 ②、复杂应用：可以引入各式各样的Vue插件。逐渐递进：从一个轻量小巧的核心库逐渐递进到使用各式各样的Vue插件）JavaScript框架

    2、谁开发的？

    尤雨溪

    3、Vue的特点

    ①、采用组件化模式，提高代码复用率、且让代码更好维护。

    ②、声明式编码，让编码人员无需直接操作DOM，提高开发效率。

    ③、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

    4、学习Vue之前要掌握的JavaScript基础知识

    ES6语法规范：解构赋值、模板字符串、箭头函数

    ES6模块化：默认暴露、分别暴露、统一暴露 import export

    包管理器：npm、yarn、cnpm

    原型、原型链：

    数组常用方法：过滤一个数组、加工一个数组、筛选最值

    axios：

    promise：

    ......

    三、Vue技术_Vue官网使用指南

    https://cn.vuejs.org/

    四、Vue技术_搭建Vue开发环境

    引入vue.js文件

    五、Vue技术_Hello小案例

    六、Vue技术_分析Hello案例

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <title>初始Vue</title>
    6.         <!-- 引入Vue（可以说是对象也可以说是函数）如果你引入了Vue，全局就多了Vue这个构造函数 -->
    7.         <script type="text/javascript" src="../js/vue.js"></script>
    8.     </head>
    9.     <body>
    10.         <!--
    11.             初识Vue:
    12.               1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    13.               2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
    14.               3、root容器里的代码被称为【Vue模板】
    15.               4、Vue实例和容器是一一对应的；
    16.               5、真实开发中具有一个Vue实例，并且会配合着组件一起使用；
    17.               6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
    18.               7、一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；
    19.         -->
    20.  
    21.         <!-- 准备好一个容器 -->
    22.         <div id="root">
    23.             <h1>Hello, {{name.toUpperCase()}}, {{address}}</h1>
    24.         </div>
    25.  
    26.         <script type="text/javascript">
    27.             Vue.config.productionTip = false //阻止 Vue 在启动时生成生产提示
    28.  
    29.             //创建Vue实例
    30.             const x = new Vue({
    31.                 el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
    32.                 data:{ //data中用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成一个对象。
    33.                     name:'nanjing',
    34.                     address:'北京'
    35.                 }
    36.             })
    37.         </script>
    38.     </body>
    39. </html>

  • 相关阅读:
    初次使用IntelliJ IDEA从零开始学习创建maven项目
    Windows操作系统登录双因素认证解决方案 安当加密
    hive-批量导出表结构，导入表结构
    k8s node环境部署(三)
    Leetcode算法题
    有什么最受欢迎的干葡萄酒选择？
    智慧工地：助力数字建造、智慧建造、安全建造、绿色建造
    Flutter教程之 01配置环境并运行demo程序 （教程含源码）
    安卓应用自动化测试工具Appium实操分享
    西安华为od前端-机试
  • 原文地址：https://blog.csdn.net/xizheng2018/article/details/133641433