想成为一名程序员？这些Vue知识你必须知道！

Mr侯_爱前端 - 2022-02-28 13:26:03

---

当你初识Vue时，这些你必须知道！1 Vue概述1.什么是Vue？

Vue就是构建用户界面的渐进式javascript框架，而Vue也和React以及Angular并称为前端三大框架。

2.Vue的安装

需要我们首先在Vue官网上下载Vue的js文件并引入。

<script src="vue.js">

3.实例化

模板

<div id=“app”></div>

创建app

const app = Vue.createApp({
   data(){ return {}}
})

挂载

app.mount("#app")

2 内置指令

在Vue中以 v- 开头的特殊属性，联系 html 模板与 javascript 数据模型就是内置指令

1.文本渲染

v-text

更新元素的 textContent ,更新部分的 textConten t时，需要使用 Mustache 插值

{{msg}}

只能写一行表达式,不能写复杂js,如if

v-html

输出真正的 HTML

2.属性渲染

v-bind:属性名=“值”

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
可简写为 :属性名=“值”

3.条件渲染

v-if

根据表达式的值的真假来插入/移除元素，在切换时元素及它的数据绑定 / 组件被销毁并重建 ; 如果元素是 <template>，将提取它的内容作为条件块 ; 当条件变化时该指令触发过渡效果 ; 当和 v-for 一起使用时，v-if 的优先级比 v-for 更高.
和v-if对应的还有

v-else-if
v-else
v-show

v-show 隐藏式css方式，v-if 隐藏式移除节点 ; 频繁切换用v-show，反之用v-if

4.列表渲染指令

v-for=“(item,index) in list” :key="item"

item 变量的当前数据 , index 当前的下标
key是给vue遍历的节点一个唯一的标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一.
遍历对象

v-for="(value,key) in obj"

范围

v-for="item in 5"

v-for与v-if用template

<template v-for="item in 10" >
   <p v-if="item%2===0">{{item}}</p>
</template>

3 Vue事件1.监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<button @click="counter++">{{counter}}</button>
<button v-on:click="counter--">{{counter}}</button>
Vue.createApp({
   data() {
      return {   counter: 1   }
    }
 }).mount('#app')

2.事件处理方法

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<button @click="greet">问候</button>
Vue.createApp({
   data(){return{name:'vue'}},
   methods: {       
     greet(event){
        alert('你好'+this.name)
      }     
   }  
}).mount('#app')

3.内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<button @click="say('你好')">问候你好</button>
<button @click="say('吃饭了没')">问候吃饭</button>
Vue.createApp({
    methods:{
        say(msg){alert(msg)}  
    }  
}).mount('#app')

Tags 标签

javascript前端vue.jscsshtml5

扩展阅读