精华内容
下载资源
问答
  • 前端框架
    千次阅读
    2022-04-10 15:41:36
    • 框架,目的很简单,能帮助我们提高效率
    • 框架对现代化项目开发模式的意义。
    前端框架第一阶段

    最开始, Web 的开发非常简单, 界面的展示与后端逻辑的处理并没有分离开来,当然从工程量的角度来看,应用逻辑也是非常简单,此时并没有什么前端与后端的区别,如图:

    前端框架第二阶段

    随着业务量和功能的增加,以及网民们对应用的美观度都有了一定的要求之后,一个 Web 应用的开发逐渐复杂起来,一两个人是根本无法承担全部的开发任务的,这就需要大家通力合作,而一个应用的开发也就分为了不同的模块,工程师也就分为了不同的工种,这个时候,我们才看到一个 Web 应用的制作,需要涉及到前端工程师、后端工程师、运维工程师、UI 设计师。

    对于一个 Web 应用来说,交互逻辑都是在前端产生的,因此后端需要对数据进行拼装,前端在技术上其实只负责数据的展示和 UI 的渲染工作,前后端的逻辑并没有彻底分离开,在小型 Web 应用中,这并没有什么问题,但是随着业务量的不断增长,后端负责页面产出的工作越来越繁琐。

    为了能够明确应用职责,将数据的处理和展示彻底分开,前后端分离的设计模式逐渐流行;前端需要展示的数据通过网络请求发送给服务器,得到数据之后,再有前端进行渲染展示,这样服务器只负责提供对应的数据即可,服务器不再负责页面渲染的工作

    • 那么前端,就需要一个强大的数据与 DOM 的交互工具,这个工具,就是现在非常流行的前端框架
    前端框架第三阶段

    通过前面的介绍,我们对目前的项目工程化有了大体了了解,那么其中,在第二阶段的工程化演进中,有一个重要的工程设计理念诞生,他就是著名的 MVC 设计模式,简单点,MVC其实就是为了项目工程化的一种分工模式

    前端框架第四阶段

    MVC 中的最大缺点就是单项输入输出,所有的 M 的变化及 V 层的变化,必须通过 C 层调用才能展示;这也就是为什么在大型项目中,后端渲染力不从心的原因之一,前后端分离的架构中,是将 MVC 中的 V 层删除,不再由 服务器端负责;而前端拥有了大量的数据处理任务后,借助 MVC 的分工职责理念,发展出了MVVM的架构逻辑。

    • MVVM其实就是将数据层和展示层分开,数据改变后带来的渲染的改变,交给 工具 负责,这个工具,就是我们要学习的框架
    更多相关内容
  • metronic 8.0.35 前端框架

    2022-03-22 14:12:44
    Metronic v8.0.35 基于Bootstrap5 前端框架 支持HTML, React, Angular, VueJS & Laravel 仅供参考学习使用
  • 20个优秀的前端框架

    2021-03-02 09:03:48
    时髦、直观并且强大的前端框架,让Web开发变得更加容易最先进的响应式前端框架。960gs提供了一个简单的网格系统,适合快速开发。非常漂亮的Web模板,适合响应式、移动友好的开发。适合网站快速开发的极简HTML构建...
  • html+vue+laravel管理后台模板前端框架Vito.rar
  • 这是C# mvc 5框架快速搭建文档,包含bootstrap前端框架
  • 本课程主要介绍ArcGIS API for JavaScript的开发,结合目前主流的前端开发框架React和Vue来进行详细的讲解,ArcGIS API for JavaScript版本选择最新版的4.14版本。课程主要包括在React和Vue中ArcGIS API for ...
  • hplus_前端框架_

    2021-10-01 06:37:20
    这是一套基于jquey的各种ui界面的框架整理,用于基于jquery框架下的各种前端小控件
  • Element UI 完整版 源码 可用 vue+Element-UI 前端框架
  • 蚂蚁金服前端技术发展历程的详细介绍,可以为其它公司前端技术的发展提供详细的参考和借鉴意义。 框架像一个魔法球,把各种技术栈吸到一起,加工后吐给用户,以此来支撑业务。
  • H-ui前端框架系统

    2019-05-05 21:11:45
    H-ui前端框架系统是基于 HTML、CSS、JAVASCRIPT开发的轻量级web前端框架 http://www.h-ui.net/index.shtml 。这里是官方的网址,可以 免费下载的。我这里仅做保存一下。
  • 前端框架是什么?框架这个词能够让你想到那些东西?第一时间想到的是不是jquery、backbone、angular等等,其实我想是这样的,框架是提供一套完整的解决方案,按照规定好的代码结构来做编排,同时前端功能越来越强大...
  • 本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变...
  • Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品,这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室,同样也能满足3D自由艺术家。
  • VUE前端框架

    千次阅读 2021-11-16 20:12:07
    MVVM框架 入门案例 创建HTML文件,并引入vue.js 练习 Vue的基础语法 –1,运算符&函数 –2,解析类型丰富的data –3,data的三种写法 二,Vue的指令 –1,概述 –2,v-model & v-cloak -3,v-if &...

    目录

    vue

    概述

    MVVM框架

    入门案例 

     创建HTML文件,并引入vue.js

    练习

    Vue的基础语法

    –1,运算符&函数

    –2,解析类型丰富的data

    –3,data的三种写法

    二,Vue的指令

    –1,概述

    –2,v-model & v-cloak

    -3,v-if & v-show & v-for

    –4,v-on & v-bind

    三,Vue组件Component

    –1,概述

    –2,全局组件

    –3,局部组件

    四,Vue的Ajax

    –1,Ajax的概述

    –2,Ajax的原理

    –3,axios(导入)

    –4,测试

    五,Vue路由

    –1,概述

    –2,使用步骤(测试)

    –3,总结

    扩展:

    –1观察者模式

    HBuilderX自定义模板

    –1,自定义HTML模板

    –2,vue模板.txt

    –3,创建新文件调用模板



    vue

    概述

    是一个轻量级的前端框架.封装了HTML CSS JS的代码.
    特点:
    1, 是一个轻量级的 渐进式的框架, 按需配置
    2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)
    3, vue框架可以避免了DOM的API
    4, 遵循了MVVM设计模式,实现前端代码的松耦合
    M是Model,是指数据
    V是View,是指视图
    VM是ViewModel,是指在指定视图里渲染指定数据
    官网:

    https://cn.vuejs.org/ #官网

    https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本
     

    MVVM框架

    入门案例 

    把vue.js导入到你的项目中

    上面看似结构非常简单,其实却深藏奥秘。和传统框架不同,Vue采用了最新的MVVM框架,它最大的特点就是:传统js机制操作的是页面,如我们之前写的html+css+js案例,大家会发现页面和页面里的数据混杂在一起。

    而MVVM框架体系引入后端早已深入人心的分层思想,是后端MVC框架的延伸,实现把数据和页面分离。我们可以在页面布局好后,只对数据进行操作,当数据改变,页面上的内容会自动随之改变,而无需开发者开发专门的代码去改变,如之前ajax技术实现的局部刷新。

    简而言之,MVVM框架实现了页面和数据的分离,代码结构更加清晰,责任更加明确,同时实现自动化,数据变化,页面随之变化,无需写代码,非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的,也是前端为何开始推崇Vue这些框架的根本原因,也标示着jquery的终结。

     创建HTML文件,并引入vue.js

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 vue框架</title>
    		<!-- 1.引入vue.js来用vue框架的核心功能 
    			src用来指定js文件的位置
    		-->
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<!-- 2.准备解析vue的数据 
    			{{message}}是插值表达式,用来获取message的值
    		-->
    		<div id="app"> {{message}} </div>
    		<!-- 3.给第二步准备数据 -->
    		<script>
    			var a={
    				message:"hello vue~"
    			}
    			//1,创建Vue对象
    			new Vue({
    				//el挂载点,意思是,把数据挂载到指定位置
    				el:"#app",//利用CSS的id选择,选中了网页中的元素
    				//data是vue为挂载点准备好的数据
    				data:a
    			})
    		</script>
    	</body>
    </html>
    
    

    练习

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>练习 vue开发步骤</title>
    		<!-- 1.引入vue.js -->
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<!-- 2.准备数据渲染区,插值表达式获取属性的值-->
    		<div id="app">
    			姓名:{{name}}
    			年龄:{{age}}
    		</div>
    		<!-- 3.创建Vue对象 -->
    		<script>
    			new Vue({
    				el:"#app" , //挂载点
    				data:{ //给挂载点准备数据
    					name:"jack" ,
    					age:20
    				} 
    			})
    		</script>
    	</body>
    </html>
    
    

    Vue的基础语法

    –1,运算符&函数

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 vue的运算符</title>
    		<!-- 1.引入vue.js -->
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<!-- 2.准备数据渲染区 创建Vue对象 -->
    		<div id="app">
    			加减乘除运算: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
    			三元运算符: {{ age > 18 ? "成年人" : "未成年" }}
    			字符串的常见操作:{{str}} {{str.length}} {{str.concat(100)}}
    		
    			调用函数: {{ show() }}  {{ print(100) }}  {{add(1,2)}}
    		</div>
    		<!-- 3.创建Vue对象 -->
    		<script>
    			new Vue({
    				//指定挂载点的位置,每个Vue对象必须有这个el属性!!!
    				el:"#app",
    				data:{ //给数据渲染区准备数据
    					age:10,
    					str:"hello"
    				},
    				methods:{ //准备函数
    				 //函数名:函数的声明
    					show:function(){
    						console.log("show()调用成功!");
    					},
    					print:function(a){
    						console.log("print()调用成功"+a);
    					},
    					add:function(a,b){
    						console.log(a+b);
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    
    

    –2,解析类型丰富的data

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 vue解析复杂的数据</title>
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{{name}}
    			<h1>解析vue对象的数据:</h1>
    			<h1>姓名:{{person.name}}  年龄:{{person.age}} </h1>
    			<h1>解析vue数组的数据:</h1>
    			<h2>{{hobby}}  {{hobby[0]}}  {{hobby[1]}} </h2> 
    			<!-- 数组名[下标].属性名   目的是来获取每个对象中属性对应的值 -->
    			<h2>{{persons[0].name}}  {{persons[1].age}}</h2>
    		</div>
    		<script>
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					name:"jack",
    					//对象名:对象的多个特征
    					person:{
    						name:"rose",
    						age:20
    					},
    					//数组
    					hobby:["篮球","足球"],
    					//数组
    					persons:[
    						{ name:"jack" , age:20 },
    						{ name:"rose" , age:10 }
    					]
    				}
    			})
    		</script>
    	</body>
    </html>
    
    
    

    –3,data的三种写法

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>vue里data的三种写法</title>
    		<script src="vue.js"></script>
    		
    	</head>
    	<body>
    		<div id="app">{{msg}}</div>
    		<script>
    		
    				new Vue({
    					el : "#app" ,
    					// 数据的三种写法:标准写法
    					// 第一种形式
    					// data : {
    					// 	msg : "hello vueeee~~~"
    					// }
    					// 第二种形式:定义函数,返回对象
    					// data:function(){
    					// 	return {
    					// 		msg:"hi~vue"
    					// 	}
    					// },
    					// 第三种形式:定义函数,es6的简写法
    					data(){
    						return {
    							msg:"vue hi~"
    						}
    					}
    				});
    	
    		</script>
    	</body>
    </html>
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>vue里data的三种写法</title>
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<div id="a">
    			{{msg}} {{hobby[0]}}
    		</div>
    		<script>
    			new Vue({
    				el:"#a",
    				//通过函数,设置返回值--vue项目中组件化的使用
    				// data:function(){
    				data(){//效果同上,是上面代码的简写形式
    					//必须返回js对象
    					return {
    						msg:"hello vue",
    						hobby:[1,2,3]
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    

    二,Vue的指令

    –1,概述

    就是Vue框架提供的一些有特殊意义的代码,都有v-的前缀
    常见的指令: v-if v-for v-on …
    使用方式: 在开始标签处,添加新的属性,有v-的前缀的标识

    –2,v-model & v-cloak

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 vue指令</title>
    		<script src="vue.js"></script>
    		<style>
    			/* 语法: 选择器{样式1;样式2;...} */
    			[v-cloak]{/* 选中有指定属性的元素 */
    				display: none; /* 隐藏 */
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 2.v-cloak指令:解决插值表达式的闪现问题 -->
    		<div class="a" v-cloak>
    			{{address}}  {{address}} {{address}}
    			<!-- 1.v-model指令:双向绑定,是指V和M的数据可以实时同步
    					address值是指你的数据要和哪个属性进行绑定.
    					可以获取也可设置属性的值
    			 -->
    			<input type="text" v-model="address"/>
    		</div>
    		{{address}}
    		<script>
    			new Vue({
    				el:".a",
    				data(){
    					return{
    						address:"北京"
    						
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    -3,v-if & v-show & v-for

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 vue指令</title>
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<h1>{{name}}</h1>
    			<!-- 3.v-text和v-html 指令 都是用来获取属性值的,
    				区别是:前者无法解析HTML标签只能当做一个普通文本展示
    				      后者可以解析数据中出现的HTML标签
    			-->
    			<h1 v-text="name"></h1>
    			<h1 v-html="name"></h1>
    			<!--4.v-if指令,判断条件满足时就展示元素,不满足就不展示
    				了解:v-if和v-show区别?都可以判断,不满足时前者干脆不会解析元素
    				后者会解析这个元素但是结合css代码来隐藏style="display: none;"
    			-->
    			<div v-if="age>18">年成人</div> 
    			<div v-show="age>18">年成人</div> 
    			<!--5.v-if指令的复杂使用 if...else if...else语法同java-->
    			<div v-if="salary>20000">金领</div>
    			<div v-else-if="salary>10000">白领</div>
    			<div v-else>屌丝</div>
    			<!--6.v-for指令用来循环遍历,通常用来遍历数组,语法类似forin,
    				i是获取遍历得到的数据,in是固定语法,hobby是数组名,index是下标
    			-->
    			<div v-for="i in hobby">{{i}}</div>
    			<div v-for="i,index in hobby">{{i}}--{{index}}</div>
    		</div>
    		<script>
    			new Vue({
    				el:"#app",
    				data(){
    					return{
    						name:"<p>tony</p>",
    						age:10,
    						person:{
    							salary:10000
    						},
    						hobby:["吃","喝","王者","Anglelababa"]
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    –4,v-on & v-bind

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测 vue指令</title>
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<!-- 0.是HTML的元素 -->
    		<button onclick="alert(1)">按钮1</button>
    		<a href="https://www.baidu.com/">百度一下</a>
    		
    		<div id="app">
    			<!-- 1.v-on指令:给元素绑定不同的事件,可以简写成@ -->
    			<button v-on:click="show()">按钮2</button>
    			<button v-on:dblclick="print(100)">按钮3</button>
    			<button @click="add(1,2,3)">按钮4</button>
    			
    			<!-- 问题:跳转时404,没有把url当变量,而是直接把整体当做跳转路径 -->
    			<a href="{{url}}">百度一下1</a>
    			<!-- 2.v-bind指令:把url当变量,去获取了变量的值进行跳转
    				 v-bind:href可以简写成:href,意思是后面出现的url是变量不是字符串
    			 -->
    			<a v-bind:href="url">百度一下2</a>
    			<a :href="url">百度一下3</a>
    		</div>
    		<script>
    			new Vue({
    				el:"#app",
    				data:{ 
    					url:"http://www.baidu.com/"
    				},
    				methods:{
    					//函数名:函数声明(参数列表){函数体} 
    					show:function(){
    						console.log(100)
    					} ,
    					print:function(a){
    						console.log(a);
    					},
    					//函数名(参数列表){函数体},是上面函数的简写方式
    					add(a,b,c){
    						console.log(a+b+c);
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    

    三,Vue组件Component

    –1,概述

    好处:可以提高前端代码的复用性.
    使用步骤:
    1,定义组件: 全局组件 + 局部组件
    2,使用组件: 就像使用HTML的标签一样

    –2,全局组件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 Component组件</title>
    		<!-- 1.组件是vue.js的核心功能,先导入vue.js -->
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<!-- 2.在数据渲染区 -->
    		<div id="app">
    			<!-- 3.2,使用组件,就像使用HTML的标签一样 -->
    			<Person></Person>
    		</div>
    		
    		<div id="a">
    			<Person></Person>
    		</div>
    		<!-- 3.创建Vue对象 -->
    		<script>
    		//全局组件:作用范围是可多个Vue对象使用,可以在所有的渲染区使用
    			//3.1,创建全局组件--1是组件名2是组件内容
    			// Vue.component(1,2)
    			Vue.component('Person',{
    				// template:组件具体要啥内容
    				template:"<h1>姓名:jack,年龄:20</h1>"
    			})
    			new Vue({
    				el:"#app"
    			})
    			new Vue({
    				el:"#a"
    			})
    		</script>
    	</body>
    </html>
    
    

    –3,局部组件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 局部组件</title>
    		<script src="vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<Car></Car><!-- 2.使用了局部组件 -->
    			<Student></Student><!--使用了全局组件-->
    		</div>
    		<div id="a">
    			<Student></Student><!--使用了全局组件-->
    		</div>
    		<script>
    			//全局组件
    			Vue.component('Student',{
    				template:'<h1>这是一个全局组件</h1>'
    			})
    			//局部组件:只能当前对象(在指定的数据渲染区)使用
    			new Vue({
    				el:"#a"
    			})
    			new Vue({
    				el:"#app",
    				//1.创建局部组件
    				components:{
    					//组件名:组件的内容
    					Car:{
    						template:"<p>这就是Car组件!</p>"
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    

    四,Vue的Ajax

    –1,Ajax的概述

    Ajax 即Asynchronous Javascript And XML( 异步的 )
    Ajax并不是一种新的编程语言,而是多种技术的综合应用
    Ajax是 客户端 的技术,它可以实现 局部刷新 网页
    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
    可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的.
    提高了网页的动态性,提高了网页的响应速度.
    在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios,
    使用步骤: 导入vue.js + axios.js 文件
    语法: axios.get(java程序的访问方式).then( a => { console.log(a); } )
     

    –2,Ajax的原理

    AJAX 是一种用于创建快速动态网页的技术。
    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

    –3,axios(导入)

    1, Vue中封装了ajax并增强了它,在异步并发处理优于原生ajax。称为:axios(ajax input output system)
    2, 使用步骤: 要使用一个单独的js文件,注意导入顺序

    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    

     3, 语法

    axios.get("url地址信息","参数信息").then(res=>{
    	console.log(res.data);
    })
    

    –4,测试

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 axios的语法</title>
    		<!-- 1.导入js文件:
    			vue.js核心 + vue-router.js是路由 + axios.js使用vue封装好的Ajax技术
    		 -->
    		<script src="vue.js"></script>
    		<script src="axios.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<button @click="show()">按钮</button>
    		</div>
    		<script>
    			//Vue的属性:el挂载点 + data数据区 + methods方法区 
    			      //components局部组件 + router创建路由
    			new Vue({
    				el:"#app" ,
    				methods:{
    					show(){
    						//vue提供的对象,get函数是指即将发起一个get请求
    						//参数是一段java程序的访问方式
    						//当程序访问成功时,then函数是vue自动调用的函数
    						axios.get('http://www.baidu.com/').then(
    							//a记录着java程序的返回值return
    							//=>叫箭头函数
    							a => {
    								//在函数体重,处理返回的结果
    								console.log(a.data);
    							}
    						)
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    

    五,Vue路由

    –1,概述

    说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
    VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

    基于Vue组件化的思想,
    从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的
    使用步骤: vue.js + vue-router.js 引入到网页中 

    –2,使用步骤(测试)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 Vue路由</title>
    		<!-- 1.引入js文件,注意顺序! -->
    		<script src="vue.js"></script>
    		<script src="vue-router.js"></script>
    	</head>
    	<body>
    		<!-- 2.准备数据渲染区,即将展示组件的功能 -->
    		<div id="app">
    			<!-- 3.4,点击不同的元素,即将路由到不同的组件 -->
    			<router-link to="/home">主页</router-link>
    			<router-link to="/help">帮助页</router-link>
    			<!-- 3.5,展示组件的内容 -->
    			<router-view></router-view>
    		</div>
    		<!-- 3.创建Vue对象 -->
    		<script>
    			//3.3,创建组件,让路由动态匹配
    			var home={
    				template:'<h1>我是主页..</h1>'
    			}
    			var help={
    				template:'<h1>我是帮助页..</h1>'
    			}
    			//3.2,创建路由的细则
    			//VueRouter表示vue路由的对象,routes属性用来描述细则
    			var router=new VueRouter({
    				//属性名:属性值
    				routes:[
    					//根据不同的请求,路由到不同的组件
    					//path:访问路径,component:组件名称
    					{path:"/home",component:home}  ,
    					{path:"/help",component:help}
    				]
    			})
    			new Vue({
    				el:"#app",
    				//3.1,设置路由功能
    				// router:router //key 和value一样时,可以简写
    				router//同上,简写形式
    			})
    		</script>
    	</body>
    </html>
    
    

    –3,总结

    扩展:

    –1观察者模式

    设计模式是最精髓的东西,是软件思想的体现,是软件的灵魂。如三大框架SSM只所以傲视群雄,它的傲娇,它的底气就来自对经典设计模式的全面应用。所以如果只会应用不懂其义,那你只是个码农;如何能领会设计模式的奥义,你就有了高级程序员的潜力;如果你能自己仿写,你就有了架构师的入门证。

    Vue这类为何称之为框架,就是其不是简单的编程,而是应用了经典的设计模式,那它应用了什么什么模式呢?它应用了"观察者设计模式"。

    那什么是观察者设计模式呢?

    观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新。

    • 页面data中的address就是数据,get为获取当前数据,set为设置数据新值
    • 观察者watcher就为那多个插值表达式和input文本框,在页面加载时这些关系进行绑定
    • 当我们让数据变化时,如input文本框修改内容,其就调用数据的set的方法,把数据进行更新,其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger,进行再次渲染re-render,修改虚拟dom树。最终vue框架局部宣传页面
    • 同样,当我们利用谷歌浏览器改变数据v.address赋值时,就调用数据的setter方法进行数据更新,数据更新后,通知众多的观察者,观察者更新如上面的流程

    可以看出Vue设计非常巧妙,我们页面展现的数据,必然会涉及到数据的读写,于是Vue实现了一整套机制,这套机制监控数据的获取(get),数据的更新(set),这样当数据变化,Vue就能知道。它知道有什么用呢?它就能控制当数据变化时就能重新进行页面的渲染,从而用户看到页面展现新的内容。


    HBuilderX自定义模板

    –1,自定义HTML模板

    注意:模板是根据选择的文件类型独立的,我们现在是创建的html模板,只有创建html时,才能选择这个模板。

    –2,vue模板.txt

    创建vue模板.txt,文件名自定义。这样就无需每次敲这些重复的代码,高效

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{{msg}}
    		</div>
    	</body>
    	<script>
    		new Vue({
    			el: "#app",
    			data:{
    				msg : "hello vue"
    			}
    		})
    	</script>
    </html>
    
    

    –3,创建新文件调用模板

    展开全文
  • 前端框架对比

    2017-07-30 09:35:51
    前端框架对比
  • 前端框架网址大全

    2018-11-22 14:25:13
    此文档包含了最全的前端框架的网址,让所有前端开发人员不再因为找不到框架而困扰。里面的网址都是由本人亲测过的真实有效
  • index.html前端框架

    2019-08-24 21:41:42
    html前端框架
  • 微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI、SUI和Mint UI
  • 前端框架MVVM是什么(整理)

    万次阅读 多人点赞 2020-08-06 06:25:42
    4、前端框架MVVM出现的最大意义是什么? 5、应用MVVM框架的vue.js框架的最主要作用是什么? 6、前端框架MVVM中的vm层是干嘛的? 7、MVVM最主要的特征是什么? 二、MVVM百度百科 三、前后端分手大师——MVVM 模式...

    阅读原文 

    目录

     

     

    回到顶部

    v   一、总结(点击显示或隐藏总结内容)

    一句话总结:vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定。

     

    1、我大前端应该不应该做复杂的数据处理的工作?

    不应该

    只要后端保证对外接口足够简单就行了,我请求api,你把数据返出来,咱俩就这点关系,其他都扯淡。

    后端:我们这里的业务逻辑和数据处理会非常复杂!
    前端:关我屁事!

    后端业务处理再复杂跟我们前端也没有半毛钱关系,只要后端保证对外接口足够简单就行了,我请求api,你把数据返出来,咱俩就这点关系,其他都扯淡。

     

    所以我这边开发也是同样的,前端就负责请求api就好,别的都不需要。

     

    2、mvc和mvvm的关系?

    改进版

    数据分离

    视图模型层

    c(控制层)被换成了vm(viewmodel)层

    MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

    mvvm层实现了前后端更好的分离(前端需要的数据只需要请求后端的接口即可)

     

    3、MVVM框架编码实例?

    扯了这么多,并没有什么卵用。千言万语不如一个栗子来的干脆,下面用一个 Vue 实例来说明 MVVM 的具体表现。

    Vue 的 View 模板:

    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="showMessage()">Click me</button>
    </div>
     

    Vue 的 ViewModel 层(下面是伪代码):

    var app = new Vue({
        el: '#app',
        data: {     // 用于描述视图状态(有基于 Model 层数据定义的,也有纯前端定义)
            message: 'Hello Vue!',  // 纯前端定义
            server: {}, // 存放基于 Model 层数据的二次封装数据
        },
        methods: {  // 用于描述视图行为(完全前端定义)
            showMessage(){
                let vm = this;
                alert(vm.message);
            }
        },
        created(){
            let vm = this;
    
            // Ajax 获取 Model 层的数据
            ajax({
                url: '/your/server/data/api',
                success(res){
                    // TODO 对获取到的 Model 数据进行转换处理,做二次封装
                    vm.server = res;
                }
            });
        }
    })
     

    服务端的 Model 层(省略业务逻辑处理,只描述对外接口):

    {
        "url": "/your/server/data/api",
        "res": {
            "success": true,
            "name": "IoveC",
            "domain": "www.cnblogs.com"
        }
    }
     

    这就是完整的 MVVM 编程模式。

     

    4、前端框架MVVM出现的最大意义是什么?

    开发效率

    前后端 业务逻辑 分离

    接口

    MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。

    MVVM用接口实现了前后端数据的通信,这样可以使前后端之间的业务逻辑没有什么关系。

    MVVM在感觉上要比mvc模式前后端要分的更开

     

    5、应用MVVM框架的vue.js框架的最主要作用是什么?

    双向数据绑定

    前端數據的統一

    前端數據的統一:前端应用相同数据的位置实现了数据的统一
    双向数据绑定:綁定后vue好dom數據保持統一,一動全動,是前端的

    双向数据绑定中的两向分别为 view和viewmodel。

     

    6、前端框架MVVM中的vm层是干嘛的?

    状态 行为

    DOM操作

    ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的,比如页面的这一块展示什么,那一块展示什么这些都属于视图状态(展示),而页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互),视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定,ViewModel 的内容会实时展现在 View 层,这是激动人心的,因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图,MVVM 框架已经把最脏最累的一块做好了,我们开发者只需要处理和维护 ViewModel,更新数据视图就会自动得到相应更新,真正实现数据驱动开发。看到了吧,View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

     

    View一般就是我们平常说的HTML文本的Js模板,里面可以嵌入一些js模板的代码,比如Mustache,比如jstl类似的模板伪代码

    ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑,举个例子,比如图片走马灯特效,比如表单按钮点击提交,这些自定义事件的注册和处理逻辑都写在ViewModule里面了

    Module就更简单了,就是对于纯数据的处理,比如增删改查,与后台CGI做交互

     

    7、MVVM最主要的特征是什么?

    前后端分离

    前后端分手大师——MVVM 模式

    或者说前后端更好的分离(接口来实现前后端的通信)

     

     

     

    回到顶部

    二、MVVM百度百科

    MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验,如Silverlight、音频视频3D动画……,这导致了软件UI层更加细节化、可定制化。同时,在技术层面,WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。

    外文名

    Model-View-ViewModel

    简    称

    MVVM

    例    如

    Silverlight、音频

    隶    属

    微软

    MVVM优点

    低耦合 可重用性

     

    回到顶部

    三、前后端分手大师——MVVM 模式(转)

    转自:前后端分手大师——MVVM 模式 - DOM哥 - 博客园
    https://www.cnblogs.com/iovec/p/7840228.html

    简而言之

    之前对 MVVM 模式一直只是模模糊糊的认识,正所谓没有实践就没有发言权,通过这两年对 Vue 框架的深入学习和项目实践,终于可以装B了有了拨开云雾见月明的感觉。

    Model–View–ViewModel(MVVM) 是一个软件架构设计模式,由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于2005年在他的博客上发表。

    MVVM 源自于经典的 Model–View–Controller(MVC)模式(期间还演化出了 Model-View-Presenter(MVP)模式,可忽略不计)。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。如下图所示:

    MVVM模式

    MVVM 已经相当成熟了,主要运用但不仅仅在网络应用程序开发中。KnockoutJS 是最早实现 MVVM 模式的前端框架之一,当下流行的 MVVM 框架有 Vue,Angular 等。

    组成部分

    简单画了一张图来说明 MVVM 的各个组成部分:

    MVVM分层示意图

    分层设计一直是软件架构的主流设计思想之一,MVVM 也不例外。

    # View 层

    View 是视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建,为了更方便地展现 ViewModel 或者 Model 层的数据,已经产生了各种各样的前后端模板语言,比如 FreeMarker、Marko、Pug、Jinja2等等,各大 MVVM 框架如 KnockoutJS,Vue,Angular 等也都有自己用来构建用户界面的内置模板语言。

    # Model 层

    Model 是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。后端的处理通常会非常复杂:

    前后端对比

    后端:我们这里的业务逻辑和数据处理会非常复杂!
    前端:关我屁事!

    后端业务处理再复杂跟我们前端也没有半毛钱关系,只要后端保证对外接口足够简单就行了,我请求api,你把数据返出来,咱俩就这点关系,其他都扯淡。

    # ViewModel 层

    ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的,比如页面的这一块展示什么,那一块展示什么这些都属于视图状态(展示),而页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互),视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定,ViewModel 的内容会实时展现在 View 层,这是激动人心的,因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图,MVVM 框架已经把最脏最累的一块做好了,我们开发者只需要处理和维护 ViewModel,更新数据视图就会自动得到相应更新,真正实现数据驱动开发。看到了吧,View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

    没有什么是一个栗子不能解决的

    扯了这么多,并没有什么卵用。千言万语不如一个栗子来的干脆,下面用一个 Vue 实例来说明 MVVM 的具体表现。

    Vue 的 View 模板:

    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="showMessage()">Click me</button>
    </div>
     

    Vue 的 ViewModel 层(下面是伪代码):

    var app = new Vue({
        el: '#app',
        data: {     // 用于描述视图状态(有基于 Model 层数据定义的,也有纯前端定义)
            message: 'Hello Vue!',  // 纯前端定义
            server: {}, // 存放基于 Model 层数据的二次封装数据
        },
        methods: {  // 用于描述视图行为(完全前端定义)
            showMessage(){
                let vm = this;
                alert(vm.message);
            }
        },
        created(){
            let vm = this;
    
            // Ajax 获取 Model 层的数据
            ajax({
                url: '/your/server/data/api',
                success(res){
                    // TODO 对获取到的 Model 数据进行转换处理,做二次封装
                    vm.server = res;
                }
            });
        }
    })
     

    服务端的 Model 层(省略业务逻辑处理,只描述对外接口):

    {
        "url": "/your/server/data/api",
        "res": {
            "success": true,
            "name": "IoveC",
            "domain": "www.cnblogs.com"
        }
    }
     

    这就是完整的 MVVM 编程模式。

    代码执行之后双向绑定的效果如下:

    Vue实现的响应的数据绑定

    嘿嘿,前后端可以成功分手了,以后再也不用关心后端个锤子开发进度\暴怒脸,复杂实现,blabla...,尽情享用前端如丝般顺滑的开发快感吧:)

     

     

    回到顶部

    四、不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质(转)

    转自:不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质 - 薛端阳 - 博客园
    https://www.cnblogs.com/xueduanyang/p/3601471.html

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂

    写代码的码农都知道,Java社区虽然不是一个提出分层思想的,确实贯彻的最好的,如今是个Java开发都不会不知道SSH的开发模式,从MVC到MVVM的概念的热炒,其实真没什么技术进步

    (如果你觉得本文言辞激烈,过于愤世嫉俗,实在看不下去,欢迎移步另一位园友的分层进化史科普文章http://www.cnblogs.com/indream/p/3602348.html) 

    先看什么是MVVM

    image

    View一般就是我们平常说的HTML文本的Js模板,里面可以嵌入一些js模板的代码,比如Mustache,比如jstl类似的模板伪代码

    ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑,举个例子,比如图片走马灯特效,比如表单按钮点击提交,这些自定义事件的注册和处理逻辑都写在ViewModule里面了

    Module就更简单了,就是对于纯数据的处理,比如增删改查,与后台CGI做交互

     

    那么什么是MVVM框架呢??一般他们都是这么做的

    1.  定义一串所谓的伪模板代码,例如通过className标注,或者自定义tag的方式,将一段html文本区域给标注声明起来,意思就是喊一嗓子,“喂,兄弟们,这块地方我占了,要拉屎去别处拉去”

    2.  通过类似jstl之类lamda表达式,来做js模板,“拜托伙计,天堂有路你不走,非要自己搞一套,你就不能暴露接口让大家用自己的模板语言,比如Mustache或者jtpl吗?”

    3.  很傻比的封装一串自己的所谓数据模块组件,与不同类型的数据源做数据传输和适配,一般都不会分层很清晰,加入后台数据字段改了,写框架的都没脑子的,从来不做数据字段的自定义适配(举个例子,原来后台传递的字段是person.userName,现在改成了小写,person.username,你就傻逼的去吧模板再改一下吧,其实要解决这个问题,非常简单,在MVVM层中引入一层DO,领域对象层,Module到DO之间还有一层转换就可以搞定这个问题)

    4.  非不暴露自己的自定义事件模型,就是那个观察者模式啦,自己乱七八招在页面上绑定一堆form change之类的事件,以实现View与Module的单向绑定

    5.  所谓的双向绑定,也就是OOP语言中早被烂透了的getter,setter模型,ES5+可以用defineProperty,低版本就需要自己在js object赋值的时间做写死代码方式的处理了

     

    我们再来看细节

    1. 双向绑定

    号称是最难理解的地方,其实是框架的作者根本就没理解Java社区对于软件开发分层理解的精髓

    image

    标准的数据驱动开发,应该如上图所示,在一个View的生命周期内,一个ViewModule会管理一个DomainObject(业务模型),一个DO可能包括多个Module数据模型,一个Module可能来自多个数据源,而不是想很多所谓的MVVM框架那样强迫一个M来一个数据源

    按照上图标准分层方式来划分的好处,在于,逻辑清晰,Module层粒度够细,可以被多次复用

    DO层与VM层View层属于一一对应关系,方便对数据做增删改查的同步

    每一层应该是独立的,非一定要使用MVVM框架的紧耦合,可以用自己使用不同的js插件或者模块实现MVVM

    我们抛弃框架,单纯的看数据,其实我们要解决的问题很简单

    a) 当DO对象属性放生变化时候,通知View更新

    b) 当View上表单值放生变化时,通知DO更新,并异步通知队列同步到数据源

    先来看问题a,这个最简单,DO是一个基本的Javascript Object,我们在View上的模板显示是这个Object.property,

    改变一个Object对象的方式无非几种,一种是

    a) 显示Object.property = ‘我是傻逼’

    b) xxxx.methodName(Object, ‘property’, ‘我是傻逼’)

    c) xxxx.merge(Object, {‘property’: ‘我是傻逼’})

    如果是a的情况,ES5+,可以通过设置Object.defefineProperty(‘property’,{set: functiono(){},get:function(){}}),来做赋值和取值的监控触发

    对于IE8一下,因为js不支持运算符重载,所以暂时没有好的办法,所以如果只考虑移动端的话,直接defineProperty就全部搞定,如果是要考虑PC的话,就不建议开发者使用直接赋值的方式,参考java的开发模式,也是推荐OOP时候,使用set方式赋值,而不是直接=赋值

    当然了,如果你非要兼容IE8一下的话,用定时器做轮训,配合for in 反射,通过脏数据与原始备份对比的方法也是一种办法,不过这种办法在当前页面非常耗性能,由于IE8一下不支持多线程,HTML5 worker,如果未来flash 插件支持多线程的话,倒是可以用js和flash插件做线程交互的方式做脏数据检测

    如果是b的情况,那就太简单了,在methodName里面触发对于该属性修改的回调即可,如何注册回调呢,首先我们要实现一个类似Dom Event的自定义对象的Event模型,然后通过类似Dom Event的注册事件方式,注册观察者,订阅事件,当执行了methodName时候,发送消息,通知所有订阅者执行回调

    如果是c的情况,类似b一样处理

    这样一看,双向数据绑定的问题就非常简单的解决了

     

    我们再来看另外一个MVVM的问题,非简单数据模型,复合数据模型(DO的属性值不是一个string,而是一个Object,且这个Object可能还嵌套多层Obejct的时候)的处理办法,这个一般的MVVM框架直接不考虑,或者通过长字段名的方式绕过这个问题

    这个问题是这样的,早在10几年前,java structs框架流行的时候就出现了,当一个表单,出现需要对两个Java Bean做update操作时候,一个bean是user,一个bean是成绩

    对应的表单字段名,就是 user表.name,user表.id,score表.point,

    在struct2里面,处理逻辑是把 “点”作为特殊符号,在做form序列化时候,非包含点的字段的值都是string,包含点的字段是一个Object,比如刚才的form序列化之后结果就是 { user: {id :’’ , name: ‘’}, score: {id: ‘’, point: ‘’}}

    同理在MVVM实现时,也是一样,认为点是分割对象的关键字,这样我们就可以实现把多个对象嵌套到View模板里面,实现复合Object的双向映射

     

    最后一个问题,也就是高级MVVM编程里面必须要面对的问题,就是自定义事件的广播和冒泡,我看过大多数的MVVM框架,对于广播,这块有部分实现了,但是对于冒泡一个都没实现

    其实这个真的不是很复杂的问题,事件广播,这个最简单,三岁小孩都能写,我们在注册回调时候,不是有一个事件队列吗,在回调时候,通过特殊标记位,控制是否继续扩散广播,还是执行完毕终止即可

    而自定义事件的冒泡要骚骚复杂一些,他是由于OOP编程里面的继承和包含关系引申而来的,我们先说包含关系,前面说了MVVM框架里面,都会声明一块地方为VM控制区域,一般垃圾的框架都不会考虑,VM嵌套的情况,因为图简单吗

    但是实际开发过程中,你会遇到很多这种情况,就是VM复用的问题,一般都是发现使用了MVVM框架之后,发现VM定义的太大,没法复用,如果要复用VM就又发现VM定义的太小,出现需要VM嵌套的情况没法用

    其实简单,我们知道DOM事件是有冒泡的,VM同理,只要在自定义事件模型里面定义了VM的父子关系,或者同级关联关系,即可实现VM的自定义事件的广播和冒泡,另外也解决了VM复用的问题,可以让代码颗粒度更小

     

    另外那种,声明式编程这种老掉牙的概念就真的别在吵了,还记得10几年前的structs的tag吗,js圈子里面这种通过自定义tag,自定义className,自定义属性,挂载js来自定识别执行逻辑的例子大把皆是,还是建议广大前端开发,不要浮躁,多像java社区学习,多多从根本上了解分层理念的精髓,不要听了吹牛逼,听风就是雨,还是多了解原理才是真理啊

     

    最近心情很不好,股票大跌,公司的事情你懂的,写这篇文档纯属没事找事,欢迎广大道友开骂,来陪我大战三百回合

     

     

     

    回到顶部

    五、MVVM核心概念(转)

    转自:MVVM核心概念 - iammackong - 博客园
    https://www.cnblogs.com/iammackong/articles/3312565.html

    MVVM模式是Model、View、ViewModel的简称,最早出现在WPF,现在Silverlight中也使用该模式,MVVM模式是对MVC模式的变种。哪儿变了?我认为MVVM和MVC的主要变化在于MVVM更适合于XAML。

    2011-05-03 14h43_20

    MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处

    1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model不可以不变,当Model变化的时候View也可以不变。

    2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

    3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。

    4. 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

    mvvm 2011-07-02 15h23_34

    如果用Interface接口来表达,基本就是这么个意思:

    复制代码

    复制代码

    1 publicinterface IView
    2 {
    3 IViewModel ViewModel { get; set; }
    4 }
    5
    6  publicinterface IViewModel
    7 {
    8 IModel Model { get; set; }
    9
    10 ///<summary>
    11 /// a property that states the controller is busy doing something (like fetching data from a service),
    12 /// usually the iterface should be blocked
    13 ///</summary>
    14  bool IsBusy { get; }
    15 }

    复制代码

    复制代码

    MVVM_1

    MVVM的Model、View、ViewModel分工

    1. View

    • 负责界面和显示,界面构成元素有window, controls, page, dataTemplete, custom controls….
    • 代码通常有XAML和XAML.CS组成,但后台代码应该很少
    • 通过DataContext和ViewModel绑定
    • 不直接和Model交互!
    • 控件可以和ViewModel的公共属性绑定,update需要双向绑定
    • 控件可以触发Behavior/Command调用ViewModel的方法,Command是View到ViewModel的单向通讯 (View中触发事件,ViewModel中处理事件)

    2. ViewModel

    • 主要包括界面逻辑和模型数据封装,Behavior/Command事件响应,绑定的属性定义等
    • ViewModel继承Model类,或者是Model的继承类
    • 是view和model的桥梁,是对Model的抽象,例如,model中数据格式是“年月日”,可以在viewModel中转换model中的数据为“日月年”以供视图(view)显示。
    • 维护视图状态
    • 实现属性或集合的change notification
    • 2011-07-02 15h21_12

    3. Model

    • 数据和业务逻辑
    • 客户端领域模型
    • 由data entities, business objects, repositories and services构成
    • 可以实现属性或集合的change notification
    • 可以实现validation 接口例如 IDataErrorInfo

    MVVM

    View和ViewModel主要通过数据绑定和Command/Behavior进行交互,如下图所示:

    2011-05-03 10h24_31

    一个例子并且附代码下载(Command未示例)

    有关Model(模型)和DTO的问题

    2011-05-03 17h33_31

    前面说的Model是客户端的,但实际上Domail Model存在服务器端(靠近数据库)和那就需要和客户端搞映射DTO(Data Transfer Ojbect,数据传输对象,带序列化标记,用来远程调用)。在Silverlight中有个很方便的东西来实现这个DTO过程和序列化,那就是WCF RIA Service和DomainService。如果你创建一个简单的Silverlight应用并且调用WCF RIA Service,基本上会生成DTO Model: ObjectContext(EntityObject)。(也有人喜欢在Model里面调用RiaSerivce实现load,save等等,个人认为不太合适,可以参考这篇文章),此外,参考这篇文章:《WCF RIA Services and a guide to use DTO/”Presentation Model”

    DataFlow

    代码例:

    复制代码

    复制代码

    publicpartialclass MyModelsEntities : ObjectContext
    {



    }

    [EdmEntityTypeAttribute(NamespaceName="MyModels", Name="MyEntity")]
    [Serializable()]
    [DataContractAttribute(IsReference=true)]
    publicpartialclass MyEntity: EntityObject
    {



    }

    复制代码

    复制代码

    MVVM的实践要点

    1. View分离要彻底,不要有坏味道

    视图(view)部分,xaml.cs 应该只有很少的代码或没有代码,如果你的xaml.cs包含大量的代码,那么很可能你MVVM用的不对头,需要检查其中代码的坏味道。Xaml和xaml.cs 只能包含处理界面、视图、显示样式、视图元素之间的交互、视图元素动画,等等的内容

    2. ViewModel要可测试

    从重构的观点看,如果你的代码中ViewModel是可测试的,有详细的单元测试Unit Test,你的代码是OK的,否则需要检查其中的坏味道。

    MVVM Basic

    更多MVVM的内容且看下回分解。(附:本例子且附代码下载(Command未示例),channel9有一个MVVM的视频很好,PPT和视频演示的源码

     

    我的旨在学过的东西不再忘记(主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法)的偏公益性质的完全免费的编程视频学习网站: fanrenyi.com;有各种前端、后端、算法、大数据、人工智能等课程。

    版权申明:欢迎转载,但请注明出处

    一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。

    博主25岁,前端后端算法大数据人工智能都有兴趣。

    大家有啥都可以加博主联系方式(qq404006308,微信fan404006308)互相交流。工作、生活、心境,可以互相启迪。

    作者相关推荐

    前端框架MVVM是什么(整理)

    范仁义 2018-11-05 08:32 阅读:4602 评论:0 推荐:0 编辑

    vue.js最最最最简单实例

    范仁义 2018-08-05 22:54 阅读:2951 评论:0 推荐:0 编辑

    翻过这道山,就有人听到你的故事。

    学习

    轻学无用:学生时代学html、java、c++、php、安卓、python等和之前学英语的感受,轻学无用,不为需求学,不学全面无用。

    学习和游戏的区别的启示:像游戏一样,每次学习完,你告诉自己,你学到了什么,你收获到了什么。是你在游戏中获得了多少道具装备等级场景,这个给你的舒适满足感。问题不是你学了多少,而是你到底学会了多少。

    命名:要给招数起名字,没有名字,没有经过大脑,没有深刻印象,他们永远都不是自己的,找一个自己喜欢印象深刻的名字做对应。

    多遍:学习视频或者书并不是只看一遍就够了,因为一遍能收获的内容非常有限,当然也可以只看一遍,那就需要好好记忆,多提问,多入脑子。

    每日清0规律:无论是对学习的劳累,还是对游戏的无趣,还是对生活的感受,每日睡一觉之后就可以清空绝绝绝大部分,只有极极少一部分会留下来。

    接触:那些不好的东西,不要接触,停不下来的,比如游戏,各种接触都是触发的因素,同理可以应用于学习。

    学习的方式:legend2 + legend3 + 知识总结(代码)文档(系统) + 详细知识word总结文档(系统+分类+增加和完善)。

    知识的触类旁通:知识之间是触类旁通的,比如你更加深刻的学了爬虫之后,你可能会对网站开发更加了解。

    做人

    理解:能够使用并不代表理解,比如2岁大的宝宝,在这个阶段,宝宝可以正确告诉别人“我是男孩”或“我是女孩”。但是,这只是一种简单的“转述”行为,因为父母告诉他(她)“你是男(女)宝宝”,而尚未形成真正意义上的性别意识。

    技巧:无论是做人做事还是学习,都是需要技巧的。

    矫枉过正:很多事情都容易矫枉过正(技巧和局势才是通用的)

    结善缘:

    事情原因:生活中分析问题的原因,然后解决问题,会简单很多

    实力为尊:

    觉得自己是否受伤完全是自己的主观情绪:只要放平心态,弄清楚事情发展的规律,看的更透彻,或者转换角色,这样就不必自己给自己找麻烦了,反而能把所有的事情掌控于手心。只要自己不觉得受伤,就没有人可以伤害自己。

    《康熙王朝》:少年康熙被别人玩弄于股掌之间启示:不要被别人玩弄于股掌之间,要做的是想通(可能别人更加高明)、忍耐和积蓄自己的力量

    《易中天讲三国》袁绍性格:【感觉大部分人都是袁绍】:袁绍好面子,凭喜好办事,好听马屁,没有容人之量

    不是放弃,而是最快最便捷:

    人生如负重致远不可急躁:

    不要务虚名而致实祸:

    强夸百害无益:

    人的逐利本质:

    情感回馈:比如看到的l的例子

    感悟

    身体:安全和身体最重要了,这个才是真正的本钱

    刷反思:遇到的各种心理问题和心态的问题都可以去刷反思

    悟透:所有错误的抉择(所有的挣扎)都是因为没想明白,没领悟透。

    人生无大事:重在坚持,重在平时。所谓的希望并非是希望,或者说并非是希望的全部,比如词根词缀,语法,再到背,生活,没有人会告诉你这是几分之几的钥匙,这便是有趣的点。所谓的绝望,未必是绝望,比如大四下,很有可能是希望和机遇。

    换环境:是个可行的方法,但是我不能什么事情都依靠外物啊,内在觉醒,经历,悟透才是王道,而且,内在不改变,激励不够,换个环境真的有用么。

    同,所得:景色不过如此,每日的热搜也不过如此,每日的朋友圈也不过如此,每日的电影也不过如此,每日的游戏(打怪,升级,竞技)也不过如此。重点是,每日,自己到底收获了什么(学到了什么)。所谓的新鲜事真的新鲜吗,那么多年的历史(时间映射和地点映射)还涵盖不了当下么,再稀奇百倍的事情也发生过。

    监管:在心智和阅历不够的情况下缺乏监管是相当恐怖的事情(小孩子没有明辨是非能力,易冲动,缺乏监管很容易从恶),事实上,就算心智和阅历很够,缺乏监管同样是很恐怖的事情(贪官贪财,官员渎职)。

    约定:初期规则和约定:https://www.bilibili.com/video/av35953030/?p=57。

    六欲,迷茫:人皆有六欲,人皆会迷茫,不必太自责,及时收住就对了,不是看谁不迷茫,而是看谁能够及时悬崖勒马,事实上,所有的人都会迷,无一例外。及时亡羊补牢。

    困境:有多少人困在这一层,而生活有趣的是,没有人告诉你需要去突破。(也没有人告诉你要怎么突破)

    生活的真谛:整日饱食终日的玩不是生活的意义,整日疲于奔命的学也不是生活的意义,生活的意义在于在于实力稳步提升,劳逸结合,享受生活。

    危机也是机遇:无论是修真小说还是实际。

    满足与斗志:人一旦满足就容易不思进取。但是人满足人会很开心或者很平静。人不满足的话在一定情况下会激发斗志。所以可以在满足和不满足中找一个平衡。比如 心理满足之后会想去玩游戏,而不是学习或工作。

    展开全文
  • Vue前端框架

    千次阅读 2022-02-22 09:09:46
    原生Vue 独立的Vue框架,不与Webpack等框架结合使用 1.安装与部署 1安装方式 1.直接通过 标签引入 1.通过src引入本地文件 <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> 说明: 1....

    Web应用分类:

    • 1.传统Web页面
    • 2.单页应用

    1.传统Web页面

    1.H5(不等同于HTML5)

    一般称之为H5页面(营销页面)
    即:在传统的平面海报中增加交互体验和数据存储,用于营销推广和数据信息收集等

    2.传统技术特点:

    .单击某个链接,按钮或提交表单后,页面整体刷新

    3.传统技术缺点:

    • 1.每次页面整体刷新,都要导致浏览器重新加载对应的内容
    • 2.加载内容繁多,传统页面的css/js多达上百个,每次打开页面都需要发送上百次请求,卡顿现象严重

    2.单页应用(Single Page App,SPA)

    • 1.整个应用只有一个主页面,其余的“页面”,实际上是一个个的“组件”
    • 2.单页应用中的“页面跳转”,实际上是组件的切换,在这个过程中,只会更新局部资源,页面不会整个刷新(正是因为这个原因,当我们的前端代码有更改,重新部署之后,如果用户不主动刷新,就会发现有“资源缓存”)

    1.单页应用特点

    • 1.页面是局部刷新的,响应速度快,不需要每次加载所有的资源
    • 2.前后端分离,前端不受后端的限制

    2.单页应用框架

    1.Angular

    1.特点
    • 1.业内第一个SPA框架
    • 2.实现了前端的MVC解耦
    • 3.双向绑定,Model层的数据变化会直接影响View,反之亦然
    2.缺点

    不易学习,文档差

    2.React

    1.特点
    • 1.使用js一种语言就可以写前端(H5)+后端
    • 2.React Native可以直接运行在手机端,性能接近原生APP
    • 3.可使用组件多
    2.缺点
    • 1.html代码需要写在js文件中,前后端代码写在一起的风格
    • 2.多语言混合式编程,代码难以理解,开发和调试

    3.Vue

    1.特点
    • 1.基于MVVM(Model-View-ModelView)的SPA框架
      • View:视图
      • Model:数据
      • ModelView:连接View与Model的纽带
    • 2.Vue.js和微信小程序,阿里巴巴的Weex相似

    3.Ajax和XML

    1.概述

    • 1.Ajax(Asynchronous JavaScript And XML):异步js与XML
    • 2.Ajax名称本意是:异步js与XML,但是现在服务器端返回的数据几乎都使用JSON,而抛弃了XML
    • 3.Ajax每次打开新的网页时,页面不会整体刷新,而是由js发起一个HTTP异步请求

    2.特点

    • 1.节省页面加载时间
    • 2.节省了带宽
    • 3.减轻客户端和服务器端的负担

    Vue

    Vue (读音类似于 view) 是一套用于构建用户界面渐进式JavaScript框架

    • 1.构建用户界面:将数据通过某种方式展示到前端页面
    • 2.渐进式:Vue可以自底向上逐层的应用,由浅入深,由简单到复杂(即:如果简单应用只需要引入一个轻量小巧的核心库,复杂应用可以根据需要引入各式各样的Vue插件,从一个轻量小巧的核心库逐渐递进到各式各样的Vue插件库)

    简介

    • 1.尤雨溪开发的一款轻量级框架
    • 2.2015年正式发布Vue1.0.0
    • 3.2016年正式发布Vue2.0.0
    • 4.2020年正式发布Vue3.0.0

    特点

    • 1.采用组件化模式,提高代码复用率,且让代码更好维护
    • 2.声明式编码,无需直接操作DOM,提高开发效率
      //命令式编码
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title>原生JavaScript</title>
      	</head>
      	<body>
      		<ul id="list"></ul>
      		<script type="text/javascript">
      			// 需要展示的数据
      			let persons = [
      				{id: '001',name: '张三', age: 18},
      				{id: '002',name: '李四', age: 19},
      				{id: '003',name: '王五', age: 20},
      			]
      			
      			//准备html字符串
      			let htmlStr = ''
      			
      			//遍历数据拼接html字符串
      			persons.forEach( p => {
      				htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`
      			})
      			
      			//获取list元素
      			let list = document.getElementById('list')
      			
      			//操作DOM修改内容
      			list.innerHTML = htmlStr
      		</script>
      	</body>
      </html>
      
      // 声明式编码
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title>Vue</title>
      		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
      	</head>
      	<body>
      		<div id="app">
      			<ul id="list">
      				<li v-for="p in persons">
      					{{p.id}} - {{p.name}} - {{p.age}}
      				</li>
      			</ul>
      		</div>
      		<script>
      			new Vue({
      				el: "#app",
      				// data: function(){
      				// 	return {
      				// 		persons : [
      				// 			{id: '001',name: '张三', age: 18},
      				// 			{id: '002',name: '李四', age: 19},
      				// 			{id: '003',name: '王五', age: 20},
      				// 		]
      				// 	}
      				// }
      				data: {
      					persons : [
      						{id: '001',name: '张三', age: 18},
      						{id: '002',name: '李四', age: 19},
      						{id: '003',name: '王五', age: 20},
      					]
      				}
      			})
      		</script>
      	</body>
      </html>
      
      在这里插入图片描述
    • 3.使用虚拟DOM+Diff算法,尽可能复用DOM节点
      在这里插入图片描述
      说明:
      • 通过Diff算法比较,新数据和旧数据的区别,相同的复用,不同的修改
    • 4.体积小:压缩后33k
    • 5.双向数据绑定

    扩展1:Diff算法

    • 概念:
      Diff算法是一种优化手段,将前后两个模块进行差异化对比,修补(更新)差异的过程叫做patch (打补丁)
    • 意义:
      vue,react框架中都有diff算法
      因为操作真实dom的开销很大, 某些时候修改了页面中的某个数据,如果直接渲染到真实DOM中会引起整棵树的重绘,只让我们改变过的数据映射到真实 DOM,做最少的重绘,这就是diff算法要解决的事情
    • virtual DOM和真实DOM的区别:
      virtual DOM是将真实的 DOM 的数据抽取出来,以对象的形式模拟树形结构,diff算法比较的也是virtual DOM 代码理解

    1.原生Vue

    独立的Vue框架,不与Webpack等框架结合使用

    1.安装与部署

    1安装方式

    1.直接通过<script></script>标签引入
    • 1.通过src引入本地文件
      <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
      
      说明:
      • 1.引入Vue.js后,Vue会被注册成一个全局变量,通过操作这个函数可以进行后续的操作
    • 2.通过src引入在线文件(使用CDN加速)
      开发版本
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
      
      生产版本
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
      
      模板库引入(暂时未用到)
      <script type="module">
        import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
      </script>
      
    2.通过NPM命令行工具下载安装

    2.引入类型

    3.例子

    • 1.在head中引入vue.js包
    • 2.在body中定义一个<div id='app'></div>
    • 3.所有的页面都是展示在这个<div id='app'></div>中,每次改变不会全局刷新,而是通过Vue.js框架操作代码,对其中内容进行局部刷新
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title>Vue测试</title>
      		<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
      		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
      	</head>
      	<body>
      		<div id="app">
      			{{hello}}
      		</div>
      		<script>
      			var app = new Vue({
      				el: "#app",
      				data: {
      					hello: "Hello World! This is my first test"
      				}
      			})
      		</script>
      	</body>
      </html>
      
    • 4.控制台上出现下列语句即表示成功
      在这里插入图片描述

    3.Webpack+Vue.js开发

    1.概述

    • 1.大部分Vue.js项目都是在Webpack的框架下进行开发的
    • 2.vue-cli直接把Webpack做了集成

    NVM(Node Version Manager)

    Node版本管理工具
    不同Node版本可能出现冲突
    需要在同一台机器上同时安装多个版本的Node,NVM可以帮我们解决这个问题
    Windows下的NVM官方网址http://nvm.uihtm.com

    NPM(Node Package Manager)

    只要安装了node,就会捆绑安装该命令,它的作用与Ruby中的bundler以及Java中的maven相同,都是对第三方依赖进行管理

    Webpack
    随着SPA(Single Page App)单页应用的发展,js/css/png文件特别多,难以管理,文件夹结构也容易混乱
    希望项目可以具备压缩css,js,正切处理各种js/css的import,以及相关模板的html文件
    Webpack是一个打包工具,可以吧js,css,node,module,coffeescrip,scss/less,图片等都打包在一起
    实际开发中,都是统一使用Webpack+Vue.js的方式来做项目,这样才可以做到视图,路由,component等的分离,以及快速打包,部署和项目上线
    1.Webpack安装与使用
    npm install --save webpack
    Webpack自身是支持Vue.js的,所以Webpack与Vue.js已经结合到很难分清楚谁是谁
    只需要知道做什么事运行什么命令就行

    总体来说只要能安装上Node和Vue.js就可以
    安装Vue.js
    2.需要同时安装vue和vue-cli这两个node package

    npm install vue vue-cli -g
    

    -g表示这个包安装后可以被全局使用
    安装后注意配置环境变量
    找到vue.cmd的文件路径配置
    F:\Node\NodeJs\node_global
    运行vue
    3.创建一个基于Webpack模板的新项目
    vue init webpack my-project
    使用Vue都是在Webpack前提下使用的
    安装所需要的依赖
    cd my-project
    cnpm/npm install
    启动项目
    npm run dev
    或 npm start
    两则没什么区别,当运行npm run dev时,系统会进入到package.json文件中运行scripts中对应的脚本,可以看到start,对应的也是 npm run dev

    在这里插入图片描述

    在使用vue init webpack myproject后会生成一个崭新的项目,文件结构如上
    build:编译用到的脚本
    在这里插入图片描述
    build.js:打包使用,不能修改
    check-version.js:检查npm的版本,不能修改
    utils.js:不能修改,做一些css/sass等文件的生成
    vue-loader.conf.js:非常重要的配置文件,不能修改。内容是用于辅助加载Vue.js用到的css source map等
    webpack.base.conf.js
    webpack.dev.conf.js
    webpack.prod.conf.js都是基本的配置文件,不能修改

    config:各种配置
    在这里插入图片描述
    dev.env.js:开发模式下的配置文件,一般不用修改
    prod.env.js:生产模式下的配置文件,一般不用修改
    index.js:很重要的文件,定义了开发时的端口(默认8080),图片文件夹(默认static),开发模式下的代理服务器

    dist:打包后的文件夹
    node_modules:node第三方包
    在这里插入图片描述
    node项目所用到的带三方包特别多,也特别大,这个文件是由命令npm install产生的,所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下
    注意,这个文件夹不能放在git中

    src:源代码
    在这里插入图片描述
    assets:文件夹用到的图片都可以放到这里
    在这里插入图片描述
    components:用到的视图和组件所在的文件夹(核心)
    在这里插入图片描述
    router:路由
    在这里插入图片描述
    index.js是路由文件,定义了各个页面对应的url

    App.vue:
    如果说index.html是一级页面模块的话,App.vue就是二级页面模板,所有其他的Vue.js页面都作为该模板的一部分被渲染出来

    main.js:没有实际的业务逻辑,但是为了支持整个Vue.js框架,很有必要存在

    static:静态文件
    在这里插入图片描述

    index.html:最外层文件
    在这里插入图片描述

    package.json:node项目配置文件

    在这里插入图片描述

    4.Webpack+Vue.js实战

    在Vue.js中创建页面需要以下两步
    1.新建路由

    • 默认的路由文件是src/router/index.js,将其打开后,增加两行
    • import SayHello from '@/components/SayHello.vue’表示从当前目录下的components引入SayHello文件,其中@表示当前目录
    • 然后定义路由,其中path表示对应的一个url,name表示Vue.js内部使用的名称,component表示对应的.vue页面的名字,即:每当用户访问http://localhost:8080/#/say_hello时,文件就会渲染./components/SayHello.vue文件,name:'SayHello’定义了该路由在Vue.js内部的名称,其中当path为/表示默然访问该页面
      在这里插入图片描述

    2.新建vue页面
    在这里插入图片描述
    <template></template>代码块中表示的是HTML模板,里面写的是最普通的HTML
    <script></script>表示的是js代码,所有的js代码都写在这里,这里使用的是EMScript
    <style></style>表示所有的CSS/SCSS/SASS文件都写在这里

    定义并显示变量
    如果要在vue页面中定义一个变量,并显示出现,就需要事先在data中定义
    通过对于与原生Vue的区别可以看出之前原生的代码中存在于new Vue({})中的代码,在Webpack框架下,都应该放到export default{}中

    let,var,常量与全局变量
    声明本地变量,使用let或var
    区别:
    var:有可能引起变量提升,或者块级作用域问题
    let:就是为了解决以上两个问题存在的
    所以多用let,少用var
    在Webpack下的Vue.js中使用任何变量都需要使用var或let声明变量

    常量:
    const修饰

    全局变量:
    直接在index.html中声明即可

    window.title = ‘我的博客’

    导入代码
    import用于导入外部代码
    import Vue from ‘vue’
    由于vue是在package.json中定义的,因此可以直接import … form 包名,否则要加上路径

    import SayHello from ‘@/components/SayHello’
    在from后面添加@符号,表示是在本地文件系统中引入文件,@代表源代码目录,一般是src,也可以表示当前文件根目录
    @出现之前也会使用
    import SayHello from ‘…/components/SayHello’
    如果大量使用…/…入引起混乱,所以推荐使用@方法

    方便其他代码使用自己:export default{…}
    每个vue文件的

    假设有lib/math.js文件

    export function sum(x, y) {
    	return x + y
    }
    export var pi = 3.14
    

    lib/math.js文件可以导出两个内容,一个是function sum,另一个是var pi
    定义一个新的文件:app.js

    import * as math form "lib/math"
    alert("2π =" + math.sum(math.pi,math.pi))
    

    上面的代码中,可直接调用math.sum和math.pi方法

    import {sum, pi} from "lib/math"
    alert("2π =" + sum(pi, pi))
    

    可以直接调用sum()和pi

    而export default {…}则是暴露出一段没有名字的代码,不像上述有名字而已
    在Webpack下的Vue.js,会自动对这些代码进行处理,属于框架内的工作

    ES中的简写

    <script>
    export default {
    	data () {
    		return {}
    	}
    }
    </script>
    实际上是下面的简写形式
    <script>
    export default {
    	data:function() {
    		return {}
    	}
    }
    </script>
    

    箭头函数
    与coffeescript一样,ES也可以通过箭头表示函数

    .then(response => {})
    等同于
    .then(function(response) {
    	...
    })
    

    这样写的好处是强制定义了作用域,使用=>之后,可以避免很多由作用域产生问题

    hash中同名的key,value的简写

    let title = 'body'
    return {
    	title: title
    }
    等同于
    let title = 'body'
    return {
    	title
    }
    

    分号可以省略
    var a = 1;
    等同于
    var a = 1

    Vue.js渲染页面的过程和原理
    只有知道页面是如何被渲染出来的,才能更好的理解框架和调试代码

    渲染过程
    首先需要知道./build/webpack.base.conf.js是webpack打包的主要配置文件

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    
    
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },
      node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      }
    }
    
    

    1.js入口文件
    其中app: './src/main.js’定义了Vue.js的入口文件

    module.exports = {
      ...
      entry: {
        app: './src/main.js'	//定义了Vue.js的入口文件
      },
      ...
    

    2.渲染过程2:静态的HTML页面(index.html)
    每次打开的页面是http://localhost/#/
    实际上打开的文件是http://localhost/#/index.html

    在这里插入图片描述
    这里的

    就是将来会动态变化的内容
    index.html文件是最外层的模板

    3.渲染过程3:main.js中的Vue定义
    src/main.js
    在这里插入图片描述

    new Vue({
      el: '#app', // 这里的#app对应index.html中的<div id=app></div>
      router,
      components: { App },
      template: '<App/>' // 这里,App就是./src/App.vue
    })
    

    上面的App.vue会被main.js加载
    在这里插入图片描述

    上面代码中的就是第二层模板,可以认为该页面的内容就是在这个位置被渲染出来的
    在上面代码中<div id='app'>...</div>,该元素与index.html中的是同一个元素
    所有的中的内容都会被自动替换,<script>中的代码这是脚本代码

    渲染原理与实例
    Vue.js就是最典型的Ajax工作方式,即只渲染部分页面,不会整体刷新,
    浏览器的页面从来不会整体刷新,所有的页面变化都限定在index.html中的<div id='app'></div>代码中
    所有的动作都可以靠url来触发
    这个技术是靠Vue.js的核心组件vue-router来实现的
    不使用router的技术:QQ邮箱,QQ邮箱是属于url无法与某个页面一一对应的项目,所有页面的跳转都无法根据url来判断
    最大的特点是不能保存页面的状态,难以调试,无法根据url进入某个页面

    视图中的渲染

    渲染某个变量
    假设定义了一个变量
    可以这样来显示它:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h1>{{ test }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          test: '变量渲染成功!'
        }
      }
    }
    </script>
    

    方法的声明和调用
    声明一个show-my-value方法
    并调用
    对于有参数的方法,直接传递参数即可

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h1>{{ test }}</h1>
        <input type="button" @click="say_hi('李四')" value="点击"/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          test: '变量渲染成功!'
        }
      },
      methods: {
        say_hi: function(name){
          alert("Hi,"+name)
        }
      }
    }
    </script>
    

    在这里插入图片描述

    事件处理

    v-on
    很多时候@click等同于v-on:click

    视图中的Directive(指令)
    Vue.js是一种javascript框架,只能与标签结合使用,叫做Directive(指令)
    v-on,v-bind,v-if,v-for等,只要以v开头,都是Directive
    原理:
    1.用户在浏览器中输入网址,按回车键
    2.浏览器加载所有资源(js,html内容),此时尚未解析
    3.浏览器加载Vue.js
    4.Vue.js程序被执行,发现页面中的Directive并进行相关的解析
    5.HTML中的内容被替换,展现给用户

    前提,在directive中使用表达式
    表达式:a>1 有效
    普通语句:a=1;(这个是声明,不会有效)
    控制语句:return a;(不会生效)

    在所有的Directive中,只能使用表达式

    循环: v-for

    <template>
      <div class="hello">
        <ul>
          <li v-for="name in names">
            {{name}}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          names: ["李四", "王五", "赵六"]
        }
      },
    }
    </script>
    

    在这里插入图片描述
    判断: v-if
    条件Directive是由v-if , v-else-if, v-else配合完成

    <template>
      <div class="hello">
        <p>选择姓名:</p>
          <div v-if="name === '王五'">王五</div>
          <div v-else-if="name === '赵六'">赵六</div>
          <div v-else="name === '李四'">李四</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          name: '赵六'
        }
      },
    }
    </script>
    

    注意,v-if后面的引号中是===,

    ===是Ecmascript的语言,表示严格判断,因为js的 == 有先天缺陷,一般都是使用三个等号的形式

    这里是引用

    var num = 1; 
       
    var str = '1'; 
       
    var test = 1; 
       
    test == num  //true 相同类型 相同值 
       
    test === num //true 相同类型 相同值 
       
    test !== num //false test与num类型相同,其值也相同, 非运算肯定是false 
       
    num == str  //true  把str转换为数字,检查其是否相等。 
       
    num != str  //false == 的 非运算 
       
    num === str //false 类型不同,直接返回false 
       
    num !== str //true  num 与 str类型不同 意味着其两者不等 非运算自然是true啦
    ==!= 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。
    
    而
    
    ===!== 只有在相同类型下,才会比较其值。
     
    首先,== equality 等同,=== identity 恒等。
    
    ==, 两边值类型不同的时候,要先进行类型转换,再比较。
    
    ===,不做类型转换,类型不同的一定不等。
    
    下面分别说明:
    
    先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等:
    
    1、如果类型不同,就[不相等]
    
    2、如果两个都是数值,并且是同一个值,那么[相等](!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
    
    3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]4、如果两个值都是true,或者都是false,那么[相等]5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]6、如果两个值都是null,或者都是undefined,那么[相等]。
    
    再说 ==,根据以下规则:
    
    1、如果两个值类型相同,进行 === 比较。
    
    2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
    
    a、如果一个是null、一个是undefined,那么[相等]。
    
    b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
    
    c、如果任一值是 true ,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
    
    d、如果一个是对象,另一 个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试 valueOf先于toString;例外的是DateDate利用的是toString转换。非js核心的对象,令说(比较麻烦,我也不大懂)
    
    e、任何其他组合,都[不相等]。
    
    举例:
    
    "1" == true
    
    类型不等,true会先转换成数值 1,现在变成 "1" == 1,再把"1"转换成 1,比较 1 == 1, 相等。
    
    = 赋值运算符
    == 等于
    === 严格等于
    
    例:
    var a = 3;
    var b = "3";
    
    a==b 返回 true
    a===b 返回 false
    
    因为a,b的类型不一样
    
    ===用来进行严格的比较判断
    
    1
    2
    var data = ({"val":"7","flag":"true"});
    <FONT face=Verdana></FONT>
    下面需要如何判断flag的值?
    
    因为true加双引号==推测是字符串true
    
    如果不加双引号===就是布尔值true
    
    这个很重要,之前我一直没有搞清楚这一点
    
    写法1
    
    1
    if(data.flag=true){}else{..}
    这样写怎么都是正确的,根本得不到else的值,原因是这种写法相当于
    1
    if(true){}
    写法2
    1
    if(data.flag==true){}else{..}
    没有这种写法
    
    写法3
    1
    if(data.flag='true'){}else{..}
    这样写怎么都是正确的,根本得不到else的值,原因是这种写法相当于
    1
    if(true){}
    写法4
    1
    if(data.flag=='true'){}else{..}
    这个才是正确的写法
    
    “=”:这个表示赋值,不是表示运算符
    
    “==”:表示等于()===”:表示全等于(类型和值)
    

    v-if与v-for的优先级
    当v-if与v-for一起使用时,v-for具有比v-if更高的优先级,即Vue.js会先执行v-for,再执行v-if

    v-for与v-if的优先级:

    • {{name}}

    在这里插入图片描述

    v-bind
    v-bind指令用于把某个属性绑定到对应的元素属性

    这是颜色测试!

    在这里插入图片描述
    通过v-bind把《p》元素的style的值绑定成了’color:’ + my_color表达式,当my_color的值发生变化时,对应的颜色也会变化

    对于所有的属性,都可以使用v-bind

    v-on
    v-on指令用于触发事件
    上面通过v-on:click的声明,当被单击(click后),就会触发相应的方法
    v-on后面可以接HTML的标准事件
    例如:
    click(鼠标单击事件)
    dblclick(双击鼠标左键)
    contextmenu(单击鼠标右键)
    mouseover(指针移到有事件监听的元素或其子元素内)
    mouseout(指针移出元素,或者移到其子元素上)
    keydown(键盘动作,按下任意键)
    keyup(键盘动作:释放任意键)

    v-on可以简写,v-on:click往往会简写cheng@click,等等

    v-model与双向绑定
    v-model往往用来做双向绑定
    双向绑定
    1.可以通过表单(用户手动输入的值)来修改某个变量的值
    2.可以通过程序的运算来修改某个变量的值,并且影响页面的展示

    发送http请求
    每个SPA项目都要使用http请求,这些请求从服务器读取数据然后
    1.在前端页面进行展示,如论坛中显示文章列表
    2.做一些逻辑判断,如注册页面需要判断某个用户是否已经存在
    3.做一些数据库的保存操作,如修改密码

    使用http请求需要为当前的SPA项目加上http请求的支持

    import VueResource from 'vue-resource'
    
    Vue.use(VueResource)
    

    mounted()
    该方法表示当页面加载完毕后应该做哪些事情,是一个钩子方法

    设置Vue.js开发服务器的代理

    正常来说,JavaScript在浏览器中是无法发送跨域请求的,我们需要在Vue.js的开发服务器上做转发配置

    修改config/index.js文件,增加下列内容

    module.exports = {
    	dev: {
    		'/api': {	// 1.对所有以/api开头的url做处理
    			target: 'http://sivei.me' // 2.转发到simwei.me上
    			changeOrigin: true,
    			pathRewrite: {
    				'^/api': '' 3//把url中的'/api去掉'
    			}
    		}
    	}
    }
    

    原请求
    http://localhost:8080/api/interface/blogs/all
    现请求
    http://siwei.me/interface/blogs/all

    以上代理服务器内容只能在开发模式下才能使用,在生成模式下,只能靠服务器的nginx特性来解决js跨域问题

    data()方法用于声明页面会出现的变量,并赋予初始值
    mounted()方法表示页面被渲染好之后的钩子方法,会立即执行

    this. h t t p 中 的 t h i s . 表 示 当 前 的 v u e 组 件 , http中的this.表示当前的vue组件, httpthis.vuehttp表示所有以 开 头 的 变 量 都 是 v u e 的 特 殊 变 量 , 往 往 是 v u e 框 架 自 带 , 这 里 的 开头的变量都是vue的特殊变量,往往是vue框架自带,这里的 vuevuehttp就是可以发起http请求的对象

    $http.get是一个方法,可以发起get请求

    发起post请求
    与get类似,就是第二个参数是请求的body
    在vue的配置文件中,增加下面一句
    src/main.js
    Vue.http.options.emulateJSON = true
    目的是为了能够让发出的post请求不会被浏览器转换为option请求

    不同页面间的参数传递
    普通的web开发中,参数传递有一下几种形式
    url:/another_page?id=3
    表单
    而在Vue.js中,不会产生表单的提交(因为会引起页面的整体刷新)
    url:同传统语言
    Vue.js内部的机制

    this.$route.query.id获取url中的id参数

    新增路由
    修改src/router/index.js文件

    修改页面的跳转方式:使用事件

    展开全文
  • 说起前端框架,很多人都不知道是什么意思,下面本篇文章就来给大家介绍一下前端框架是什么意思?希望对大家有所帮助。 前端框架是什么意思? 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,...
  • 常用的前端框架有哪些?

    千次阅读 2021-10-30 10:17:01
    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等 现在越来越多的前端框架开始出现,这为我们的项目需求带来了极大的方便。本文将为大家详细介绍几种前端框架,有一定的参考...
  • 几大主流的前端框架(UI/JS)框架

    万次阅读 2020-12-14 11:03:25
    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。...web前端发展至今,演变出了无数的库和框架;说到库第一时间想到的是不是jquery?在小编刚接触库的时候
  • 目前流行的9大前端框架

    千次阅读 2022-05-10 22:20:59
    Stimulus 官网:https://stimulus.hotwired.dev Stimulus 是一个轻量级前端框架。这个框架通过 data-contoller data-target data-action 等属性,把 HTML 元素和 JavaScript 行为绑定,Stimulus 本身不处理 HTML ...
  • C#基于WPF的前端登录UI框架-Win版源码。基于C#-WPF的前端登录UI框架,流畅的动画效果。C#基于WPF的前端登录UI框架-Win版源码。基于C#-WPF的前端登录UI框架,流畅的动画效果。C#基于WPF的前端登录UI框架-Win版源码。...
  • Amaze UI前端框架做的wap移动网站模板_Amaze UI 前端框架 wap 移动端 ios andriod 手机 菜单 Amaze UI前端框架做的wap移动网站模板_Amaze UI 前端框架 wap 移动端 ios andriod 手机 菜单
  • 关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群最近看了几个微前端框架的源码(single-spa[1]、qiankun[2]、micro-app[3]),感觉收获良多。所...
  • 2021 非常火的 11 个微前端框架

    千次阅读 2021-11-04 00:35:31
    更具体地说,OC 旨在成为一个一站式微前端框架,从而使其成为一个丰富而复杂的系统,其中包括从组件处理到注册表、再到模板、甚至包括 CLI 工具。OpenComponents 有两个部分: components 是同构代码的小单元,主要...
  • 前端框架搭建

    2016-02-22 21:12:49
    前端框架搭建

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 518,807
精华内容 207,522
关键字:

前端框架

友情链接: 模数转换.rar