Vue基础一

最新推荐文章于 2022-07-16 19:58:51 发布

cfr1994

最新推荐文章于 2022-07-16 19:58:51 发布

阅读量87

点赞数

分类专栏： Vue 前端框架文章标签：前端开发流程规范前端框架历史 Vue.js

本文链接：https://blog.csdn.net/cfr1994/article/details/102610652

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

9 篇文章 0 订阅

订阅专栏

Vue基础一

1. 前端开发流程规范

 - 目录构建规范
 	- 命名原则

		- 简洁明了
			* src 源代码
			* img 图片资源
			* js JavaScript脚本
			* dep 第三方依赖包
		- 不使用复数
			* imgs / docs

 	- 根目录（root）结构按职能划分

		- src 源代码（逻辑）
 		- doc 文档
 		- dep 第三方依赖包
 		- test 测试

 	- 根据业务逻辑进行文件夹的划分

		- src 目录名词解释：
			- common 公共资源
				img
					logo.png
					sprites.png
				css
					reset.css
				js
					conf.js 项目的配置文件
			- public / static 静态资源
				js
				css
				tpl
					index.html
					shopcar.html
				img
			- component 组件
				home
				shopcar
				login
				register
				user
				list
				detail
			- view / tpl ( template ) 模板文件

 	- 总结

		- 以上目录开发规范有两种使用途径
 			* 使用前端工程化工具（webpack、gulp等）进行手动打造
 			* 利用框架提供的脚手架工具进行修改

 - 前端命名规范
 	+ CSS命名规范
 		+ BEM规范
 			- 概念
 				* Block（块） Element（元素） Modifier（修饰符），它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码
 				* 由拉丁字母, 数字, -组成css的单个名称
 		+ OOCSS规范
 			- 概念
 				* Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码
 				* OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码
 				* 将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去
 	+ JavaScript编写规范
 		+ jslint
 		+ eslint
 - 前端工作规范
 	* 日报
 	* 周报
 	* 邮件格式
 		1. 明确邮件发给谁
 		2. 邮件的主题（有且仅有1个）
 			- 必要时，可以添加：“请批阅”
 		3. 邮件正文
 			- 称呼
 			- 条理分明
 			- 举例：
 				各位领导好：
 					以下内容是xxx，请熟知 / 请批阅
 		4. 部门、职位、姓名、时间
 		5. 附件（添加说明）
 		6. 转发（原邮件说明及转发意图）
 - 开发文档的书写规范
 	* html规范
 	* css规范
 	* js规范（ES6）

2. 前端框架发展历史

html
	html [ 1990 ] --> html5 [ 2008.1.12 ]
css
	css 1.0 [ 1996 ]
	css 2.0 [ 1998 ]
	css 3.0 [ 2001 ]
ECMAScript
	1997年诞生
	ECMAScript 2015 [ 2015 ]
	ECMAScript 2016 [ 2016 ]

MV*
	M Model  数据层
	V View  视图层
	C Controller  控制器（业务逻辑）
	---------- MVC
	P Presenter 提出者（Controller 改名得来的）
	---------- MVP
	VM ViewModel 视图模型（P改名得来的）
	---------- MVVM

Backbone.js  MVP    2010.10
Angular.js( 1.0 )   MVC    2010.10
Angular.ts ( 2.0 )  MVC -> MVVM 2016 目前已经更新到了 Angular9 ( 也属于angular2.0 版本 )
Vue 1.0   MVVVM  2014/07
Vue 2.0   MVVM   2016/09
React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V
学习难度： Vue < React < Angular( 2.0 )

前端流行
	移动  web  &&  hybird app( 混合app )
	app
		1. native app ( 安卓  ios  java ME)
		2. webapp ( 应用在浏览器中的app )
		3. Hybird app ( 混合app ) 
			- webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）

js框架帮助开发者写js逻辑代码

	1. 渲染数据
	2. 操作DOM
	3. 操作cookie等存储机制api

难题：如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？
解决：

而js框架对上述的几个问题都有自己趋于完美的解决方案
开发成本降低。高性能高效率
唯一的缺点就是需要使用一定的成本来学习

3. Vue.js

- 版本
	* Vue 1.0 [ 2014 ]
	* Vue 2.0 [ 2016 ]
	* Vue 3.0 [ 测试版 2019国庆 ]
- vue源代码 【 思维 】
	* 匿名函数

      (function (形参1，形参2...) {
        /* 你的代码 */
      })(实参1，实参2...)

	* 好处:
		1. 防止全局作用域污染
		2. 防止命名冲突
		3. 防止一些脚本的攻击（函数匿名）
		4. 封装js库基本上都是匿名函数

双向绑定（数据 <- - ->视图）

	<body>
      <div id="app">
        <input type="text" v-model = "msg">
        <p> {{ msg }} </p>
      </div>
	</body>
	<script src="../../../lib/vue.js">     		</script>
    <script>
      new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      })
      // new Vue() 得到的结果，我们是以标签化呈现的，`<Root></Root>` ，我们称之为：根实例组件
    </script>

官网地址：https://cn.vuejs.org/
Vue.js框架项目介绍：

Vue.js是尤雨溪的个人项目
Vue.js也是一个MVVM框架
Vue.js它是一个单项数据流的框架
Vue.js是一个Js渐进式框架

cfr1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础一

Vue基础一1. 前端开发流程规范 - 目录构建规范 - 命名原则 - 简洁明了 * src 源代码 * img 图片资源 * js JavaScript脚本 * dep 第三方依赖包 - 不使用复数 * imgs / docs - 根目录（root）结构按职能划分 - src 源代码（逻辑） - doc 文档 - dep 第...
复制链接

扫一扫

专栏目录