Vue.js

程丹丹 .

已于 2023-05-12 20:59:47 修改

阅读量124

点赞数

文章标签： vue.js 前端 ui

于 2023-05-07 16:28:20 首次发布

本文链接：https://blog.csdn.net/weixin_62304013/article/details/130184342

版权

MVVM

MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的
状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事
ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View
中由于需要展示内容而涉及的业务逻辑。

VUE

什么是 Vue.js

Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架.
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心
库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三
大主流框架！ https://cn.vuejs.org/

Vue.js 优点

1.体积小压缩后 33K
2.更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的
DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没
有真实的操作 DOM，所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作
提交，将 DOM 操作变化反映到 DOM 树上。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,
把更多的精力投入到业务逻辑上.
4 生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现

快速开发！对初学者友好、入门容易、学习资料多.

<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				message:"hello",
				str:"ppppop",
			}
			// 在data中以键值对形式定义变量
		});
		</script>



<div>
		{{message}}
		{{str}}
</div>

Vue的部分练习（跑马灯）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- ../回退到上一级目录-->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="button" value="hi" @click="startTime()" />
			<input type="button" value="stop" v-on:click="stopTime()" />
			<h4>{{message}}</h4>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					message:"跑马灯~~~~~~~~~~~~~~~~~~~~~~~~",
					t:0
				},
				methods:{
					startTime(){
						this.t=setInterval(this.oper,500);
					},
					stopTime(){
						clearInterval(this.t);
					},
					oper(){
						this.message=this.message.substring(1)+this.message.substring(0,1);
					}
				}
			})
		</script>
	</body>
</html>

定时器的应用

点击“hi”可使文字开始滚动，“stop”则停止滚动

Vue（v-bind)

作用是为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接省略 v-bind，只保留：属性名

<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle" :src="imgSrc" />
data:{
imgSrc:'img/3.jpg'
imgTitle:"这是一张图片"
}
//我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
data:{
isActive :true
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgsrc" v-bind:title="titleTip"/>
			<img :src="imgsrc" :title="titleTip"/>
			<input type="button" value="test" @click="testMe()" />
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					imgsrc:"img/a.jpg",
					titleTip:"this is a picture"
				},
				methods:{
					testMe(){
						this.imgsrc="img/2.jpg"
					}
				}
			});
		</script>
	</body>
</html>

点击按钮使文本发生改变，通过布尔值来改变

<div v-bind:class="{dzcss:dz}"> 点赞</div>
methods:{
					testMe(){
						this.imgsrc="img/2.jpg";
						this.dz=true;
					}
				}

v-for（循环）

原始循环方式

testMe(){
						var s="";
						for (var i = 0; i < this.users().length; i++) {
							s+="<div>"+this.users.[i]+"</div>";
							
						}
						document.getElementById("box").innerHTML=s;
					}

代码较长

使用v-for

<div v-for="user in users">{{user.name}},{{user.age}}</div>

data:{
					// users:[1,2,3,4,5,7,7,8]简单版
					users:[{name:"jim",age:"10"},{name:"tom",age:"11"},{name:"lili",age:"12"}]
				},

运行结果

Vue实例生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数
据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添
加自己的代码的机会。

beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){
console.log('mounteda’);
}

当vue对象创建完成，且与标签挂在成功之后会自动执行mounted

mounted与method同级

vue-cli 搭建项目

传统的web项目中一个页面就是一个html文件，各个文件之间都是相互独立的，想要进行一个公共操作（例如判断用户是否已经登录），就需要在每一个页面编写判断代码

这种结构的web项目，目前已被淘汰，没有全局的配置方式（能做，但很麻烦）

目前的前端推出一种新的架构思想，单页面架构加组件

一个项目中最终只有一个html文件，在html页面中可以切换多个组件，可以很方便的进行一些全局的配置

搭建前端新的项目结构的步骤：

1.前提：需要一个前端运行环境（Node.js)

简单的说 Node.js 就是运行在服务端的 JavaScript。如果你熟悉 Javascript，
那么你将会很容易的学会 Node.js。
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，
V8 引擎执行 Javascript 的速度非常快，性能非常好。

安装好后以管理员身份运行监测

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展（插件）。npm 是
JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载，每周下载约 30 亿次。npm 让 JavaScript 开
发人员可以轻松地使用其他开发人员共享的代码。

使用 HbuilderX 快速搭建一个 vue-cli 项目

2.使用hbuilder创建前端项目

3.在终端中使用npm run serve 命令启动前端项目

一个vue文件就叫一个组件

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建
单页面应用变得易如反掌。

4.创建自己的组件（Login.vue）

一个组件只能有一个根标签标签

<template>
	<div> success</div>
//js脚本
</template>

<script>
	export default{
		// 定义数据
		data(){
			return{
				
			}
		},
		// 定义函数
		methods:{
			
		},
		// 生命周期·
		mounted(){
			
		}
	}
</script>

<style>
//css
</style>

在前端项目中，组件不能直接通过文件名访问，需要借助vue中组件路由功能

安装下载vue route组件让vue把所有组件管理起来，并为每个组件配置一个映射地址 npm i vue-router@3.5.3
创建一个router目录，创建一个index.js文件，配置路由
在main.js中配置路由组件
在app.vue中添加<router-view></router-view>标签

Element UI（桌面组件库）

Element UI

下载Element UI
在main.js中配置Element UI
在登陆组件中，借用Element UI表单组件，生成登陆组件

程丹丹 .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
复制链接

扫一扫