vue的认识

最新推荐文章于 2023-06-14 19:28:12 发布

ShirleyXuMM

最新推荐文章于 2023-06-14 19:28:12 发布

阅读量360

点赞数

本文链接：https://blog.csdn.net/shirleyxumm/article/details/93336813

版权

书写一个前端开发文档参考：

http://showdoc.wkefu.com/showdoc/index.php?s=/22&page_id=1070

vue初步认识

<body>
<div id="app">
<p> {{ msg }} </p>
</div>
</body>

<script>
/*
使用script标签引入，那么会暴露一个 Vue的全局变量
Vue是一个构造器函数
我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（ 双大括号 ）


我们将js的语法写在{{}} 里面


new Vue的到的实例，我们这边称之为 根实例


很实例也是一个组件


组件： 组件是一个具有 html css js等的一个聚合体




数据改变，视图就会跟着改变，这种形式我们称之为： 数据驱动视图


M -> VM




问题：
1. 为什么script标签引入之后，就会有一个全局变量呢？


( function ( global ) {
console.log( global ) //window对象
global.Vue = function(){}
})( this )


2. 为什么模块化引入( npm/cnpm/yarn )也可以呢？


vue使用了 Module.exports / amd
( typeof exports ==='object' ) && ( typeof module !== 'undefined' ) ?


module.exports = factory() // Vue :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());


看Vue.js源代码
1. 是有匿名函数来进行封装的
( function () {})()


第一个() 是匿名函数的定义


第二个() 是匿名函数调用


匿名函数好处：
1. 安全性高
2. 解决命名冲突


( function ( global, factory ) {
// global 指的全局对象
// factory 工厂函数
})( this, function () {})
2. Vue是如何即可以使用Vue全局变量，也可以模块化安装
3. 它是利用原型来进行封装的


4. 原型的使用


function Fn ( options ) {
//this 实例中 fn的到的结果 实例 var fn = new Fn()
}


Fn.protype.name = "Gabriel Yan "
Fn.protype.init = function () {
console.log( '功能' )
}


*/

// console.log( Vue )

// new Vue( options )
var vm = new Vue({
el: '#app', //el表示我们的实例需要一个模板
data: { //是用来给实例定义数据的
msg: 'hello Vue.js'
}
})


</script>
</html>

注：vue.html文件要在live-server服务器中打开

前端发展历史

html html [1990]----> html5 [2008.1.12]

css css 1.0 1996 css 2.0 1998 css 3.0 2001

EcmaScript 1997年诞生 2015 EcmaScript 2015 2016 EcmaScript 2016 dart语言 vs javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M Model 数据层 V View 视图层 VM ViewModel 视图模型（业务逻辑 VM 是由 P 改名得来的） P Presenter 提出者（ Controller 改名得来的） C Controller 控制器 ( 业务逻辑 )

Backbone.js MVP 2010.10

Angular.js( 1.0 ) MVC 2010.10

Angular.ts ( 2.0 ) MVC -> MVVM 2016 目前已经更新到了 Angular7 ( 也属于angular2.0 版本 )

Vue 1.0 MVVVM 2014/07

Vue 2.0 MVVM 2016/09

React 2012 不太认可前端MVC这种架构思想，你可以将React单纯看做是MVC中V
github统计量（国际使用量）不代表大陆地区单位是： K

angular.js angular.ts vue React

前端流行

移动 web && hybird app( 混合app )

app

native app ( 安卓 ios java ME)
webapp ( 应用在浏览器中的app )
Hybird app ( 混合app )
webapp 嵌入第三方原生应用库（可以访问原生设备（手机）的接口权限，比如：照相机）

前端框架时间
在这里插入图片描述
MV*的图示

MVC | C改名为P MVP | P更像是媒人了（连接 M V 的桥梁） MVVM | VM 是由 p改名得来的 VM 和 V 的关系更加的亲密 | “MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样
注意：我们以上的这几个框架都是：单向数据流（数据由父级流向子级）

vue.js安装
1. script标签引入（ cdn| 下载）
2. 模块化安装 npm/cnpm/yarn

ShirleyXuMM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的认识

书写一个前端开发文档参考：http://showdoc.wkefu.com/showdoc/index.php?s=/22&page_id=1070vue初步认识<body><div id="app"><p> {{ msg }} </p></div></body><script>/*使...
复制链接

扫一扫