前端-Vue day01

最新推荐文章于 2024-09-27 15:52:57 发布

好&好

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量276

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_58719141/article/details/140476104

版权

导入：前端目前主流三大框架：Vue、Angular、React

一、Vue

（一）什么是vue

构建用户界面的渐进式javaScript框架，采用自底向上逐层应用开发
数据驱动视图，组件化开发

（二）框架和库的区别

1、框架

是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目

2、库

提供一些小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现

二、MVC和MVVM

（一）MVC

1、MVC是后端分层开发的概念

V：view视图层，作用：发送数据，展示数据
C：controller调度层，作用：响应数据，返回数据
M：model模型层，作用：处理数据，和数据库打交道

（二）MVVM

1、MVVM是前端视图层的概念

V：view视图层，作用：展示数据
VM：view-model视图模型层，作用：链接视图层和模型层，承上启下的作用
M：model模型层，作用：逻辑处理

三、vue.js的代码结构

<head>
	//1、引入下载好的vue.js
	<script src="./vue-2.4.0.js"></script>
</head>
<body>
	//2、书写视图层
	<div id="app">
	
	</div>
</body>
<script>
	//3、创建vue实例
	let vm = new  Vue({
			//3.1.控制区域 对应上方div区域
			el："#app",
			//3.2.存放数据区域
			data:{
			
			}，
			//3.3.存放方法区域
			methods：{
			
			}
     })
</script>

(一)插值表达式

将数据渲染到页面上

<body>
	//2、书写视图层
	<div id="app">
			{{name}}{{describe}}
			//小美今天好漂亮
	</div>
</body>
<script>
	//3、创建vue实例
	let vm = new  Vue({
			//3.1.控制区域 对应上方div区域
			el："#app",
			//3.2.存放数据区域
			data:{
					name:'小美'，
					describe：'今天好漂亮'
			}，
			//3.3.存放方法区域
			methods：{
			
			}
     })
</script>

（二）vue指令放到标签内

 v-text、v-html

1、相同点：都会替换标签中原有内容

2、不同点：v-html会解析富文本，v-text不会

（三）元素属性绑定

v-bind 简写 ":"

<img v-bind:src="src" alt="111">
<img :src="src" alt="111">

data(){
   src:"链接"
}

（四）事件的绑定

 v-on：事件类型      简写 "@"

<button v-on:click="btn">按钮</button>
<button @click="btn">按钮</button>
<img :src="src" alt="111">



data(){
	  src:"链接"
}
methods：{
	btn(){
	//此处可以省略    ：function
		console.log('1')
		this.src = "链接"
		// 操作data内的数据 （核心理念：数据驱动视图）
	}
}