Vue入门笔记

最新推荐文章于 2024-03-20 09:13:12 发布
最新推荐文章于 2024-03-20 09:13:12 发布
阅读量117 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46083662/article/details/119280787
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

Vue指令

1、Vue插入表达式

{{vue的数据属性或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">
			{{message}}<br />
			{{product.name}}<br />
			{{nums[2]}}<br>
			{{products[1].name}}
		</div>
	</body>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				// 普通变量
				message: 'hello Vue!',
				//对象
				product: {
					name: "华硕天选",
					price: 7000,
					proDate: "2020-3-5"
				},
				//数组(基本类型)
				nums: [23,1,24,24,13],
				//数组对象
				products: [
					{
						name: "华硕天选",
						price: 7000,
						proDate: "2020-3-5"
					},
					{
						name: "飞行堡垒",
						price: 8000,
						proDate: "2021-3-5"
					}
				]
			}
		})
	</script>
</html>

截图：
在这里插入图片描述

2、v-on指令

绑定事件，可以简写成@

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 点击事件 -->
			<button v-on:click="test1()">单击</button>
			<hr/>
			<button @click="test1()">单击简写形式</button>
			<!-- 鼠标滑动事件 -->
			<div @mousemove="test2" style="width: 200px;height: 100px;background-color: aqua;">
					我是div
			</div>
			{{x}}
		</div>	
	</body>
	<script>
		var app =new Vue({
			el:'#app',
			data:{
				x:0
			},
			methods:{
				test1 : function(){
					console.log("v-on 单击事件")
				},
				test2 : function(event){
					this.x=event.clientX;
				}
			}
		})
	</script>
</html>

截图：
v-on点击事件运行截图

3、v-bind指令

属性绑定 v-bind: 可以简写成 :

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="link">百度</a>
			<hr />
			<!-- v-bind简写形式 -->
			<a :href="link">百度</a>
		</div>
		
	</body>
	<script>
		var app =new Vue({
			el:'#app',
			data:{
				link: "http://www.baidu.com"
			},
			methods:{
			}
		});
	</script>
</html>

4、v-html,v-text,v-model指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--v-html 等同于js中innerHTML 和 jQuery中的html()-->
			<span v-html="link"></span>
			<hr />
			
			<!--v-text 等同于js中innerText和jQuery中的text()-->
			<span v-text="link"></span>
			<hr />
			
			<!-- v-model 相当于name属性和value属性的总和 -->
			用户名：<input v-model="name" />
			{{name}}
		</div>
		
	</body>
	<script>
		var app =new Vue({
			el:'#app',
			data:{
				link: '<a href="http://www.baidu.com">百度</a>',
				name:"zhangsan"
			}
		});
	</script>
</html>

v-html,v-text,v-model指令运行截图

5、v-if判断指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="age<18">未成年人禁止入内！</span>
			<span v-else-if="age<65">欢迎光临</span>
			<span v-else>who are you?</span>
			<input type="text" v-model="age" />
			 <!--
			    v-if : 条件成立，则渲染。条件不成立，则不渲染【没有元素】
			    v-show : 条件成立，则显示。条件不成立，不显示【通过css样式来隐藏元素】
			-->
			<div v-show="age<0">太棒了</div>
		</div>
	</body>
	<script>
		var app =new Vue({
			el:'#app',
			data:{
				age : 98
			},	
		})
	</script>
</html>

v-if指令运行截图

6、v-for遍历指令

<!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">
			<ul>
				<!-- 遍历对象中的属性 -->
				<li v-for="(v,k,i) in user">
					{{i}}--{{k}}--{{v}}
				</li>
				<hr >
				<!-- 遍历数组 -->
				<li v-for="(v,i) in nums">
					{{i}}--{{v}}
				</li>
				<hr >
				<!-- 遍历对象数组 -->
				<li v-for="(v,i) in products">
					{{i}}--{{v.name}}:{{v.price}}:{{v.proDate}}
				</li>
			</ul>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				user: {
					username: "张三",
					age: 12
				},
				nums: [10, 11, 52, 6, 2, 34],
				products: [{
						name: "A4纸",
						price: 2,
						proDate: '2000-12-12'
					},
					{
						name: "笔记本",
						price: 7,
						proDate: '2020-12-12'
					},
					{
						name: "圆珠笔",
						price: 5,
						proDate: '1999-12-13'
					},
				]
			}
		})
	</script>
</html>

v-for指令运行截图

7、监听属性

watch:

<!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">
			<span style="font-size: 30px;">计数器:{{counter}}</span>
			<button @click="counter+=2" style="font-size: 30px;">点击计数</button>
		</div>
	</body>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				counter:0
			},
			methods:{
			},
			watch:{
				counter : function(newVal,oldVal){
					console.log('计数器值的变化 :' + oldVal + ' 变为 ' + newVal + '!');
				}
			}	
		});
	</script>
</html>

在这里插入图片描述

8、计算属性

time1是函数，所以每次调用都会执行
computed :
time2是计算属性，所以只有第一次使用时才会执行，且会把该属性的值缓存下来，后面每次使用都使用的是缓存下来的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span style="font-size: 25px;">
				time1:{{time1()}}
			</span>
			<hr />
			<span style="font-size: 25px;">
				time2:{{time2}}
			</span>
			<hr />
			<button @click="addTime1(1)">add time1</button>
			<button @click="addTime2(1)">add time2</button>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el:'#app',
			data:{
			},
			methods:{
				time1:function(){
					return Date.now();
				},
				addTime1:function(obj){
					console.log(this.time1()+obj);
				},
				addTime2:function(obj){
					console.log(this.time2+obj);
				},
			},
			computed : {
				time2: function(){
					return Date.now();
				}
			}		
		});
	</script>
</html>

计算属性运行截图

9、局部组件

注册的组件只能在当前Vue中使用 components：

<!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">
			//使用局部组件
			<mytitle></mytitle>
		</div>
		
	</body>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
		
			},
			//组件注册
			components:{
				//组件名
				"mytitle":{
					data:function(){
						return {
							message : "局部组件注册"
						}
					},
					methods:{
						changeMessage:function(){
							this.message="修改组件Message"
						}
					},
					template:
						"<div><button @click='changeMessage()'>修改Message的值</button>{{message}}</div>"
				}
			}
		})
	</script>
</html>

使用局部组件产生的按钮
使用局部组件产生的按钮

10、全局组件

所有Vue均能使用 Vue.component（组件名,组件实现）

<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">
			<mytitle></mytitle>
		</div>
		
		<div id="app1">
			<mytitle></mytitle>
		</div>
		
	</body>
	<script>
		//注册全局组件
		Vue.component("mytitle",{
					data:function(){
						return {
							message : "全局组件注册"
						}
					},
					methods:{
						changeMessage:function(){
							this.message="修改组件Message"
						}
					},
					template:
						"<div><button @click='changeMessage()'>修改Message的值</button>{{message}}</div>"
				})
				
		    var vm = new Vue({
		        el: '#app',	
		    });
		    new Vue({
		        el : "#app1", 
		    });	
	</script>
		
</html>

在这里插入图片描述

爪蛙岛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue入门笔记以及项目源码
04-18
资源包括入门vue的ppt资料以及后期项目的源码，笔记全面比较详细，基本上讲述了vue的大部分内容，同时也包括了项目实战
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
vue入门笔记
WYT11的博客
08-10 110
vue入门笔记 <!--声明式渲染--> <body> <script src="./vue/dist/vue.js"></script> <!-- 引入vue--> <h1 id="app"> {{name}}非常帅！！！ <!-- 获取data里面的对象值 --> </h1> <script> let vm = n
前端框架Vue入门笔记
YoSelf_的博客
09-07 204
下面是本人在观看慕课网上面的《vue2.5入门》这门课之后总结出来的笔记，供日后参考，不是很详细，也请大家放松身心观看。 vue基础语法 模板，实例，挂载点 创建vue实例时，使用new vue({})来创建，并通过el： ,来实现挂载点与实例之间的绑定。el中的就是挂载点，vue只会处理它的挂载点下面的内容。挂载点内部的内容就是模板，而且模板也可以写在vue实例里面，这时需要写在template...
vue 入门笔记 01
唐僧的专栏
02-16 199
                                                 vue 入门笔记  实例化vue对象    index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue.js&lt;/title&am
Vue入门笔记（二）
yzy258的博客
06-05 199
文章目录Vue入门笔记（二）过滤器指令初识语法糖 Vue入门笔记（二） 过滤器 Vue. 支持在{{   }}插值的尾部添加一小管道符" | " 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的,通过给 Vue 实例添 加选项 filters 来设置。 例子： <div id="app">{{name | filter}}</div> <script> var app = new Vue({
Vue入门笔记，详解系列文章
m0_60607971的博客
03-20 90
toogle
vue 入门笔记 02
唐僧的专栏
02-16 176
                                               vue 入门笔记  Vue数据和方法    index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue.js&lt;/title&
学习笔记|Vue入门笔记—Vue安装详细教程
Jum的博客
03-14 8878
1. 创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\Users\用户名\，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行。4、然后安装到这一步的时候有五组选项，就是安装的时候会安装一些组件和npm，同时会添加环境变量，具体点击每一个的时候右侧有说明。其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。选择【Next】，然后继续下一步。
Vue入门day01笔记
10-27
我是新手，今天的笔记，看视屏自己做的笔记，记录一下第一次用这个
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
适合想要学习Vue.js前端框架的新人、复习资料，里面资料都是个人从0开始学习所总结的笔记（希望能帮到更多人）
VUE入门学习项目资料与学习笔记.zip
02-12
主要是本人在学习vue过程中总结的学习心得和代码示例。包括Vue的环境搭建、常用指令、属性、组件、vue-router、axios以及项目的简单讲解。
pyzmq-25.1.1b2-cp312-cp312-win_amd64.whl
最新发布
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
wireshark安装教程入门.md
06-13
附件是wireshark安装教程，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
grpcio-1.3.0-cp36-cp36m-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Werkzeug-0.12.1.tar.gz
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Delphi 12控件之FMSoft-UniGUI-1.90.0.1567-Downloadly.ir.rar
06-13
FMSoft_UniGUI_1.90.0.1567_Downloadly.ir.rar
基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本121.0.6111.0)
06-13
资源包括: 1.Java爬虫实战代码 2.selenium学习笔记 3.代码演示视频 4.谷歌浏览器chrom121.0.6111.0 chrome-linux64.zip chrome-mac-arm64.zip chrome-mac-x64.zip chrome-win32.zip chrome-win64.zip 5.谷歌浏览器驱动器Chromedriver121.0.6111.0 chromedriver-linux64.zip chromedriver-mac-arm64.zip chromedriver-mac-x64.zip chromedriver-win32.zip chromedriver-win64.zip 特别说明:Chrome 为测试版(不会自动更新) 仅适用于自动测试。若要进行常规浏览，请使用可自动更新的标准版 Chrome。)
尚硅谷vue md笔记
07-23
总之，尚硅谷Vue.md笔记是一份非常有价值的学习资料，对于想要学习Vue框架的开发者来说，它可以帮助我们快速入门和深入学习，并且提供了丰富的实例和相关资源，是一份非常推荐的学习材料。 ### 回答3： 《尚硅谷...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爪蛙岛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值