vue基础

vue

vue简介

vue是一个MVVM框架，Model-View-ViewModel 是一个MVC的前端版本
ViewModel 是一个控制器的角色，在他里面实现逻辑运算等，这样就可以把 Model层和View层高度分离
View：视图，用于封装和展示数据以及效果，其实就是html结构
Model：数据模型，用来封装数据以及数据运行的业务逻辑

使用vue的步骤

1.通过script 引入vue文件
2.可以通过 vue-cli 创建vue项目，进行开发

外部引入vue步骤

1.解构出来一个创建应用的方法

const {createApp} =Vue;

2.// //创建应用

let app = createApp({
	//设置数据
    data(){
        return {
            str:'wbg加油'
        }
    }
});

3.挂载,把应用装载、绑定、挂载到 id=app的div上

app.mount('#app');

模块引入vue

<script type="module">
    import { createApp } from './js/vue.esm-browser.js';//from后是引入模块地址
    createApp({
        data(){
            return {
                str:'从此君王不早朝',
                style:{
                    height:'200px',
                    width:'200px',
                    background:'#04beff',
                },
                className:'abc',
            };
        }
    }).mount('#app')
</script>

注意：
data函数中存放当前页面中所有的数据，如果需要声明数据，必须声明在data中
data是一个方法，他的返回值是一个对象，data必须有返回值，否则报错
在vue实例中获取data中的数据直接使用 this.属性名

插值表达式

{{}}：插值表达式，在他的里面可以执行 vue变量，表达式，也可以执行函数
插值表达式实际上是一个js的域，在插值表达式中可以执行简单的js语句，并且把执行结果返回到插值表达式所在的dom结构的位置上
也可以使用指令 v-html 、v-text 绑定数据
插值表达式的缺点：初次加载的时候文本的闪烁
解决方法
1.把vue文件引入到head中，不建议使用
2.使用指令 v-cloak 来隐藏数据没有加载完成的dom结构，这样可以解决也买你开始时候的闪烁问题。该指令的运行方式是，首先隐藏没有编译成功的dom结构，等到dom结构编译成功之后，会自动把隐藏的方式去掉。

属性绑定

在vue中，{{}} 不能直接绑定属性的值
可以使用 v-bind 来绑定属性
语法是
v-bind:属性名 = ‘属性值/变量名’

简写方式：
:属性名 = ‘属性值/变量名’

<div id="app">
        <a v-bind:href="'http://www.weibo.com'">微博</a>
        <a v-bind:href="url">新浪</a>
        <a :href="url">微博简写</a>
</div>

<script src="./js/vue.js"></script>
<script>
const { createApp } = Vue;
createApp({
    data(){
        return{
            url:'http://www.weibo.com'
        }
    }
}).mount('#app');
</script>

绑定style和class

1.绑定style

<h2 :style="{ color:'#04beff',fontSize:'30px' }">{{ str }}</h2>
<div :style="style"></div>
<div :style="'font-size:20px;color:#f00'">多行不义必自毙</div>
<div :style="[ {color:'#f60'},{fontSize:'20px'} ]">多行不义必自毙</div>

2.绑定class

使用数组形式绑定class

<div :class="[ 'abc','aa' ]">韩愈</div>

使用对象形式绑定class，属性名为class名，属性的值是一个boolean值，如果布尔值为true，则绑定该clas名，否则不绑定

<div :class="{ 'abc':3>4,'aa':3<4 }">苏轼</div>

3.总结：style和clas的绑定都支持数组形式和对象形式

事件绑定

绑定事件使用
v-on:事件名=“表达式/方法名”
方法名的参数问题，如果没有参数，可以不用加()

<button v-on:click="num++">点击++</button>
<button v-on:click="show('乱世英雄')">点击显示</button>

事件绑定指令的简写
@事件名=“表达式/方法名”

<button @click="show('梦')">点击显示</button>
<button @click="()=>show('梦')">点击显示</button>
<button @click="num++">点击显示或这隐藏元素</button>

事件的修饰符

vue 提供了时间修饰符，用来提高开发效率
@事件名.修饰符.修饰符.修饰符… = 触发方法

stop 阻止事件冒泡
prevent 阻止默认事件
once 只执行一次
self 当 event.target 是当前绑定元素的时候触发
capture 事件捕获的时候触发
passive 触发滚动事件的默认行为

<div class="wp" @click.self="showInfo">
<div class="cont" @click.stop.once="showMsg" @contextmenu.prevent="showMsg"></div>

按键修饰符

按键修饰符,当按下或者抬起对应修饰符的按键时触发事件

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
.exact 非系统键
使用方法

<input type="text" value="" @keyup.enter="show" /> 
<textarea name="" id="" cols="30" rows="10" @keyup.ctrl="show"></textarea>
<!-- 非系统键 -->
<input type="text" @keyup.exact="show">

数据双向绑定 v-model

在表单元素中，使用 v-model 实现数据的双向绑定
双向绑定：简言之就是数据在视图层的更改会立即体现在model层，反之，model层的改变也会立即体现在视图层

<input type="text" v-model="val2">
<p>{{val2}}</p>
<button @click="show">点击显示</button>

设置单选框的 v-model

<label for="">性别</label>
<label for=""><input type="radio" name="sex" v-model="sex" value="男"></label>
<label for=""><input type="radio" name="sex" v-model="sex" value="女"></label>
<button @click="showSex">点击显示性别</button>

设置复选框的 v-model
复选框中的 v-model 的值是一个数组，该数组存储复选框选中的内容

<label>英雄</label>
<label> <input type="checkbox" name="" id="" v-model="hero" value="戚继光">戚继光 </label>
<label> <input type="checkbox" name="" id="" v-model="hero" value="岳飞">岳飞 </label>
<label> <input type="checkbox" name="" id="" v-model="hero" value="雷锋">雷锋 </label>
<label> <input type="checkbox" name="" id="" v-model="hero" value="黄继光">黄继光 </label>
<label> <input type="checkbox" name="" id="" v-model="hero" value="左宗棠">左宗棠 </label>
<label> <input type="checkbox" name="" id="" v-model="hero" value="李如松">李如松 </label>
<button @click="showHero">复选框选中的值</button>

v-model 修饰符

number 修饰符,把输入框中的内容转化为数字

 <input type="text" v-model.number="num">

trim 修饰符，去掉输入内容左右两边的空格

<input type="text" v-model.trim="num">

lazy 修饰符，把input事件改为change事件

<input type="text" v-model.lazy="str">

常用指令v-if和v-show

v-show

v-show 指令，如果他的值是true，则他所绑定的元素显示，如果为false，他所绑定的元素会自动添加一个display:none，元素隐藏，v-show改变的是css样式，属于元素重绘.

<div class="wp" v-show="bol">show</div>
<button @click="show">点击显示或者隐藏</button>

v-if

v-if 指令，如果他的值是true，则他所绑定的元素会在dom树对应的位置渲染，若果为false，他所绑定的元素会在dom树中删除，v-if 改变的是dom树的结构，属于元素重排.

<div class="wp" v-if="bol">if</div>
<button @click="show">点击显示或者隐藏</button>

v-else 和 v-else-if

v-else 需要结合 v-if使用，用法同js的if - else
v-else-if 需要结合 v-if使用，用法同js的if - elseif

<div v-if="num%2==0">螺蛳粉{{num}}</div>
<div v-else-if="num%3==0">麻辣烫{{num}}</div>
<div v-else>火鸡面{{num}}</div>
<button @click="num++">点击++</button>

v-for 循环

语法：
v-for=“形参 in 数组/对象”
如果需要下标或者对象的属性名
v-for=“(形参,下标形参/属性名形参) in 数组/对象”
注意：
使用v-for 的标签，都需要绑定一个key属性，属性的值一般都是要循环对象中的唯一值(例如id),使用key属性的目的是使已经渲染过的列表内容不在重新渲染，提高列表的渲染效率，注意 index 虽然可以设置key值，但是由于index值会发生变化，这样会导致列表重新渲染，因此慎用
另外，v-for 结合 template 标签(组件) 循环数据
template 不会被渲染到页面上，一般用来实现数据绑定的功能
使用案例

<ul>
    <li v-for="(item,index) in arr" :key="index" @click="showAlert(item.name)">
    	<span>{{index}}-{{item.name}}:{{item.nickname}}</span>
 	 </li>
</ul>
<p v-for="(value,key) in obj">{{key}}:{{value}}</p>
<template v-for="item in arr" :key="item.name">
	<p>{{item.name}}</p>
</template>
<!-- 循环数字，一般都是整数，每一个整数是一个循环的项 -->
<p v-for="n in 10">{{n}}</p>
<!-- 循环字符串，每一个字符是一个循环的项 -->
<p v-for="t in str">{{t}}</p>

其他内置指令

v-pre 他所绑定的元素不进行vue编译，原样输出

        <p v-pre>{{str}}</p>

v-once 他所绑定的元素只渲染一次，忽略之后所有的更新

<p v-once>{{num}}</p>
<p>{{num}}</p>
<button @click="num++"> 点击++</button>

v-memo 实现组件内容的缓存，如果他的值不发生改变，那么他所绑定的元素内部不会根据数据的改变而重新渲染

<div v-memo="arr">
	<h1>{{str}}</h1>
 </div>
<button @click="change1">点击改变数组</button>

vue属性

data（数据）

methods（方法）

computed（计算属性）

如通在插值表达式中直接渲染数据，非常方便，但是如果有比较复杂的逻辑运算，插值表达式的渲染效率就会受到影响，并且不利于后期维护，因此可以把比较复杂的运算逻辑放到计算属性中

computed:{
	changeStr(){
	 	return this.str.split('').reverse().join('');
	},
}

注意：
每一个计算属性，实质上都包含get和set两个方法，默认是get方法
在计算属性的get方法中，不要异步请求数据(ajax)或者操作dom
给计算属性设置值的时候执行的是set方法
从计算属性获取值的时候执行的是get方法

computed:{
	text:{
		get(){
			return this.txt + '-林黛玉';
		},
 		set(val){
			console.log(val);
			this.txt = val;
 		},
	},
}

计算属性的优点：

数据没有发生变化的时候，优先读取缓存在 computed 中经过逻辑运算操作的数据，把数据渲染在dom树中，并且不用空滤methods和watch中数据的变化
计算属性值会基于其响应式依赖被缓存
他有get方法和set方法，可以进行灵活设置
get 在获取的时候被触发，如果没有set则默认是get
set 在数据设置的时候被触发

watch （侦听器）

如果需要根据数据的变化来执行操作，可以使用数据侦听器
书写侦听器的方法:
方法名就是侦听器侦听data数据中数据的属性名，该方法具有两个参数
第一个参数是数据当前的值(新值),第二个参数是数据变化之前的值(老值)

watch:{
	num(newVal,oldVal){
		console.log(newVal,oldVal);
		}
}

设置侦听器的深度监听:

watch:{
	obj:{
		//设置监听的回调方法
		handler(newVal,oldVal){
 			console.log(newVal,oldVal);
		},
		//设置深度监听
 		deep:true,
		//设置加载立即监听
 		immediate:true,
	},
}

监听对象中某一个属性的变化:
可以通过此方法，直接监听路由对象的变化

data() {
	return {
		obj:{
			name:'包拯',
		}
	}
}
watch:{
	'obj.name':{
		 handler(newVal,oldVal){
			console.log('监听名字变化');
			console.log(newVal,oldVal);
		},
 	},
	'obj.name'(newVal,oldVal){
 		console.log('监听名字变化');
 		console.log(newVal,oldVal);
 	},
}

后续更新

标签：vue,data,修饰符,基础,绑定,数据,属性
From： https://blog.csdn.net/jxl20010909/article/details/134631500

vue