Vue---我的学习笔记

最新推荐文章于 2023-03-30 08:33:18 发布

nubipan

最新推荐文章于 2023-03-30 08:33:18 发布

阅读量253

点赞数

分类专栏： Vue 文章标签： vue 前端框架vue

本文链接：https://blog.csdn.net/pannubi/article/details/103392311

版权

VUE学习笔记文章目录VUE学习笔记一、理解VUE的options对象二、VUE生命周期1.beforecreated：2.created：3.beforeMount：4.mounted：5.beforeUpdate：6.updated：7.beforeDestroy:8.destroyed：三、Vue模板四、模板语法 Mustache1.插值操作：2.绑定属性：3.计算属性：4.事件监听：5....

摘要由CSDN通过智能技术生成

VUE学习笔记

文章目录

VUE学习笔记

一、理解VUE的options对象

el： string 或HTMLElement
data： Object 或 Fuction 在组件当中 data必须是函数
methods： {[key:string]:function}
beforecreated：
created：
mounted：
computed：
components：
template:

二、VUE生命周期

在进行创建Vue对象前，每次进行一系列的初始化后，会进行回调函数处理操作，所有所需的初始步骤完成后在创建对象。事物从诞生到消亡的整个过程。VUE也有声明周期。

callHook(vm)函数进行回调函数 callHook也叫做钩子函数

一般进行一些网络请求的操作

1.beforecreated：

实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据。常用于初始化非响应式变量

2.created：

实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到 $e l 属性，$ ref属性内容为空数组常用于简单的ajax请求，页面的初始化

3.beforeMount：

在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数

4.mounted：

实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问常用于获取VNode信息和操作，ajax请求

5.beforeUpdate：

响应式数据更新时调用，发生在虚拟DOM打补丁之前适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

6.updated：

虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作避免在这个钩子函数中操作数据，可能陷入死循环

7.beforeDestroy:

实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例常用于销毁定时器、解绑全局事件、销毁插件对象等操作

8.destroyed：

实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

三、Vue模板

代码规范：缩进4个空格，前端一般缩进2个空格
CLI ->.editconfig 缩进两个空格

 	<div id="app">
 		{
    {message}}
 	</div>

 </body>

 <script>
 	const app = new Vue({
 		el:"#app",
 		data:{},
 		method:{},
 		beforeCreate:function(){}
     })
 </script>

四、模板语法 Mustache

1.插值操作：

{ {varname}}
{ {message}}
如果不允许改变可以在元素标签上添加 v-once指令。nce:该指令后面不需要跟任何表达式，该指令表示元素或组件只渲染一次，不会随着数据的改变而改变
v-html:
v-text:
v-pre:
{ {message}}
v-cloak:防止再解析html文件时，出现{ {message}}闪动的问题
```
[v-cloak]:{
		display:none;..
}
```

2.绑定属性：

v-bind：动态绑定元素的属性缩写是符号‘:’
v-bind:绑定class
1. :class=“key(class属性名):value”
2. 对象语法绑定样式 :class="{classname:boolean}" 对向形式可以传入多个键值对值普通class可以与动态绑定class共存
3. 如果过于复杂，可以将动态样式存放到methods中或者computed中
  
  methods:{
  
  classes:function(){
  
  return {active:this.A,line:this.L}
  
  }
  
  }
4. 数组语法 :class="[‘active’,‘line’]"
v-bind 动态绑定style
1. :style="{font-size: ‘50px’)}"
  
  属性值需要使用单引号包裹，否则会把value值当作变量来解析
  
  :style="{font-size: finalSize+‘px’}" finalSize是一个变量
2. 对象语法
  
  :style="{font-size: ‘50px’)}"
3. 数组语法
  
  :style="[baseStyles,paddingStyles]" 可以理解为是一个对象数组，数组语法用得比较少
  
  baseStyles={width:‘200px’}
4. 组件化开发时，动态绑定style比较有用

3.计算属性：

什么是计算属性：一些数据需要转化后在显示，或者需要将多个数据结合起来进行显示。
计算属性一般不设置setter方法,就是说computed作为一个只读属性

例子：将多个变量拼接后一起显示

computed:{
     
				//计算属性一般不设置setter方法,就是说computed作为一个只读属性
				fullName1:function(){
     
					return this.firstName+this.lastName
				},
				fullName:{
     
					get:function(){
     
						return this.firstName+this.lastName
					}
				}
			}

computed和methods的区别
1. computed 会检测data中变量是否发生变化，如果没有发生变化沿用上次的缓存结果，否则再次执行computed相关属性方法。
2. 而methods会每次都执行相关方法

4.事件监听：

v-on v-on:click="[function_name()]" @click="[fucntion_name()]"

代码(基本使用) 不传入参数时，下括号可以省略为了规范都加上小括号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<strong>{
       {
       counter}}</strong>
			<button @click="add">+</button>
			<button @click="sub">-</button>
		</div>
	</body>

	<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
	<script>
		const dApp  =new Vue({
       
			el:"#app",
			data:{
       
				counter:0,
			},
			methods:{
       
				add(){
       
					this.counter++
					if(this.counter > 10){
       
						this.counter = 10
					}
					return this.counter;
				},
				sub(){
       
					this.counter--
					if(this.counter < 0){
       
						this.counter = 0
					}
					return this.counter;
				}
			},
			computed:{
       }
		})
	</script>
</html>

传入参数小括号不能省略

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>{
       {
       result}}</p>
			<!-- //情况一 不许要任何参数时，会将原生事件event参数传递进来 -->
			<button @click="status_one()">status_one</button>
			<button @click="status_one_o">status_one_o</button>
			<button @click="status_two('传入参数:',$event)">status_two</button>
			<!

最低0.47元/天解锁文章

nubipan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---我的学习笔记

VUE学习笔记文章目录VUE学习笔记一、理解VUE的options对象二、VUE生命周期1.beforecreated：2.created：3.beforeMount：4.mounted：5.beforeUpdate：6.updated：7.beforeDestroy:8.destroyed：三、Vue模板四、模板语法 Mustache1.插值操作：2.绑定属性：3.计算属性：4.事件监听：5....
复制链接

扫一扫