vue基础

最新推荐文章于 2022-09-21 19:58:43 发布

六月绮

最新推荐文章于 2022-09-21 19:58:43 发布

阅读量363

点赞数

文章标签： vue.js 前端框架前端

本文链接：https://blog.csdn.net/weixin_43424900/article/details/121087540

版权

随着前端框架的崛起，前后端也是彻底的分离开来。目前，前端的三驾马车Vue、React、Angular，正带领着前端奋勇向前。

vue是一款渐进式javascript的前端框架，也是目前最简便，个人认为最好用的前端框架之一。vue是由我国人尤雨溪编制的，其官网为cn.vuejs.org，大家如果想学习关于vue的插件，也可以点击这个网址学习：https://github.com/opendigg/awesome-github-vue。

vue作为前端框架之首，结合了Angular指令与react组件思维，生态丰富（插件多）API文档完善，而且上手容易，相对于其他两个框架要简单很多。

接下来让我们简单的讲一下vue的基础。

首先，vue的实例化参数由以下几点，我已经为大家总结过了：

1.其中的从computed，能够从现有的数据计算出新的数据，简单的代码段为：

computed：{
rmsg(){
  return this.msg.split('').reverse().join('')
}
}

这里我为大家写了一个简单的从现有数据计算新数据的程序，大家可以参考一下，理解computed的用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>计算：从现有数据计算新的数据</h1>
			<p>n1:{{n1}} <input type="text" v-model.number="n1"></p>
			<p>n2:{{n2}}</p>
			<p>n3:{{n3}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					n1:10,
					n2:5,
				},
				computed:{
					//从现有数据计算新的数据
					"n3":function(){
						return this.n1+this.n2;
					}
				}
			})
		</script>
	</body>
</html>

基本可以实现以下功能：

2.值得一提的还有watch，监听。能够监听数据的变化，并执行回调函数handler；简单的代码段为：

watch:{
 "num":{
    handler(nval,oval){}.
    deep:true
}
}

以下是能够实现实时监听的程序代码，大家可以参考学习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span>{{person.age}}</span><input type="text" v-model="person.age">
			<span>{{num}}</span><input type="text" v-model="num">
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				watch:{
					"num":{
						//当num发生变化时，执行handler
						handler(nval,oval){
							console.log("数据由",oval,"变化为",nval);
							console.log("num变化了:",this.num);
						}
					},
					//引用类型监听
					"person":{
						handler(nval,oval){
							//引用类型nval和oval是一样的
							console.log("数据由",oval.age,"变化为",nval.age);
							console.log("person变化了:",this.person);
						},
						//深度监听
						deep:true,
					}
				},
				data:{
					person:{
						age:15
					},
					num:8
				},
			})
		</script>
	</body>
</html>

监听可以实现如图在input中输入的数字与表格外数字实时一致：

3.自定义指令，directives；

其中：bing 绑定执行一次，insert 插入执行一次，update 每更新执行一次；

简单的代码段为：

directives:{
  "v-focus":{
	update(el,binding){
	if(binding.value){el.focus()}
}	
}
}

我也为大家写了一段我自己敲出来的简单的自定义指令：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>自定义指令</h1>
			<p v-text="msg"></p>
			<!-- 实现的自动获取焦点的功能 -->
			<input type="text" v-focus="true">
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					msg:"你好vue"
				},
				directives:{
					"focus":{
						
						inserted(el,binding){
							console.log(el,binding);
							el.focus();
						}
						
					}
				}
			})
		</script>
	</body>
</html>

其中el 指令所在的节点，binding指令相关的数据binding.value，获取指令所在的节点，执行第三方基于dom的插件。

这是vue入门需要掌握的很重要的三个方法，这一期就讲到这里，我们下一期在更新新的vue基础知识，基础很重要，一定不要小瞧了这些看上去很简单的代码。

六月绮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础

随着前端框架的崛起，前后端也是彻底的分离开来。目前，前端的三驾马车Vue、React、Angular，正带领着前端奋勇向前。vue是一款渐进式javascript的前端框架，也是目前最简便，个人认为最好用的前端框架之一。vue是由我国人尤雨溪编制的，其官网为cn.vuejs.org，大家如果想学习关于vue的插件，也可以点击这个网址学习：https://github.com/opendigg/awesome-github-vue。vue作为前端框架之首，结合了Angular指令与react组件思维，
复制链接

扫一扫