回顾
vue 前端框架
框架特点:是一套完整的解决方案,功能多,排它性
vue特色:渐进式
vue核心思想: 组件化 , 数据驱动(基于响应式)
vue cli 4.5 下(2.x) 上(2.x/3.x)
vue create 项目名 (babel)
vue 底层集成了webpack
npm run serve 打包+开服
npm run build 打包
Demo.vue
<template>
<div id="demo">
{{k}}
</di>
</template>
<script>
export default{
components:{},
data(){
return {
//数据
}
}
}
</script>
<style>
#demo .xxx{
}
</style>
指令:
<标签 v-on:事件 v-if v-else v-else-if
事件简写: @事件=""
v-show
类似于v-if,用于元素的隐藏和显示
<标签 v-show="条件"
条件为true,显示,反之隐藏
面试题:
v-if和v-show的区别
v-show:
本质:通过css display来控制隐藏和显示
场景:频繁的切换隐藏和显示(只是改变css,性能消耗小)
页面加载速度:前提时一开始都隐藏,v-show的页面加载速度更慢(渲染节点)
v-if:
本质:通过是否渲染来控制隐藏和显示(类似于节点的删除和追加)
场景:不频繁的切换隐藏和显示(只是改变css,性能消耗小)
页面加载速度:前提时一开始都隐藏,v-if的页面加载速度更快(压根就没有渲染节点)
如果有根据权限判断是否显示某部分内容的需求,则使用v-if(因为v-show可以在浏览器调试器中通过css改变为block,从而显示不该显示的内容)
v-text、v-html
v-text类似于innerText (不支持标签)
v-html类似于innerHTM L (支持标签)
作用:用来设置标签体的内容
<标签>标签体</标签>
<标签 v-text/v-html=""></标签>
v-text、v-html、{{}} 的区别
只有 v-html 才支持标签
{{}}最灵活,用得最多
v-bind
作用:能够写活标签本身拥有的属性
<标签 v-bind:原属性=""
简写:
<标签 :原属性=""
demo
<template>
<div>
<font :color="color" v-bind:size="size" face="楷体">蜗牛</font>
<button @click="color='red'">变色</button>
<button @click="size=1">变size</button>
</div>
</template>
<script>
export default {
data(){
return{
color:"green",
size:7
}
}
}
</script>
<style>
</style>
vue中指令的简写
v-on:事件="" --->@事件=""
v-bind:原属性="" ---->:原属性=“”
vue中引入本地图片
情况1:网络图和本地写死的图:
<img src="" />
情况2:本地写活的图:require关键词
<img :src="src"/>
export default {
data(){
return{
src:require("../../assets/logo.png")
}
}
}
demo,点击按钮切换图片
方法1:三元表达式
<template>
<div>
<img :src="src"/>
<button @click="src=src==require('../../assets/a1.jpeg')?require('../../assets/logo.png'):require('../../assets/a1.jpeg')">点击切换</button>
</div>
</template>
<script>
export default {
data(){
return{
src:require("../../assets/logo.png")
}
}
}
</script>
<style>
</style>
方法2:v-if (推荐)
<template>
<div>
<img v-if="isb" src="../../assets/a1.jpeg"/>
<img v-else src="../../assets/logo.png"/>
<button @click="isb=!isb">切换</button>
</div>
</template>
<script>
export default {
data(){
return{
isb:true
}
}
}
</script>
css
全局样式
会影响所有组件:
内部:直接在style中编辑
<style>
h1{}
</style>
外部:在style中通过 @impot ‘路径’; 引入即可
<style>
@import './xxx1.css';
@import './xxx2.css';
</style>
局部样式
只会影响当前组件:
内部: 在style标签中添加scoped
外部: 在style标签中添加scoped ,编写src属性
<style scoped src="../style/a.css" > </style>
<style scoped src="../style/b.css" ></style>
全局样式的优先级
父组件 优先级 > 子组件
动态class和style
class:
<标签 :class="{选择器名1:boolean,.........}"
作用:动态设置class :如果boolean为真,则该标签拥有对应的样式
如果更改样式的地方比较多建议用class
style:
<标签 :style="{样式中的属性名1:值,.........}"
作用: 动态设置style
不常用的语法(了解)
:class="[]"
:style="[]"
函数和事件注册
1 基本使用
注册事件:
<标签 @事件="函数名"
函数的定义:
export default {
methods:{
函数(){}
}
2 this
this代表当前组件对象,可以通过this.属性 来获取data中定义的属性,this.方法来调用methods中定义的方法
3 传参
<标签 @事件="函数名(实参)"
export default {
methods:{
函数(形参){}
}
4 event
传统方式:
<button @click="test($event)">按钮</button>
test(e){
//获取当前标签对象
console.log( e.target);
},
简写:前置(如果没有其他参数传递时)
注意:函数后不能有()
<button @click="test">按钮</button>
test(e){//第一个参数就能直接代表event对象
//获取当前标签对象
console.log( e.target);
},
5 绑定多个事件
前置:
methods:{
f1(){
console.log("f1");
},
f2(){
console.log("f2");
}
}
方式1
<div class="d" @click="f1" @mouseover="f2"></div>
方式2:(面试题)
<div class="d" v-on="{click:f1,mouseover:f2}"></div>
Father
<div class="d" :style="{backgroundColor:arr[index]}" @click="change"></div>
</div>
# 回顾 阻止冒泡和阻止默认
阻止冒泡
冒泡:按照由内到外的顺序依次触发方法
<div id="f" onclick="f(event)">
<div id="s" onclick="f(event)"></div>
</div>
~~~
阻止默认
默认:元素的默认行为(a标签默认行为能够做跳转)
<a href="http://www.baidu.com" onclick="f2(event)">跳转</a>
function f2(){
alert("ok")
//阻止默认
event.preventDefault()
}
修饰符
作用:简化代码
语法:
<标签 @事件.修饰符=""
1 事件修饰符
阻止冒泡和默认
.stop
.prevent
Demo:
<div id="f" @click="f">
<div id="s" @click.stop="f"></div>
</div>
<a href="http://www.baidu.com" @click.prevent="f2">跳转</a>
2 按键修饰符
必须用到指定的按键后才触发
.enter 用的最多
.tab
.space
.up
.down
.left
.right
demo
<input type="text" @keyup.enter="f3">
3 系统修饰符
必须用到指定的按键后才触发,需要搭配按键修饰符
.ctrl
.shift
.alt
Demo:
<input type="text" @keyup.ctrl.enter="f3">
v-for
1 遍历Array
<table border="1">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in arr" :key="item.id">
<td>{{item.id}}--下标:{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender==1?'男':'女'}}</td>
<td>{{item.hobby.join()}}</td>
</tr>
</tbody>
</table>
data() {
return {
arr:[
{id:1,name:"张三",age:18,gender:1,hobby:["吃饭","睡觉"]},
{id:2,name:"张三",age:28,gender:1,hobby:["吃饭","睡觉"]},
{id:3,name:"王五",age:38,gender:0,hobby:["吃饭","睡觉"]},
{id:4,name:"赵六",age:48,gender:1,hobby:["吃饭","睡觉","打豆豆"]}
]
};
key
语法: :key="唯一标识" ,一般都是id(item._id)
作用:当给列表一个key属性后,vue就能够识别每一个元素,以后更改某个元素时,vue能做到局部渲染,而不是整个列表的渲染-----》提高性能
面试题:
v-for能够遍历哪些数据类型
Array
Object
Number
String
2 遍历Object
data() {
return {
user:{
username:"aaa",
password:"111"
}
<span v-for="(v,k) in user" :key="k">
{{k}}:{{v}}
</span>
3 遍历Number
data() {
return {
n:9
<span v-for="(item,index) in n" :key="item">
{{item}}--{{index}}
</span>
4 遍历String
data() {
return {
name:"abcadwad"
};
<span v-for="(item,index) in name" :key="index">
{{item}}--{{index}}
</span>
补充
vue提供了一个标签,作用就是不会渲染到页面中
我们可以使用template标签包裹多个元素,把指令放在该标签上,这样做可以避免产生无意义的标签
<template v-if="isb">
<span >aa</span>
<span >bb</span>
<span >cc</span>
</template>
<div v-if="isb"> --->会多一层div,dom层级变得更加复杂---》页面加载速度受到影响
<span >aa</span>
<span >bb</span>
<span >cc</span>
</div>
v-for和v-if的连用
优先级:
如果v-for和v-if同时放在一个标签,则程序能够正常渲染,但是会提示报错(vue不推荐两个放在一堆)
也说明了v-for优先级>v-if
渲染出年龄<=20的学生
<tr v-for="(item,index) in arr" :key="item.id">
<template v-if="item.age<=20">
<td>{{item.id}}--下标:{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender==1?'男':'女'}}</td>
<td>{{item.hobby.join()}}</td>
</template>
</tr>
ref和refs
ref
作用:可以给任意标签设置标记
语法:<标签 ref="标记名"
refs: 获取的原生的js对象
this.refs.标记名 获取对应的标签对象(节点对象)
key和v-if的搭配
作用:强制让v-if渲染清除节点的功能生效,避免vue的优化
需求:点击按钮切换文本框和密码框(强制让节点生产和删除)
<input type="text" v-if="isb" key="a"/>
<input type="password" v-else key="b"/>
<button @click="change">切换</button>
data() {
return {
isb: true,
};
methods: {
change() {
this.isb=!this.isb
},
},

被折叠的 条评论
为什么被折叠?



