字节跳动面试流程查询，Vue-2-基本介绍，大学生必备

console.log(“method1”)

return “method1”

},

method2(){

console.log(“method2”)

return “method2”

},

method3:()=>{

console.log(“method3”)

return “method3”

},

}

})

/网页输出为hello Vue.js method1 method2 method3/

Vue中的指令

==========================================================================

1. Vue中的指令都是以v-开头

2. 语法v-指令名称：参数.修饰符

文本指令

---

1. v-text

• 示例

new Vue({

el:‘#app’,

data:{

message:‘hello Vue.js’

}

})

• hello Vue.js
• {{message}}
  hello Vue.js

• 类似于原生中的innerText，普通文本会对里面的HTML标签进行解析，浏览器渲染的是文本格式数据

2. v-html

• 一个文本输入框

• 类似于原生JS中innerHTML会解析出来里面的HTML标签元素

条件渲染：满足条件的节点即显示，否则隐藏

---

1. v-show

2. v-if

3. v-else-if

4. v-else

5. v-show与v-if区别

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建

• v-if是惰性的，当初始条件为假时，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块

• v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

• v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销

• 当非常频繁切换时，用v-show,运行条件很少改变时，用v-if

6. 示例

<button @click=“status = !status”>显示与隐藏

v-show显示与隐藏

v-if显示与隐藏

列表渲染：通常是对数组进行遍历

---

1. v-for

2. 在进行列表渲染时，尽量为渲染的每一项绑定 key 属性

3. 不推荐v-if与v-for一起使用，如果一起使用注意他们的执行先后顺序

• vue2.x：v-for 的优先级高于 v-if

• vue3.x：v-if 的优先级高于 v-for

4. 实例

{{n}}-渲染内容

当前：{{item}}-索引：{{index}}

值：{{value}} -key:{{key}}- 索引：{{index}}

事件处理

---

1. v-on：可简写为 @

2. 在内联 JavaScript 语句中调用方法，当在事件处理程序调用时需要显式传递参数时，通常使用这种方式

属性绑定

---

1. v-bind：可简写为 :

2. 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式

3. 在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象

4. 在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型

5. 没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象

表单处理

---

1. v-model：双向绑定

2. 对于不同的表单事件

• text 和 textarea 元素使用 value property 和 input 事件；

• checkbox 和 radio 使用 checked property 和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件

3. v-model只是封装的语法糖，下面两种都都能实现双向绑定

{{message}}

<input type=“text” :value=“message” @input=“handleInput”>

/两个单向绑定拼成双向绑定/

{{message1}}

插槽

---

1. v-slot

2. 在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置，没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

3. 也就是先子组件那先占个位，等到父组件传递消息传过来时更改

4. 示例

//父组件

要渲染内容

//子组件

被覆盖的内容

其它

---

1. v-pre：跳过这个元素和它的子元素的编译过程，可以用来显示原始 Mustache 标签

• {{product}}

2. v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

3. v-once：一次

4. 示例：

{{product}}

{{product}}