[JavaScript知识库]Vue简介

前端三大框架

1.Vue

2.React

3.Angular

Vue安装

直接引用<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建应用实例

new Vue 函数创建一个新的应用实例

var vm = ?new Vue({

??????? el:"#app",//指定vue的模板css选择器

??????? data:{msg:"hello Vue!"}// 指定data数据

??? })

模板

<div id="app">

?? hello Vue!

</div>

文本渲染指令

1.{{}}

2.v-text

3.v-html

条件渲染器指令

1.v-if

2.v-else

3.v-else-if

4.v-show

面试题

v-if和v-show的区别

1.都是用来控制显示和隐藏

2.v-if通过dom操作来实现，v-show通过css来操作

3.频繁切换用v-show,反之用v-if.

• 遍历指令

  • v-for

    • 字符串 数字对象 列表进行遍历

    • <p v-for="(item,index) in list" v-key="item">{{item}}-{{index}}</p>

    • item 遍历的元素

    • index 遍历的下表

    • list被遍历的数组

  • v-bind:key

    • 值必须是唯一的

    • 为了让vue更好的优化渲染列表

属性绑定

事件

v-on:click=“num++”

事件指令

@click=“num++”

事件绑定简写

@click="sayNum"

默认传入事件对象

@click="sayNum(3)"

传入实参3

@click=“sayNum($event,3)”

传入事件对象和实参3

事件修饰符

.stop

阻止事件冒泡

.prevent

阻止默认事件

.once

只响应一次

表单

v-model=“num”

把num的数据和表单的值绑定到一起

表单修饰

.lazy .change事件触发更新数据

.number强制转换为数字

Vue操作

让指令链接数据和dom

业务操作数据 实现自动更新dom

computed计算

从现有数据计算出新的数据（只读）

watch监听

监听数据变化执行回调函数