初识Vue

最新推荐文章于 2024-07-18 17:37:56 发布
最新推荐文章于 2024-07-18 17:37:56 发布
阅读量197 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Start_t/article/details/101644385
版权

初识Vue

初识Vue

什么是vue

  1. 构建数据驱动的web应用开发框架；
  2. Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架；
  3. Vue 被设计为可以自底向上逐层应用；
  4. Vue 的核心库只关注视图层；
  5. 便于与第三方库或既有项目整合；
  6. Vue 不支持 IE8 及以下版本；

在之此之前先去安装vue.js的环境，可以去https://cn.vuejs.org/v2/guide/下载

在学习之前先来了解一下MVC，MVVM吧
1、MVC是后端分层开发的概念
M（model）：主要处理数据（ajax/jsonp/数据解析）的传递，可以复用。
V（view）：看作前端页面
C（control）：控制层(串业务,事件驱动) 一般不复用
2、MVVM
MVVM是前端视图层的概念，分为了三部分，Model、View、VM（View Model）

Vue中，Vue实例相当于VM，其中的data相当于M，页面中显示的部分为V。

声明式渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<!-- 注：模板和new出来的实例必须在同一个作用域里，如：#app和vm在同一个作用域 -->
		<!-- view层 -->
		
		<!-- <div id="app">
			<h3>111</h3>
			<p>000</p>
		</div> -->
		<!-- vue渲染页面用mustache，即两个大括号{{}} -->
		
		<div id="app">
			<h3>{{this.title}}</h3>	 this在模板当中可以省略
			<p>{{duanluo}}</p>
			<span>{{message}}</span>
		</div>
	</body>
	<script>
		/* vm层 是new出来的vue实例 */
		let vm = new Vue({	//配置选项
			//key:value
			//el:'选择器'
			el:'#app',
			data:{	//moduel M层	
			title:'标题',	//vm.$data.title或vm.title都可以获得
			message: 'Hello Vue!'
			duanluo:'一个段落，一个段落，一个段落',
			}
		})
		
	</script>
</html>

从上面看出数据和DOM都已经被建立了关联，所有的东西都是响应式的（如何看出是响应式的？可直接打开这个网页的控制台，然后输入vm.title = ‘123’,这样就可以直接在页面上看到title变化了,也就是V层变化了）

model不同的数据类型在view层的渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<h3>model不同的数据类型在view层的渲染结果</h3>
			<div>string:{{str}}</div>
			<div>num转变为字符:{{num}}</div>
			<div>bl转变为字符:{{bl}}</div>
			<div>arr转变为字符:{{arr}}</div>
			<div>json转变为字符:{{json}}</div>
			<div>fn转变为字符:{{fn}}</div>
			<div>fn2:{{fn()}}</div>
			<div>un转变为空字符:{{un}}</div>
			<div>fn转变为空字符:{{nu}}</div>
			<div>str空字符不作为:/{{str2}}/</div>
		</div>
		
	</body>
	<script>
		
		/* vm层 是new出来的vue实例 */
		let vm = new Vue({	//配置选项
			//key:value
			//el:'选择器'
			el:'#app',
			data:{	//moduel M层	
			title:'标题',	
			duanluo:'一个段落，一个段落，一个段落',
			str:'你好',
			num:123,
			bl:true,
			arr:['a','b','c'],
			json:{aa:1,bb:2},
			fn:function(){alert(1)},
			un:undefined,
			nu:null,
			str2:''
			}
		})
		
	</script>
</html>

view层的元素绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h3>数据绑定的形式（model放到view层去渲染）</h3>	
			
			<h4>mustach（innerHTML动态化）</h4>
			<div>string:{{str}}</div>
			
			<h4>指令绑定（innerHTML动态化，写法不依赖于mustach）</h4>
			<div v-text="str"></div>
			
			
			<h4>属性绑定（能让属性名或值动态化）</h4>
			<!-- <img src="{{url}}" alt="" />	vue1.x -->
			<img v-bind:src="url" alt="" />
			<img :src="url" alt="" />
			
			<h4>动态组件绑定（标签动态化，后面单独说）</h4>
			
		</div>
		<script>
			let vm = new Vue({
				el:'#app',
				data:{
					str:'picture1',
					url:'https://cn.vuejs.org/images/vant.png'
				}
			})
		</script>
	</body>
</html>

view特殊情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>转义</h3>
			<div>{{strong}}</div>
			<div v-text="strong"></div><hr />
			
			
			<h3>非转义</h3>
			<div v-html="strong"></div><hr />
			
			
			<h3>按需渲染|列表渲染|列渲</h3>
			<div>{{arr}}</div>
			<ul>
				<li v-for="val in arr">{{val}}</li><br />
				<li v-for="val in this.arr">{{val}}</li>
			</ul>
			
			
			<h3>条件渲染 | 条渲</h3>
			<div v-show="bl">box</div>	<!-- 当布尔值为true时才显示出来 -->
			
		</div>
	</body>
	<script>
		let vm = new Vue({
			el:'#app',
			data:{
				strong:'<strong>加粗</strong>',
				arr:['aa','bb','cc'],
				bl:false
			}
		})
	</script>
</html>

事件

* 事件简写形式 v-on:click =》 @click

<button onclick="fn()">click</button> ---- 原生js
<button v-on:click="fn()">click</button> --- vue
<button @click="fn()">click</button> --- vue简写

* 属性的简写形式 v-bind:class =》 :class

<div class="test"></div> --- 原生，test就是一个固定的值
<div v-bind:class="test"></div> --- vue中，test可以是一个变量
<div :class="test"></div> --- vue简写形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			
		<h3>事件</h3>
		<div>{{count}}</div>
		<!-- <input type="button" value="+" v-on:click="指定vue对的methods,即方法" /> -->
		<!-- <input type="button" value="+" v-on:click="show" /> -->
		<!-- 上面的v-on可以直接用@代替 -->
		<input type="button" value="+" @click="showadd" />
		<input type="button" value="-" @click="show"/>
		
		
		
		<input type="button" value="事件对象" @click="show2"/>
		<input type="button" value="this指向" @click="show3"/>
		<input type="button" value="传参" @click="show4(12,'qwe',$event)"/>
		<!-- $event代表实例身上的属性，代表当前触发的事件的事件对象 （事件排名分先后）-->
		
		</div>
		
	</body>
	<script>
		let mv = new Vue({
			el:'#app',
			data:{
				count:1,
			},
			methods:{
				// key:value,
				// 方法:fn
				showadd:function(){
					// this == vm
					this.count ++
				},
				show:function(){
					// this == vm
					this.count --
				},
				
				
				
				show2:function(ev){			//事件对象默认接收
					console.log('事件对象',ev);
				},
				show3:function(){
					console.log('this指向',this);
				},
				show4:function(arg1,arg2,ev){//传参数时，事件对象，需要手动传递 $event
					console.log('参数',arg1,arg2);
					console.log('事件对象',ev);
				},
			}
		})
	</script>
</html>

vue里的箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 注意：vue提供的选项的值如果是函数时，不可用箭头函数
 -->
 
			<h3>事件</h3>
			<!-- <input type="button" value="按钮" @click="show"/> -->
			<input type="button" value="按钮" @click="show($event,'qwe',11)"/>
			
			
		</div>
	</body>
	<script>
		
		let vm = new Vue({
			el:'#app',
			data:{
				arr:[1,2,3,4]
			},
			methods:{
				// show:function(){},
				// show:()=>{alert(1)},
				// show:(ev)=>{console.log('事件对象',ev)}
				// show:(ev,str,num)=>{console.log('事件对象',ev,str,num,this)}	//this的指向指到了Windows
				//上面的可简写为:
				show(ev,str,num){
					console.log('事件对象',ev,str,num,this)
					this.arr.forEach(()=>{console.log('forEach',this)})
					
				}
			}
		})
		
	</script>
	
	<script>
		/* 
		var a = 1;
		var b = 'qwe'
		//对象表达式
		var obj = {
			a,b,
			// c:function(){}
			c(){}
		}
		
		console.log('obj',obj.a,obj.b);
		obj.c()
		 */
		
		/* 
		class App{
			constructor() {
			    this.xx=11;
			}
			show(){}
		}
		 */
		
	</script>
</html>

三种绑定方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!-- 单向绑定 -->
			<!-- <input type="text" :value="iptName" /> -->
			
			
			<h3>v-model双向绑定</h3>
			<input type="text" v-model:value="iptName" />
			{{iptName}}
			
			
			<h3>手动实现双向绑定</h3>
			<!-- 修改model层可以影响view层，但是修改view层不能影响model层 -->
			<input type="text" :value="iptName2" @input="changeIptName2"/>
			{{iptName2}}
			
		</div>
	</body>
	<script>
		let vm = new Vue({
			el:'#app',
			data:{
				iptName:'hello',
				iptName2:'world',
			},
			methods:{
				changeIptName2(ev){
					this.iptName2 = ev.target.value
				}
			}
		})
	</script>
</html>

列表渲染_条件渲染

1.v-for列渲
可以为数组索引指定别名 (或者用于对象的键):
(item, index) in items
(val, key) in object
(val, name, index) in object
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高
跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性 :key=‘item.id’

2.v-show条渲
根据表达式之真假值，切换元素的 display CSS 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h3>列表渲染</h3>
			
			<ul>
				<!-- <li v-for="val in arr">{{val}}</li> -->
				<!-- 也可以把上面的in改成of，结果不变 -->
				<li v-for="val of arr">{{val}}</li>
				<!-- 可以拿到对应的索引 -->
				<li v-for="(val,idx) of arr">{{val}}/{{idx}}</li>
			</ul><hr />
			
			<ul>
				<li v-for="val in arr2">{{val}}</li><!-- 对象强行转成字符串 -->
			</ul><hr />
			
			<!-- 嵌套 -->
			<ul>
				<li v-for="item in arr2">
					<span>{{item.name}}</span>
					<span>{{item.age}}</span>
					<span>{{item.id}}</span>
				</li>
			</ul><hr />
			<!-- 嵌套时有子集 -->
			<ul>
				<li v-for="item in arr3">
					<span>{{item.name}}</span>
					<span>{{item.age}}</span>
					<span>{{item.id}}</span>
					<ul>
						<li v-for="item2 in item.children">
							<span>{{item2.name}}</span>
							<span>{{item2.age}}</span>
							<span>{{item2.id}}</span>
						</li>
					</ul>
				</li>
			</ul><hr />
			
			
			<h3>条件的渲染条件要的是一个布尔值，不是会转换</h3>
			<div v-show="bl">box1</div>
			<div v-show="''">box2</div>
			<div v-show="' '">box3</div>	<!-- true -->
			<div v-show="0">box4</div>
			<div v-show="undefined">box5</div>
			<div v-show="null">box6</div>
			<div v-show="{}">box7</div>	<!-- true -->
			<div v-show="[]">box8</div>	<!-- true -->
			<hr />
			
			
			<input type="button" value="按钮" @click="bl = !bl" />
			<div style="width: 50px;height: 50px;background: red;" v-show="bl">盒子</div>
			
		</div>
		
	</body>
	<script>
		let vm = new Vue({
			el:'#app',
			data:{
				arr:['aa','bb','cc'],
				arr2:[
					{id:1,name:'wang',age:18},
					{id:2,name:'ting',age:19},
				],
				arr3:[
					{id:1,name:'wang',age:18,children:[
						{id:1,name:'John',age:20},
						{id:2,name:'Lili',age:21},
					]},
					{id:2,name:'ting',age:19},
				],
				bl:'false',
				item:'qwe'
			},
			methods:{
				
			}
		})
	</script>
</html>

总结

标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性
不常用的
v-slot
v-pre
v-cloak
v-once

Start_t
关注
专栏目录
Vue笔记1_start（简介、helloworld、挂载、数据对象）
qqq777_的博客
03-17 216
1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动 el:挂载点（建议使用id选择器） Vue实例的作用范围：el选项命中的元素及其内部的后代元素。 Vue中用到的数据定义在data中。 data中可以写复杂类型的数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
Vue-Start
m0_60698858的博客
08-05 284
一、认识Vue 渐进式 可以将Vue作为项目一部分嵌入（如果有一个用jQuery写的项目需要改为Vue，可以直接在编写新界面时使用Vue即可，也就是说一个项目可以同时存在两种框架编写） 特点（高级功能） 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 二、尝试Vue 定义 之前使用的是var，但在ES6中一般使用let和const（一个定义变量一个定义常量） 挂载（一个简单计数器的小例子） <head> <meta charset="UT.
vue起步
Start_t的博客
04-11 188
vue起步插值表达式 | 指令 | 属性事件列渲v-for | 条渲v-show VUE是个MVVM框架（没完全遵循），即 M <-> VM <-> V 先来介绍一下MVC model M 数据 ajax/jsonp/数据解析 可以复用 view V 视图表现层 展示数据、创建元素，变色，运动 可以复用 control C 控制层(串业务,事件...
【vue】vue项目结和start
bandaoyu的note
03-11 826
转自：https://zhuanlan.zhihu.com/p/50445658（强烈推荐去看原文） 前言: 初学Vue是有一定的学习成本的。比如我刚开始接触Vue时，我还未接触node.js，脚手架webpack。在安装时就遇到了难题。vue-cli作为一款mvvm框架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。...
vue-start
03-08
验证开始 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 运行端到端测试 npm run test:e2e 整理和修复文件 npm run lint 自定义配置 请参阅。
初识VUE
huangguanhang的博客
05-09 331
1，vue是一个渐进式的js的框架，渐进式就是一个个功能特性用到了那个就用那个别的功能特性可以先不用，而框架则是为了提高我们的开发效率，节省一些繁琐的代码，其中还有约束要求我们的技术栈和项目架构是一样的 2,vue是基于mvvm开发的，而mvvm的模型如下 2没有数据双向绑定之前我们写的代码都可以称之为是真实的DOM，对于我们的系统性能有很大的影响，但是在vm中我们使用了虚拟DOM可以大大提高我们的性能 3vue的入门程序。首先需要去官网下载vue,js前往官网 3.1引入vue.js &
初识vue3
AYBBZXY的博客
02-03 1033
因为npm的管理员权限问题,我这边不能直接在文件中右击执行windows power shall,所以要在管理员内执行,通过cd ~绝对路径进入文件内,然后再创建vue3👇。// 上面代码的意思式:一旦当当前这个这个count变化了,就会执行后面的回调,后面的回调当中可以拿到新值和老值(即变化前和变化后的)提供的任何数据或者函数想要在模板中应用,必须return.只有在对象当中return了,这个变量才能在页面当中应用。在上面的示例中，父组件通过props将message数据传递给子组件Child。
初识vue
最新发布
tc9527mt的博客
07-18 895
Node.js 是一个开源、跨平台的JavaScript运行环境，基于Chrome的V8引擎，使开发者能用JavaScript编写服务器端应用程序。它采用事件驱动、非阻塞I/O模型，特别适合构建轻量、高性能的网络应用，如实时通信、微服务架构等，同时拥有庞大的生态系统NPM，支持丰富的第三方模块。
初识 Vue脚手架
Alienkp的博客
07-25 566
stylescoped="scoped">或者简写为。data(){return{msg"脚手架写大项目"}}（3）运行npmi@vue/cli-g(安装vue脚手架)package-lock.json插件安装地址缓存（较重要）（1）node官网下载node.js(下载过可以调过这一步)bable.config.jsES6转ES5配置。vue.config.jsvue项目配置文件。----HelloWorld.vue默认组件。jsconfig.jsonjs配置。......
初识Vue.html
07-29
初识Vue.html
初识 Vue.js 中的 *.Vue文件
11-27
什么是Vue.js？ vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过...
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
Vue.js是当前前端开发领域中非常流行的一个JavaScript框架，它主要用来构建用户界面，属于渐进式框架。渐进式框架的意思是，开发者可以将Vue作为应用的一部分，逐步地添加到现有的项目中，而无需一开始就将所有代码...
自定义指令（钩子函数）
Start_t的博客
04-11 3588
自定义指令（钩子函数） 自定义指令: 指令是个函数|对象,用来操作dom的, 里面的this 返回window a)全局: Vue.directive('指令名不带v-',函数(el,binding)) el == 使用指令的DOM元素 binding 是个对象 含有传入的 参数(binding.value) b)局部: 定义在选项里面 direct...
vue ui的使用
Start_t的博客
05-17 703
vue ui的使用 1.使用win + R 打开cmd 在cmd中输入vue ui（注：在这之前需要安装vue CLI 3.0以上版本，否则会卡在vue ui这个命令行这） 2. 3. 4. 5.选择你要选择的功能 6. 7.可以选择为预设，也可以不选择，这里看个人，安装好就是一下这个样子 8.当我们要安装插件时 把全部引入改为按需引入 9.安装axios ...
vue中计算属性computed与属性检测watch的区别
Start_t的博客
10-07 573
Vue中computed与watch的区别计算属性属性检测 计算属性computed 属性检测watch 首次运行 首次不运行 调用时需要在模板中渲染，修改计算所依赖元数据 调用时只需修改元数据 默认深度依赖 默认浅度观测 适合做筛选，不可异步 适合做执行异步或开销较大的操作 计算属性 <!DOCTYPE html> <html> <...
计算属性computed和属性检测watch
Start_t的博客
04-11 302
计算属性和属性检测 计算属性: 是一个函数,所依赖的元数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可调用 computed:{ 计算属性: function(){return 返回值} 使用: {{计算属性}} } 与methods的区别: 方法会每次调用，计算属性不会，默认只调用一次 计算属性的性能高: 适合做筛选，基于它们的响应式依赖进行...
vue预渲染 render-spa-plugin
Start_t的博客
11-10 275
vue预渲染 render-spa-plugin 全局安装 npm install -g @vue/cli-init 创建vebpack项目 vue init webpack . // 在当前文件夹下创建项目 ? Generate project in current directory? Yes ? Project name prerender-spa ? Project description A Vue.js project ? Author dxc1996 <1889536488
vue——组件传值
Start_t的博客
05-05 223
vue——组件传值1.父传子2.子传父3.兄弟传兄弟4.爷传孙 1.父传子 父->子 props父子 使用场景: 电商 (松耦合) $parent 子抓父 使用场景: 通用组件（紧耦合) <子 :自定义属性="父数据"></..> 子组件: 选项 props:['自定义属性'] props:{自定义属性:{type/defaul...
Vue入门：MVVM模式与快速集成指南
前端开发Vue基础篇：Day01 - 初识Vue是一个入门级教程，介绍了JavaScript框架Vue的基本概念和使用方法。Vue，全称为“Vue.js”，是一个轻量级的渐进式前端开发框架，遵循Model-View-ViewModel (MVVM) 模式，设计目标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值