這個能聯機打醉拳的遊戲“打骨折”了!!超值折扣優惠驚喜來襲!
目錄
- 概述
- 例項化引數
- 指令
概述
vue是一款漸進式JavaScript前端框架,三大mvvm框架 vue , react ,angular
官網
cn.vuejs.org
特點
- 簡單,上手方便
- 結合Angular指令與React元件思維
- 生態豐富(外掛多)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 讓表單的值與資料繫結在一起。他會根據空間型別自動選取正確的方法來更新元素
多選
{{checked}}
修飾符
.number 數字
.trim 移除兩端空白