前端学习之路——Vue.js基础

于 2022-09-03 09:05:50 发布
阅读量83 收藏
点赞数
分类专栏： 前端基础 文章标签： vue.js 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37942054/article/details/126673424
版权
本文详细介绍了Vue.js的基本用法，包括引入Vue、创建Vue对象、双向数据绑定、数据定义方式、Vue对象的方法、基础指令的使用以及DOM元素的引用。通过实例展示了如何在Vue中创建MVVM模型、展示数据、调用方法、处理数据以及操作DOM。
摘要由CSDN通过智能技术生成

1、引入Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用 vue.js -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- MVVM 
		 M - Model  数据
		 V - view   视图
		 VM - ViewModel  数据连接视图
		 -->
		 
		 <!-- View 数据展示层 -->
		 <div id="d1"> 
			 <p> {{message}} </p>
			 <!-- {{}}  - 双层大括号 是在节点中展示vue对象的信息的名字 -->
		 </div>
		 
		 <script type="text/javascript">
		 	// Model  数据层 
			let data = {
				message:"hello Vue"
			}
			
			//创建 Vue对象  连接view和model 
			// 参数： 挂载点 - 即给视图绑定的参数数据 - 需要先创建参数对象
			let p = {
				// el - 即element，绑定的元素id
				//  data - 要展示的数据
				el: "#d1",
				data : data
			}
			let vm = new Vue(p);
		 </script>
		 <!-- vue.js 常用安装方式 
		  1.独立版本 
		  直接在官网下载并使用<script>标签引入，Vue会被注册为全局变量
		  下载时有开发版本和生产版本两个选项，开发版本包含较全的警告和debug，
		  生产版本比较简洁。
		  2.npm安装
		  在用vue.js构建大型应用时推荐使用npm安装 -(npm是javaScript的包管理工具 ，
		  也是Node.js平台默认的包管理工具，
		  通过npm可以安装、共享、分发代码，管理项目依赖关系。)
		  Node.js简单来说就是运行在服务端的javaScript，
		  是一个基于chrome javaScript运行时建立的一个平台
		  -->
	</body>
</html>

2、Vue对象使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<p> {{message}}</p>
			<p> {{time}}</p>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#d1",
			data : {
				message:"hello vue!!!",
				time : new Date()
			}
		});
	</script>
</html>

3、双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<h3>{{message}}</h3>
			<!-- 双向绑定：通过 v-model 指令实现，主要用来在表单控件元素上，
			 创建双向数据绑定，根据表单上的值，自动更新绑定元素的值。-->
			<input type="text" v-model = "message">
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el : "#d1",
			data : {
				message :"你是人间小甜瓜"
			}
		})
	</script>
</html>

4、data数据的三种定义方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<p>{{message}}</p>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#d1",
			//方式一   data:{属性名：值}
			// data: {
			// 	message:"hahah "
			// }
			// 方式二  function函数 
			// data :function(){
			// 	return {
			// 		message:"heheheh"
			// 	}
			// }
			// 方式三  是方式二的ES6写法
			data(){
				return {
					message:"hhoohohoh"
				}
			}
			
		})
	</script>
</html>

5、Vue对象的方法methods

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<p> 调用vue的方法 </p>
			<p> {{ sayHello() }}</p>
			<p> {{sayColor("ss") }}</p>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#d1" ,
			data: {
				message:"hahah "
			},
			methods :{ 
				sayHello : function(){
					//无参方法 this指向当前对象 
					//可以通过this指向自定义的变量，返回此变量或指定的值
				return this.message;
				},
				sayColor : function(color){//有参方法
					return color;
				}
			}
			
		})
	</script>
</html>

6、基础用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<p> {{ name }}</p>
			<p> {{ msg }}</p>
			<p>  {{like[0]}}</p>
			<p>  {{like[1]}}</p>
			<p>  {{like[like.length-1]}}</p>
			<p>  {{boyfrand}}</p>
			<p>  {{boyfrand.name}}</p>
			<p>  {{boyfrand.msg}}</p>
			<p>  {{boyfrand.like}}</p>
			<!-- v-for 指令 用于遍历对象集合
			 参数 o —— 代表遍历的每个对象
			 参数 i —— 该对象的下标
			  in  —— 指向要遍历的对象名
			 -->
			 <p v-for = "(o,i) in cars">{{i}} - {{o.name}} : {{o.color}}</p>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#d1",
			data:{
				name:"孙思宇",
				msg:"大学",
				like:["抽烟","喝酒","烫头"],
				boyfrand :{
					name:"老八",
					msg:"小学",
					like:["蹦迪","挨揍"]
				},
				cars:[
					{name:"兰博基尼",color:"屎黄色"},
					{name:"保时捷",color:"傻狗绿"},
					{name:"宝马",color:"智障蓝"}
				]
			}
		})
	</script>
</html>

7、基础用法2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<!-- 可以在vue中使用基础的运算 -->
			<div> {{ 2+3 }}</div>
			<div> {{ 2*3 }}</div>
			<div> {{ 2/3 }}</div>
			<div> {{ 2-3 }}</div>
			<!-- 可以代入三目表达式 -->
			<div> {{ age>18?'成年':'未成年'}}</div>
			<hr />
			<!-- 可以对字符串进行操作 拼接 ，调用方法 -->
			<div> {{ "abc"+2+3+"cde" }}</div>
			<div> {{ "123"+"123" }}</div>
			<div> {{ 122+3 +"123"}}</div>
			<div> {{ msg.length }}</div>
			<!-- substring S不能大写 -->
			<div> {{ msg.substring(2,6) }}</div>
			<div> {{  }}</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#d1",
			data:{
				age:20,
				msg:"红红火火恍恍惚惚"
			}
		})
	</script>
</html>

8、Vue常用指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1" >
			<div>
				<!-- Vue指令是带有 v- 前缀的特殊标识
				 指令用于在表达式上，对值的改变，将某些属性用在DOM上-->
				<p v-if="age>18">成年</p>
				<p v-else >未成年</p>
				<!-- if和else必须在上下一起使用
				 -->
				<span v-text='name'></span>
				<span v-html='html'></span>
				<!-- v-if  和 v-show 的区别
				 相同点：都可以动态的控制DOM元素的显示和隐藏
				 不同点：v-if 的显示和隐藏效果，是将整个DOM元素添加或删除，
				 v-show 的显示和隐藏是为DOM元素添加css样式display，设置none或block
				 DOM本身还是存在的。
				 v-if 有更高的切换开销，v-show有更高的初始渲染开销，
				 如果需要频繁的切换，使用v-show 比较好，如果运行条件很少改变，
				 使用v-if 比较好
				 -->
				<span v-show = "true">展示</span>
				<span v-show = "false">不展示</span>
				<br>
				<span v-show = "name=='孙思宇'">展示吧皮卡丘</span>
				<!-- shiy v-for 遍历时 （两个参数）
				 如果遍历的是数组 参数1是参数名，参数2是下标
				 如果遍历的是对象 参数1是属性值，参数2是属性名
				 -->
				<!-- shiy v-for 遍历时 （一个参数）
				 如果遍历的是数组 参数1是值
				 如果遍历的是对象 参数1是属性值
				 -->
				<p v-for="(v,k,i) in person">
					{{i}} - {{k}} - {{v}}
					<!-- i 下标  k 属性名  v 值 -->
				</p>
				
				<h3>v-bind 属性绑定（可简写）</h3>
				<!-- 当属性的值是变量而不是字符串时，通过v-bind进行表示，vue自行解析处理 -->
				<a v-bind:href="url">{{urlname}}</a>
				
				<!-- 简写 -->
				<a :href="url">{{urlname}}</a>
				
				<h3>v-on 事件绑定 （可简写）</h3>
				<button v-on:click = "click()">单击</button>
				<!-- 简写 -->
				<button @click = "click()">点击</button>
				<br>
				<button @dblclick = "say('芒果')">双击</button>
				
				<div v-on:mouseover="say('来了老弟')" style="border: 1px solid palegoldenrod">鼠标移入</div>
				
				<div v-on:mouseout="say('走了老弟')" style="border: 1px solid palegoldenrod">鼠标移出</div>
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#d1",
			data:{
				name:"孙思宇",
				age:2,
				html:"<font style='color:red'></font>",
				person :{
					name:"李四",
					age:30
				},
				hobbys :["篮球","唱跳","rap"],
				url:"https://hao.360.com/",
				urlname:"百度360" ,
				
			},
			methods:{
					click:function(){
						alert(1234);
					},
					say:function(food){
						alert("喜欢"+food);
					}
				}
		})
	</script>
</html>

9、ref引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<button @click="show()">打印日志</button>
			<input type="text" id="username" value="小明" ref = "name">
			<!-- Vue提供了一个操作DOM的属性ref,绑定在DOM元素上时，
			 用法和ID相似 ，可以通过this.$refs调用-->
			 <!-- $refs是所有注册过的ref的集合 ，想要获取其中的一个指定元素，
			  需要使用this.$refs.元素 来获取ref属性值-->
			 <h2 ref = "msg"> 哈哈哈哈</h2>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#d1",
			methods:{
				show :function(){
					//通过js获取元素
					// console.log(document.getElementById("username").value);
					
					//通过vue 获取元素 需要给元素设置 ref属性 再通过 $refs
					console.log(this.$refs.name.value);
					console.log(this.$refs.msg.innerText);
					
				}
			}
		})
	</script>
</html>

温酒09
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值