Vue 基本語法1
阿新 • • 發佈:2018-12-26
使用 1.例項化(new Vue) new Vue({ el:選擇器 //規定vue的作用範圍 data{ k1:資料1, k2:資料2, } }) 2.插值 文字插值: 1》在節點中插值{{key1}} v-once #這個資料是一次性的 2》v-text#插入文字 html插值: 1》v-html#插入html {}花括號問題: 在節點之間<h1></h1> 在節點內<h2 v-html="html"></h2>,不需要加花括號 3》屬性 v-屬性:"屬性值" -------------------------------------------------------- vue的指令 是帶有v-字首的特殊屬性:系統自帶的指令<div v-XXX> v-if v-else v-bind:href 完整寫法: 縮寫::href v-on:click v-on:keydown v-on:keyup.引數 v-on:keyup.37 ===>按鍵盤左鍵 事件: 冒泡 預設事件 完整寫法:v-on:click.prevent==>取消預設方法 縮寫:@click -------------------------------------------------- vue的計算屬性 {{}}內放入大量邏輯程式碼==》過量,難維護 解決辦法:計算屬性[computed] 基本寫法:預設走的get() computed:{ b:function(){}//只能獲取不能設定 } 完整寫法:computed:{ //計算屬性 c:{ //屬性物件 get:function(){ //獲取值 return this.a+2; }, set:function(val){ //設定值 this.a=val; } } } -------------------------------------------------- vue class 和style的繫結 class繫結: :class = "data資料中的值" :class="{bg:isActive}" <h1 :class="aaa">這是一個標題縮寫</h1> <h1 :class="{bg:isActive}">這是一個標題</h1> <h1 :class="{bg:true}">這是一個標題</h1> <style> .bg{ background-color: blue; } .fz{ font-size: 18px; } </style> <h1 :class="{bg:true ,fz:false}">物件形式</h1> 陣列寫法 <h1 :class="[bg1,fz1]">陣列寫法取data裡資料</h1> data:{ bg1:"bg", fz1:"fz" }, style繫結 物件寫法 :style="{background:bg,color:cl}" ===>bg和cl都是資料裡資料 陣列寫法 :style="[aaaa,bbbb]" data:{ aaaa:{background:"red"}, bbbb:{color:"blue"} } -------------------------------------------------------- 條件渲染 v-if v-else v-else-if v-show <div v-show="bool">11111</div> <button @click="show">按鈕</button> methods:{ show:function(){ if(this.bool){ this.bool=false }else{ this.bool=true } } } v-if和v-show區別 1》v-show 沒有v-else 2》v-show不支援template 3》v-show 只是做簡單的css切換 顯示隱藏的 -------------------------------------------------- vue 列表渲染 <li v-for="item in arr"> {{item}}</li> <li v-for="(item,index) in arr"> {{item}}===>{{index}}</li> ----------------------------------------------- vue事件處理器 1》監聽事件 v-on:click:事件名稱 @click:事件名稱 2》方法事件處理器(引數) @事件名稱=方法名稱(引數..) 3》事件修飾符 阻止冒泡;@click.stop 取消預設:@click.prevent 串聯:@click.prevent.stop || @keydown.enter.37 4》按鍵修飾符 @keyup.37 || @keydown.enter Vue.config.keyCodes.f1=112;//可以給f1 等單獨設定值 ----------------------------------------------------- vue表單控制元件繫結 1》v-model:資料的雙向繫結 v-model.trim去除空格 v-model.lazy相當於失去焦點值改變時觸發事件 --------------------------------------------------- vue 資料互動 1》jquery ==>$.ajax 2》js原生 :es6====>axios 3》vue===>resource GET :this.$http.get() POST:this.$http.post() JSONP:this.$http.jsonp() this.$http({ url:xxx }).then(function(){},function(){});//第一個funciton 表示成功後函式,第二個表示失敗後執行函式 $ bower install vue-resource ---->下載到開啟的當前目錄下 bower-components GET請求 this.$http.get("user/list",{ params:{ //傳遞的引數 act:1, userName:"張三" } }).then(function(res){//成功後執行函式 },function(err){ //失敗後執行函式 }) post請求 this.$http.post("user/list", { act:1, userName:"張三" }, {emulateJSON:true} ).then(function(){},function(){}) -------------------------------------------------------------------- vue 的生命週期 生命週期鉤子函式 1beforeCreate: 2.created: 3.beforeMount: 4.mounted 5.beforeUpdate 6.updated 7.beforeDestroy 8.destroyed -------------------------- vue自定義指令 v-zhangsan v-color 全域性: vue.directive(指令名稱,function(){}) 區域性: