关于javascript:想成为一名程序员这些Vue知识你必须知道

当你初识 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')