vue的簡介
Vue是一套用於構建用戶界面的漸進式框架
Vue開發版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue生產版本(項目發布時使用)
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue的安裝
所謂的安裝就是把以上script標簽導入到我們的html中。
如果我們需要下載下來Vue.js文件，我們可以復制src標簽中的地址粘貼到瀏覽器，復制其中的內容，粘貼到我們新建的js文件當中，導入到html中就可以使用了
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="js/VUE-v2.6.10.js"></script> </html>
VUE入門
在Vue中所有代碼都是以鍵值對形式來體現的
el 元素
data 數據
給id為app的div加上內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue-v2.6.10.js" ></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: "#app", data: { message: "VUE學習之旅" } }); </script> </body> </html>
頁面顯示效果
VUE學習之旅
再{{ }}中可以進行數值運算（插值表達式）
事件
在vue事件后后可以拼接多個修飾符
click點擊事件
在javascript中我們定義一個函數在按鈕標簽中加入onclick為點擊事件
而在Vue中的點擊事件是v-on:后面是事件名click，雙引號中是我們的方法名
<button v-on:click="fun1"></button>
v-on: 可以縮寫為@click
如何定義一個方法？
在data大括號后面添加methods:{}，以后的方法都要寫到methods的大括號中
methods中可以定義任意個方法
new Vue({ el: "#app", data: { message: "VUE學習之旅" },
methods:{ fun1:function(){ alert("你點我") } } });
在方法中改變#app中message的值
方法必須在el是#app的Vue對象中
this 代表vue的對象
fun1:function(){ this.message = "HelloWord" }
按鍵事件
按鍵修飾符
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta（ndows鍵）
v-no:keyup當某個鍵按下時
event 事件源（某個鍵點擊）
注意：event和vue無關
event.keyCode 點擊某個鍵，對應的數值
<div id="app"> <input type="text" value="" @keyup.enter="fn1" /> </div>
var x=new Vue({ el:"#app", data:{ }, methods:{ fn1:function(){ alert(event.keyCode); } } })
事件修飾符
.stop
.prevent
.capture
.self
.once
在jQuery中我們取消a標簽點擊跳轉的事件的方式是直接在href屬性中加上
<a href="javascript:;" onclick="xxx"></a>
在vue中取消a標簽的跳轉事件是直接在點擊事件后加上.prevent 修飾符
<a href="http://www.baidu.com" @click.prevent="xxx" >跳轉到百度</a>
在vue中在父標簽中有點擊事件，並且子標簽也有點擊事件，當我們點擊子標簽時會觸發事件也會觸發父標簽中的事件 稱為：事件的傳播
處理方法我們需要在事件后加上.stop修飾符就可以了
<div id="app" @click="fn1" style="border:1px solid #FF0000;height: 50px;" > <a href="http://www.baidu.com" @click.prevent.stop="fn2(msg)" >跳轉到百度{{msg}}</a> </div>
var x=new Vue({ el:"#app", data:{ msg:"你好" }, methods:{ fn1:function(){ alert("被點擊了1.."); //event.preventDefault(); }, fn2:function(x){ alert("被點擊了2.."+x); //event.stopPropagation(); } } })
v-text和v-html的事件綁定
在vue中定義屬性msg，屬性值為"我是一條消息<a href='http://www.baidu.com'>點我去百度</a>"
var x=new Vue({ el:"#app", data:{ msg:"我是一條消息<a href='http://www.baidu.com'>點我去百度</a>" } })
在頁面p標簽中分別綁定 v-html 和 v-text
<div id="app" > <p >{{msg}}</p> <p v-html="msg"></p> <p v-text="msg"></p> </div>
v-html的效果為
v-text的效果為
v-bind屬性綁定
在vue給標簽添加屬性我們使用v-bind，例如：給屬性添加title、color屬性
var x=new Vue({ el:"#app", data:{ product:{pname:"小米手機紅色版",color:'green',title:"放上來看看.啊實打實多噶好幾十個..."} } })
給p標簽添加我們js代碼中的green顏色 添加標題為"放上來看看.啊實打實多噶好幾十個..."
<p v-bind:title="product.title" >{{product.pname}}</p>
<p><font v-bind:color="product.color">就是這個顏色</font></p>
vue中v-bind是可以省略不寫的
<p :title="product.title" >{{product.pname}}</p>
<p><font :color="product.color">就是這個顏色</font></p>
v-model數據雙向綁定
在頁面文本框中值發生改變時，那么vue中js代碼中的屬性也會跟着改變
在vue中js代碼中的屬性發生改變時，那么頁面文本框的值也會改變
<div id="app" > 用戶名:<input type="text" v-model:value="user1.username" /><br /> 密碼:<input type="text" v-model:value="user1.password" /><br /> <input type="button" value="點我是不是雙向綁定" @click="fn" /> </div>
new Vue({ el:"#app", data:{ user1:{username:"小明",age:18,password:123} }, methods:{ fn:function(){ alert(this.user1.username); this.user1.username="哈哈哈" } } })
vue中的v-for循環
當我們需要讓json字符串、一個對象或者一個數據進行循環顯示到頁面，我們在vue中使用v-for
new Vue({ el:"#app", data:{ users:[ {username:"小明",age:18,password:123123}, {username:"小紅",age:18,password:1231231}, {username:"小綠",age:20,password:1231} ], names:["大郎","次郎","蓮蓮"], user:{username:"小明",age:18,password:123123} } })
在標簽中直接使用 v-for="變量名 in 數組名"
如果需要在頁面顯示索引，那么我們需要在設置變量名時再定義一個，但是要用小括號括起來
v-for="(變量名,變量名) in 數組名" 第二個變量名代表索引
注意：如果循環的時對象，那么索引就是對象中的屬性名
<div id="app"> <table border="1px" cellspacing="0px" align="center" width="70%"> <thead> <th>名字</th> <th>年齡</th> <th>密碼 </th> </thead> <tbody> <tr v-for="(user,index) in users"> <td>{{user.username}}--{{index}}</td> <td>{{user.age}}</td> <td>{{user.password}}</td> </tr> </tbody> </table> <p v-for="(name,index) in names">{{name}}---{{index}}</p> <p v-for="(prop,xyz) in user">{{prop}}--{{xyz}}</p> </div>
v-if 和 v-show判斷
功能幾乎相同為true時顯示，為false時隱藏
我們用開發者工具查看時，v-if 為false時相當於刪除了標簽 ，而v-show只是隱藏了
<div id="app" > <div v-if="flag" >{{user1.username}}</div> <div v-show="flag">{{user1.username}}</div> <input type="button" value="點我切換" @click="fn1" /> </div>
var x=new Vue({ el:"#app", data:{ user1:{username:"小明",age:18,password:123}, flag:true }, methods:{ fn1:function(){ this.flag=!this.flag; } } })
vue生命周期
beforeCreate 創建vue實例前
created 創建vue實例后
beforeMount 掛載到dom前
mounted 掛載到dom后
beforeUpdate 數據變化更新前
updated 數據變化更新后
beforeDestroy vue實例銷毀前
destroyed vue實例銷毀后
我們使用的只有created在掛載之前，我們需要拿到后端響應給我們的數據
new Vue({ el:"#app", data:{ msg:"初始值" }, created:function(){ //發送ajax請求 } })