回顾

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
指令:
<标签  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

vue中指令的简写

v-on:事件=""   --->@事件=""
v-bind:原属性=""  ---->:原属性=“”

vue中引入本地图片

情况1：网络图和本地写死的图：
情况2：本地写活的图：require关键词
export default {data(){return{src:require("../../assets/logo.png")}}
}

demo，点击按钮切换图片

方法1：三元表达式

方法2：v-if （推荐）

css

全局样式

会影响所有组件：内部：直接在style中编辑 外部：在style中通过 @impot ‘路径’; 引入即可

局部样式

只会影响当前组件：内部： 在style标签中添加scoped外部： 在style标签中添加scoped ，编写src属性

全局样式的优先级

父组件 优先级  >  子组件

动态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

传统方式：

 按钮test(e){//获取当前标签对象console.log( e.target);},

简写：前置（如果没有其他参数传递时）

注意：函数后不能有()

按钮test(e){//第一个参数就能直接代表event对象//获取当前标签对象console.log( e.target);},

5 绑定多个事件

前置：

methods:{f1(){console.log("f1");},f2(){console.log("f2");}}

方式1

方式2：(面试题)

Father

# 回顾 阻止冒泡和阻止默认阻止冒泡冒泡：按照由内到外的顺序依次触发方法

阻止默认

默认：元素的默认行为(a标签默认行为能够做跳转)

 跳转function f2(){alert("ok")//阻止默认event.preventDefault()}

修饰符

作用：简化代码
语法：
<标签   @事件.修饰符=""

1 事件修饰符

阻止冒泡和默认
.stop
.prevent

Demo:

    跳转

2 按键修饰符

必须用到指定的按键后才触发

.enter    用的最多
.tab
.space
.up
.down
.left
.right

demo

3 系统修饰符

必须用到指定的按键后才触发，需要搭配按键修饰符

.ctrl
.shift
.alt

Demo:

v-for

1 遍历Array

 
学号
姓名
年龄
性别
爱好
{{item.id}}--下标:{{index}}
{{item.name}}
{{item.age}}
{{item.gender==1?'男':'女'}}
{{item.hobby.join()}}
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"}{{k}}:{{v}}

3 遍历Number

  data() {return {      n:9{{item}}--{{index}}

4 遍历String

data() {return {name:"abcadwad"};{{item}}--{{index}}

补充

vue提供了一个标签,作用就是不会渲染到页面中

我们可以使用template标签包裹多个元素，把指令放在该标签上，这样做可以避免产生无意义的标签

         --->会多一层div，dom层级变得更加复杂---》页面加载速度受到影响aabbcc

v-for和v-if的连用

优先级：

如果v-for和v-if同时放在一个标签，则程序能够正常渲染，但是会提示报错（vue不推荐两个放在一堆）
也说明了v-for优先级>v-if

渲染出年龄<=20的学生

ref和refs

ref

作用：可以给任意标签设置标记 
语法：<标签  ref="标记名"  

refs: 获取的原生的js对象

this.refs.标记名 获取对应的标签对象（节点对象）

key和v-if的搭配

作用：强制让v-if渲染清除节点的功能生效，避免vue的优化

需求：点击按钮切换文本框和密码框(强制让节点生产和删除)

切换data() {return {isb: true,};methods: {change() {this.isb=!this.isb},},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！