Vue基础知识总结

最新推荐文章于 2022-09-14 11:14:31 发布

Firework梦魇

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量173

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Fireworkmeng/article/details/121086789

版权

小伙伴们大家好，最近呢我又学了亿丢丢vue，于是我就迫不及待的来总结一番啦！当然由于学的还只是vue的冰山一角，所以我就做个基础知识的总结吧！

Vue概述

提到vue就不得不提到它的特点了，它是由Angular和react两个的优点结合而成的，是一款渐进式javascript前端框架，作者就是我们华人的骄傲尤雨溪想了解他的详细资料请点下面链接：https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin
vue的特点也有很多，比如简单，上手方便，结合Angular指令与react思维，生态丰富（插件多）ApI文档完善下面是vue的插件https://cn.vuejs.org/

实例化参数(new Vue)

el选择目标标签

如果你想要对某个标签使用vue或者对多个标签使用vue就必须选择它们的父元素，建议在html外包含一个大的div，例如：

<script src="vue.js"><script>
<div id="app">
	<p></p>
	<p></p>
	<p></p>
</div>
<script type="text/javascript">
	new Vue({
		el:"#app",
		})
</script>

data指定数据

里面所放的值是变量是可以根据操作随时更改的值，当然还有一些别的操作比如样式之类的也可以，示例如下：

<script src="vue.js"></script>
<body>
  <div id="app">
		<p>n1:{{n1}}</p>
		<p>n2:{{n2}}</p>
		<p>n3:{{n3}}</p>
   </div>
  <script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			n1:5,
			n2:10,
            n2:15,
			},
		})
  </script>
</body>

methods定义事件

在这里面你可以写你可执行的所有方法，还是比较遵循js的写法

<div id="app">
   <button @click="num++":disabled="num>=999">点击+1</button>
   <input type="text" v-model="num" @change="check()"/>
   <button @click="num--":disabled="num<=1">点击-1</button>
</div>
<script>
	 new Vue({
	   el:"#app",
	   data:{
			num:1,
		},
	   methods:{
		  check(){
			  if(isNaN(this.num)){this.num=1}
			  if(this.num>999){this.num=999}
			  if(this.num<1){this.num=1}
		},
     })
</script>

computed计算

计算就是根据现在的数据来计算出新的数据并返回，请看下列代码：

<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:5,
			n2:10,
	    },
		computed:{
			"n3":function(){
			     return this.n1+this.n2
			}
		}
})
</script>

watch监听

监听事件是可以监听数据的变化，并执行回调函数示例如下：

watch:{
"num":{
   handler(nval,oval){

        },
       deep:true
    }
}

num为监听的那个数据 oval是变化前的数据 nval为变化后的数据，deep：true是引用数据类型必加的，深度监听，不然无法监听到，基础数据类型则不需要

direcives自定义指令

自定义指令为你可以执行一些除vue不包含的方法都可以写在里面,有bind方法:绑定执行一次,insert方法：插入执行一次，update方法，每更新执行一次，现在我就拿update方法来示例一下：

 <input v-focus="flag">
 dirctives:{
    "v-focus":{
          update(el,binding){
          if(binding.value){el.focus()}
      }
}}

filers过滤|管道

主要用于格式化数据，对数据做些字符串操作来摘选字符串的某段数据处理并返回，简称过滤：

<div id="app">
   <p>{{num|fix}}</p>		
</div>
<script>
	new Vue({
		el:"#app",
	    data:{num:100},
		filters:{
	        fix(value,arg=2){
			return value.toFixed(arg)
		  },			
	 })
</script>

这样处理的优点就是十分方便，每个实例化参数都有自己的优点，搭配使用更加是效果翻倍

Vue指令

指令的值是可以是简单的javascript命令

文本渲染指令

文本渲染指令有是三个分别为：{{}}，v-text，v-html渲染html文本示例如下：

<div id="app">
    <p v-text="msg.repeat(3)"></p>
	<p v-text="msg2"></p><!-- 文本无法识别标签 -->
	<p v-html="msg2"></p>
</div>
<script>
  new Vue({
	el:"#app",
		data:{msg:"你好Vue!",
		  msg2:"<strong>中国</strong>是个好地方"
	  }
})
</script>

属性绑定

v-bind:属性=“指令值”或：属性=“值”

条件渲染

有v-if，v-else-if，v-else 方法频繁切换用v-show，一次性切换用v-if， v-show隐藏是通过css的方式隐藏节点，如下列所示：

<div id="app">
			<p v-if="isLog">欢迎回来我的伙伴，退出</p>
			<p v-else>登录，注册</p>
			<p v-bind:title="title">{{msg}}</p>
			<p :title="title">{{msg}}</p>
			<input type="text" v-model="title"/><br>
			<button v-bind:disabled="flag">按钮</button>
			<h1>v-if 与v-show的区别</h1>
			<p v-if="flag2">我是v-if控制</p>
			<p v-show="flag2">我是v-show控制</p>
			<h1>v-else-if</h1>
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>不及格：你是个🐂🐎吧</p>
			<input type="text" v-model="score"/>
</div>
<script type="text/javascript">
		new Vue({
			el:"#app",
			data(){
				return{
					msg:"你好Vue！",
					title:"看见我的人，一生平安！",
					flag:false,
					isLog:false,
					flag2:false,
					score:75
					}
				}
			})
</script>

列表渲染

当然条件渲染还有个更厉害的方法 v-for=“（item，index） in list” 类似于克隆的这么一个方式，list是要遍历的数组，item为当前遍历的项目，index为下标最好加上 :key值一般为index，但很多情况并不好用，建议使用其他方式为它增加 key作用主要为相当于id，有个辨识度如果一样的浏览器无法识别，两个就会互相影响，所以非常重要，如下列所示：

<div id="app">
	<p v-for="item in list">{{item}}</p>
	<p v-for="(item,index) in list">{{index+1}}-{{item}}</p>
	<!-- key优化vue的渲染（要求是唯一）推荐使用：key优化 -->
	<p v-for="(item,index) in list" :key="index">{{index+1}}-{{item}}</p>
	<h3  v-for="(item,index) in users" :key="item.name">
		姓名:{{item.name}},年龄:{{item.age}}
	</h3>
	<p v-for="item in 10">{{item}}</p>
</div>
<script type="text/javascript">
	new Vue({
	    el:"#app",
		data:{
			list:["vue","react","angular"],
			users:[
				{name:"小明",age:18},
				{name:"小刚",age:20},
				{name:"小飞",age:24}
				]
			}
	})
</script>

事件指令

事件指令和js的几乎大同小异，都是对鼠标或者键盘的操作来做出相对的反应和执行回调函数
v-on:事件类型=“响应函数” v-on:click="say()"就是事件指令的规范写法，当然还有一些事件修饰符
例如:.stop 阻止事件冒泡,.prevent 阻止默认事件,.once 只执行一次@click.stop.once.prevent="num++"事件的修饰符可以同时写多个
还有按键修饰符.up .down .left .right .delete .enter .space .esc这些都是与键盘按键相互照应的
还有事件对象：$evect 如下所示：

<div id="app">
	<button v-on:click="num++">{{num}}</button>
	<!-- @click是v-on:click的简写 -->
	<button @click="num+=5">{{num}}</button>
	<button @click="say(5)" >别说话,点我</button>
	<button @click="say(2)" >加2</button>
     <input
			type="text"
			v-model="num"
			@keyup.up="num++"
			@keyup.down="num--"
			@keyup.enter="list.unshift(num)"
			/>
	</div>
<script>
	new Vue({
		el:"#app",
		data:{
			num:1
			},
		methods:{
			say(n){
				//this当前new Vue出来的实例
				this.num+=n;//各自为营，点击第一个参数n=5，点击第二个参数n=2
				}
			}
		})
</script>