目錄

• 概述
• 例項化引數
• 指令

概述

vue是一款漸進式JavaScript前端框架，三大mvvm框架 vue , react ,angular

官網

cn.vuejs.org

特點

1. 簡單，上手方便
2. 結合Angular指令與React元件思維
3. 生態豐富（外掛多）API文件完善

例項化引數

<div id="#app">
  {{msg}}
</div>

new Vue({ el:"#app", data:{ //指定資料 msg:1, }, methods:{ // 方法集合 }, computed:{ // 計算 }, watch:{ //監聽 "num":{ handler(nval,oval){ }, deep:true } }, directives:{ } })

指令

文字渲染

{{}}
v-text
v-html(渲染html文字)

屬性繫結

v-bind:屬性="指令的值"
<p v-bind:title="title">{{msg}}</p>
縮寫：:屬性="值"

條件渲染

條件指令 v-if

指令用於條件性地渲染一塊內容，這塊內容只會在指令的表示式返回 真 值的時候被渲染。

v-show指令

用於根據條件展示元素的選項是v-show指令
<h1 v-show="isShow">Hello!</h1>

v-show和v-if的區別

v-if隱藏時直接移除節點，v-show是通過css方式隱藏
頻繁切換用v-show，一次性切換用v-if

列表渲染

我們用v-for指令根據一組陣列的選項列表進行渲染。v-for指令需要使用 item in list 形式的特殊語法，list是源資料陣列

基本用法

事件指令

事件處理方法

v-on:事件型別="響應函式"
簡寫：@click="say()"
行內事件響應：@click="num++"

時間修飾符

.stop 阻止事件冒泡
.prevent 阻止預設事件
.once 只執行一次

按鍵修飾符

.up
.down
.left
.right
.delete
.enter
.space
.esc
.tab

表單繫結

v-model 讓表單的值與資料繫結在一起。他會根據空間型別自動選取正確的方法來更新元素
多選