Vue-----vue基础和git仓库

1、回顾

  • 1.1 复习nodejs、url、querystring、express脚手架，ejs模板语法
  • 1.2 mongodb基本语法，mongoose的增加和查询
  • 1.3 mongoose的更新和删除，使用adminlte模板整合express项目
  • 1.4 后台管理系统之用户管理的增删改查，导入
  • 1.5 用户登录，验证登陆，接口的实现、跨域、文件的上传、SSR，seo，socket

2、vue基础

2.1、开发规范

2.1.1 工作目录构建规范

为提高团队协作效率，规范文件管理，方便项目后期维护，提高代码质量

  1. 页面存放目录：文件夹命名均首字母大写
  2. 静态文件存放目录：所有文件及文件夹命名均为小写

c6f10e53af43cff3d5ebf82a50f5528e.png

vue、react项目 利用脚手架生成项目
开发中谨记 组件的首字母大写

2.1.2 代码命名规范

1、BEM命名方式

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思
想是将页面 拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复
杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种
程度上，BEM和OOP是相似的。

dd92b739e3f79908737113c275e24e04.png

b83e17d9e1a78ad4480eb58c908a2849.png

2、OOCSS

OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方
法，一种书写方法，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最于净的
CSS代码，从而使代码更具重用性，可维护性和可扩展性 （ 把原本写在一起的样式， 拆
开多个class 写，提高可复用性）

e054da9990a6d12fb1ecbfc5455442b4.png

3. Eslint

eslint — js书写规范

代码检测，是否符合规范

ESLint 这样的可以让你在编码的过程中发现问题，并且可以自己创建检测规则，保持
代码编写风格的一致性

安装依赖

cnpm i eslint -g
cnpm i eslint-plugin-vue -g

用命令新建eslintrc.js文件

eslint --init

4、语义化标签

元素周期表

29ccf3183bae8c8d7736cebda200b14f.png

2.2 工作规范

2.2.1 日报、周报

技术点

反馈当天以及当周所学的东西
反馈当天以及当周所疑惑的东西

复习与总结

当天以及当周复习了那些知识点
总结今天的收获

2.2.2 提交规则

组员发邮件给组长，组长发邮件给班长 603660895@qq.com，班长邮件发送至 wuxunxun@1000phone.com

组长发给班长之前，需要标注谁没有交
班长发送之前，需要标注谁没有交
日报未交者，最少一组
周报未交者，同上加一组，最少二组
每组30-40个

2.3 前端发展史

1994年可以看做前端历史的起点

1995年网景推出了JavaScript

1996年微软推出了iframe标签， 实现了异步的局部加载

1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XMLHttpRequest

function createXHR(){
                if(typeof XMLHttpRequest != "undefined"){
                        return new XMLHttpRequest();
                }else if(typeof ActiveXObject != "undefined"){
                        var version = [
                                "MSXML2.XMLHttp.6.0",
                                "MSXML2.XMLHttp.2.0",
                                "MSXML2.XMLHttp"
                        ];
                        for(var i = 0;i<3;i++){
                                /*return new ActiveXObject(version[i]);*/
                                //使用try{}catch{}防止在创建对象时出错
                                try{
                                        return new ActiveXObject(version[i]);
                                }catch(e){
                                        //TODO handle the exception
                                }
                        }
                }else{
                        //如果都不支持，则抛出异常
                        throw new Error("您老的浏览器实在是不行了")
                        //alert("您老的浏览器实在是不行了");
                }
        }

2006年，XMLHttpRequest被W3C正式纳入标准

2006年, 发布了jQuery

2008年问世的谷歌V8引擎，发布H5的草案

2009年发布了第五代JavaScript

2009年 AngularJS 诞生

2010年 backbone.js 诞生。

2011年React和Ember诞生

2014年Vue.js诞生

2014年，第五代HTML标准发布

2014年左右，4G时代到来，混合开发（js, android, ios混合开发）

2016年 微信小程序诞生

2017年 微信小程序正式投入运营

2017年底年 微信小游戏

以前的三大框架： angular, react, vue
现在： react， vue， 小程序（微信、支付宝、百度、头条）

以后： js ----- ts (typescript)

git操作

git上传无需输入密码

1.配置用户名及邮箱
b3216af7bb838f058036507b252a6a7c.png

2、生成ssh key

(1)在bash中执行以下命令：ssh-keygen -t rsa -C 'xxx@xxx.com'，然后一路按回车
faec41b78848b324807c2b17feb2d968.png
5b8b90f792f8d388e9dd1e5cb9ba9710.png

(2)然后打开~/.ssh/id_rsa.pub文件(~表示用户目录，比如我的windows就是C:\Users\Administrator.ssh)，复制其中的内容
de9f28c5f172b566f547d511e1825c6c.png

（3）打开github, Settings -> SSH and GPG keys -> New SSH key,并把上一步中复制的内容粘贴到Key所对应的文本框，在Title对应的文本框中给这个sshkey设置一个名字，点击Add SSH key按钮,输入密码即可
2a67e21d23d5f5beb67e994728f410fe.png
4bbc62b2a439545a4c48ddef14504b3f.png
2b7efd7d2fc3872bcbfd1813829bb117.png
510f19b144c4eb54ed6a1d2d16b497d3.png
11797a310e1f0ca9ee2c1c9553308fa9.png
2980668ea4e6ac71ead5c76d42cb0afb.png

本地

git init
git add .
git commit -m ''
git remote add origin git@github.com:wuxunxun007/sh1904-vue.git
git push -u origin master -u只有在第一次提交代码时添加
git push origin master

2.4 初识VUE

vue
构建数据驱动的web应用开发框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

Vue 被设计为可以自底向上逐层应用

Vue 的核心库只关注视图层

便于与第三方库或既有项目整合

Vue 不支持 IE8 及以下版本，

2.5 MV*模式

MVC框架最早出现在Java领域，然后慢慢在前端开发中也被提到，后来又出现了MVP，以及现在最成熟的MVVM。

  • MVC
    model 数据模型
    view 视图
    controller 控制器

MVC全名是Model View Controller，是模型(model)-视图(view)-控制器(controller)的缩写
用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
View(视图)是应用程序中处理数据显示的部分。
       Controller(控制器)是应用程序中处理用户交互的部分。
优点：耦合性低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理 
缺点：由于模型和视图要严格的分离，这样也给调试应用程序带来了一定的困难。每个构件在使用之前都需要经过彻底的测试。

41051e875589b753b83f9608ced4459d.png

  • MVP
    model
    view
    presenter

MVP是单词Model View Presenter的首字母的缩写，分别表示数据层、视图层、发布层，它是MVC架构的一种演变。作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。 
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
各部分之间的通信，都是双向的。
View 与 Model 不发生联系，都通过 Presenter 传递。
       View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

4e88b7f79bd4c62eae567ad99c912c7f.png

  • MVVM
    model
    view
    viewmodel

MVVM(Model View ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。
Model代表我们整个webapp所需要的数据模型，一个典型的例子就是用户信息Model,它应该含有(姓名，年龄等属性)。Model含有大量信息，但它并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。
MVVM中View是具有主动性的，因为它包括了一些数据绑定，事件，和行为，这些都会直接影响Model和ViewModel的。它不但负责保持View自身的行为（展示），而还会将自身的变化同步到ViewModel中。
可以把ViewModel看作一个藏在View后面的好帮手，它把View需要的数据暴露给它，并且赋予View一定的行为能力。

59003ed69b7fc88367f587a1b907501f.png

2.6 Vue实现数据绑定的原理

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题

vue数据双向绑定原理

2.6.1 vue中数据双向绑定的体现

01.init.html

{{ msg }}
<div id="app">
    <p>v-model属于vue中表单数输入的一个指令，实质是一个属性，属性的值是一个变量 msg</p>
    <input type="text" v-model="msg"/>
    {{ msg }}
</div>

<script src="vue.js"></script>
<script>
    const app = new Vue({
        el: '#app', // 找到那个DOM节点内要使用vue语法
        data: { // 初始化的数据
         msg: 'hello vue'
        }
    })
</script>

2.6.2 vue数据双向绑定原理

vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现的

数据劫持的实现方式 Object.defineProperty()

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

var Book = {
    name: '124436466'
};
var name = "";
console.log(Book.name) // 124436466
    Object.defineProperty(Book, 'name', {
    set (value) {
        name = value;
        console.log('你取了一个书名叫做' + value) // 你取了一个书名叫做123
    },
    get () {
        return '《' + name + '》'
    }
})
console.log(Book.name) // 《》 ---- 调用的是get方法
Book.name = '123' // 相当于调用的是set方法
console.log(Book.name) // 《123》
console.log(Book)

原理

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

c341bfa690056d1a76e7565446c33cbe.png

 

---------------------------------------------------------------------------------------------文章来自吴大勋（大勋说）

 

posted @ 2020-04-20 23:39  haccer  阅读(636)  评论(0)  编辑  收藏  举报