vue知识点(上）

最新推荐文章于 2024-04-29 14:36:43 发布

A Joker

最新推荐文章于 2024-04-29 14:36:43 发布

阅读量734

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45958304/article/details/109399460

版权

vue介绍

前端js框架
js框架：jQuery ……
MVVM模式  M		V		VM
		双向绑定
				视图和数据模型的双向绑定。
		渐进式框架
				逐步学习这个框架

数据

当vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式”系统。
html:

<div id="app">
		<input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
		el:"#app",
		data:{
				name:"名字"
		}
})

name的变化会影响到input的值
input中输入的值，也会导致vm中的name发生改变

方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
html：

<div id="app">
		<button v-on:click="add">点我</button>
</div>

js:

var vm = new Vue({
	el:"#app",
	data:{
	},
	methods:{
			add:function(){
					console.log("点我了...233")
			}
		}
})

生命周期钩子

生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法（例如created：（）=>this.fetchTodos()).这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同，this.fetchTodos的行为未定义。

钩子函数

例如：created代表在vue实例创建后；
可以在Vue中定义一个created函数，代表这个时期的构造函数；
创建实例html页面如下：

var app = new Vue({
		el:"#app",
		data:{
				msg: " "
		},
		//钩子函数
		created(){
				//this表示vue实例
				this.msg = "hello vue. created.";
				console.log(this);
		}
)};

创建：
直接new Vue对象即可。
传入的参数（格式为json）
key的含义：
el：指定一个页面元素，受vue实例的管理，只有被vue实例管理的元素内部才能使用vue的语法。

data：定义vue实例中使用到的数据。本身就是一个json。

methods：定义vue实例的一些函数。

computed:计算属性，内部可以定义一系列的函数。函数的名称可以当成计算属性的key看待，函数的返回值即当前计算属性的值。通俗来说，计算属性就是把函数当成一个data中的数据来使用。只不过内部是经过一系列的逻辑计算出一个值。

watch:监控属性，可以指定一些方法，监控关心的值的变化。
1.监控简单数据
定义一个和监控的变量名称一致的函数即可。函数的参数为新值和旧值
例如：message（newValue，oldValue）；
2.监控对象中的数据——深度监控
定义一个和监控的对象名称一致的属性，值是一个json。内部设置deep属性为true代表深度监控开启。回调函数为handler，会传过来新的对象
例如：
watch：{
person：{
//开启深度监控；监控对象中的属性值变化。
deep：true，
//可以获取到最新的对象属性数据
handler（obj）{
console.log("name = " + obj.name + “;age=” +obj.age);
}

钩子函数会在vue实例的各个生命周期阶段自动调用：具体有：beforeCreate，created，beforeMount，mounted，updated，beforeUpdate，destroyed，beforeDestroy。
created钩子函数常用场景：用于初始化数据。

钩子函数不要使用箭头函数的方式编写。

插值、v-text和v-html

插值可以使用在有需要显示vue实例数据的地方，可以在插值表达式中调用实例的数据属性和函数。
v-text和v-html的作用：可以将数据在模板中进行显示；
区别：v-html会对内容中出现的html标签进行渲染，而v-text会将内容当作普通文本输出到元素里面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuejs测试</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  v-text:<span v-text="msg"></span><br>
  v-html:<span v-html="msg"></span><br>
</div>
<script type="text/javascript">
  var app = new Vue({
  el:"#app",
  data:{
     msg: "<h2>hello,vue</h2>"
  }
  });
  
</script>
</body>
</html>

运行结果：
在这里插入图片描述

v-model的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuejs测试</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="checkbox" value="Java" v-model="language">Java<br>
	<input type="checkbox" value="Python" v-model="language">Python<br>
	<input type="checkbox" value="Swift" v-model="language">Swift<br>
	<h2>
		你选择了：{{language.join(",")}}
	</h2>
</div>
<script type="text/javascript">
  var app = new Vue({
  el:"#app",
  data:{
     language:[]
  	}
  });
  
</script>
</body>
</html>

运行结果：
在这里插入图片描述

用于数据和视图的双向绑定。一般用在表单项或者组件之上。

v-on的使用

v-on指令用于给页面元素绑定事件。
v-on：事件名=“js片段或函数名”
简写语法：
@事件名=“js片段或函数名”
例：
v-on：click=‘add’ 可以简写为@click=‘add’

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuejs测试</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<!--直接写js片段-->
	<button @click="num++">增加</button>
	<!--使用函数名，该函数必须要在vue实例中定义
	也可写成num--。-->
	<button @click="decrement">减少</button>
	<h2>
		num = {{num}}
	</h2>
</div>
<script type="text/javascript">
	let app = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			decrement(){
				this.num--;
			}
		}
	});
  
</script>
</body>
</html>

运行结果：
在这里插入图片描述

事件修饰符

.stop：阻止事件冒泡
.prevent：阻止默认事件发生
（阻止浏览器默认的一些事件行为。）
.capture：使用事件捕获模式
（相当于是和冒泡相反，父元素先于子元素获取事件）
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次
写到事件绑定之后，给当前事件添加额外的修饰以达成某个功能。

默认情况下，我们在某个页面元素上触发的事件，在当前元素处理完之后会自动传递给父元素。父元素也会触发该事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuejs测试</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<!--直接写js片段-->
	<button @click="num++">增加</button>
	<!--使用函数名，该函数必须要在vue实例中定义-->
	<button @click="num--">减少</button>
	<h2>
		num = {{num}}
	</h2>
	<hr>
	事件冒泡测试:<br>
	<div style="background-color: lightblue;width: 100px;height: 100px"
		 @click="print('你点击了div')">
		<button @click.stop="print('点击了button')">点我试试</button>
	
	</div>
	<br>阻止默认事件：<br>
	<a href="http://www.itcast.cn" @click.prevent="print('点击超链接')">传智播客</a>
	
	
</div>
<script type="text/javascript">
	let app = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			decrement(){
				this.num--;
			}
		}
	});
  
</script>
</body>
</html>

运行结果：
在这里插入图片描述

指令v-for使用

用于遍历数组（集合）或json对象，v-for写到哪个元素上作为属性，那么哪个元素重复出现。
遍历数组或集合
v-for="(element, index) in array"
遍历json对象
v-for="(value, key, index) in jsonObject"

:key="当前元素的唯一标志"
用于指定一个唯一的标识，让vue展示数据时复用性更好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuejs测试</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="(user,index) in users"  :key="index">
			{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
		</li>
	</ul>
	<hr>
	<ul>
		<li v-for="(value,key,index) in person">
			{{index}}--{{key}}--{{value}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			users:[
				{"name":"小明","age":12,"gender":"男"},
				{"name":"小红","age":13,"gender":"女"},
				{"name":"小黑","age":12,"gender":"男"}
		 ],
		person:{"name":"小白","age":13,"gender":"男","address":"中国"}
		}
	});
  
</script>
</body>
</html>