v-cloak|v-text|v-html|v-bind:/:|v-on:/@
@click.stop|@click.prevent|@click.capture|@click.self|@click.once
v-model.lazy/.trim/.number
+=或者通過vue的watch監聽來處理watch:,'b':function(newval),...}
:class="['bold','red',flag?'active':'',,[bgcolor:ture]]"
:style="color:"red",'font-weight':200"
}--}
迴圈物件和陣列
v-if/v-show
this.array.some((item,i) => }) //del(id)
this.array.findindex(item => })
search(keywords)})}
msg.replace(/需要替換的字元/g,'替換後的字元')
return this.array.filter(item => })
vue.filter('msgfilter過濾器名稱'，function(data,放置多個引數){})//data管道中傳來的陣列，例如：}
|this.$refs.myh3.innertext/this.$refs.mylogin.msg獲取元件內的data值、this.$refs.mylogin.show()獲取元件內的方法
var_this=this;function()/() =>
vue-resource.js(axios.js)負責get、post、jsonp
vue.http.option.root="";//設定根目錄(**) | vue.http.options.emlatejson=true;//全域性預設post的傳送 | vue.http.headers.common["authorization"]="basic yx"
methods:else})},
postinfo(),).then(result=>),
jsonpinfo())}, }} 在created中ajax傳送請求
json.stringify(arr)物件/陣列轉字串，json.parse字串轉物件/陣列，localstorage只能儲存字串
動畫元素
動畫按鈕預設name是v
動畫元素
動畫按鈕更改預設類名v-*成my-*
animate.css動畫外掛程式
動畫元素
動畫按鈕animated可以放在動畫元素dom中
動畫元素
動畫按鈕duration入場和離場時候的時間單位毫秒
動畫鉤子函式
動畫按鈕
動畫元素
1、var com1=vue.extend();vue.component('mycom1',com1)
2、vue.component('mycom1',vue.extend())
3、 | vue.component('mydata',}, })|methods:}//template有且只能有唯一乙個根元素包裹//msg是父元件的data，props通過屬性傳值，唯讀//父元件傳值到子元件//show是父元件的方法@func傳遞方法,子元件使用$emit觸發呼叫
4、|vue.component('mycom3'),)
元件data使用
註冊註冊
找回|vue.component('login',)vue.component('reg',vue.component('zhao',)//comname在例項中定義好用來儲存元件名;transition元件切換動畫mode切換方式out-in先出**
hash前端路由（url後端路由）vue-router.js，鉤子函式vuerouter,router-link(預設tag=標籤a),router-view
顯示路由匹配的元件內容
var routerobj=new vuerouter(,//重定向 ,,,...]}],linkactiveclass:'myactive'//自定義.router-link-active類名})route//路由規則|$routerobj.query.id/name進行路由傳參|:id傳參$routerobj.params.id|children路由巢狀path前面不要帶/
var toper=,...var router=new vuerouter(}]})
nodejs環境下，執行npm i webpack -g（-g全域性安裝）安裝webpack 要打包的檔案.js 打包後儲存的.js//合併檔案，相容性hack
webpack.config.js配置檔案module.exports=，devserver:,plugins:[new webpack.hotmodulereplacementplugin()]//外掛程式配置}
webpack-dev-server 執行npm i webpack-dev-server -d（-d本地安裝），本地必須已經安裝了webpack| 實時生成的bundle.js位址託管在電腦記憶體中，位址在url的根目錄
package.json中的"scripts":
html--webpack-plugin|style-loader|css-loader|
beforecreate(),
created(),
beforemount(),
mounted(),
beforeupdate(),//執行互動中
updated(),//data(model層)->view(檢視層)
beforedestory(),
destoryed(),
watch://監聽data中的資料變化}
computed://計算屬性'c'不需要data定義，只要計算屬性中data的值改變，就觸發計算c}
filters:},//過濾器
directives:,inserted:function(el),updated:function(el)}'fontsize':function(el,binding)//簡寫預設支援binding+updated},//指令
components:,},//私有元件
router:routerobj,//路由或直接呼叫routerobj
})
vue2 學習筆記
2.安裝vue腳手架 用於建立vue專案的 進入專案檔案或者新建乙個檔案 npm install vue cli g 3.根據模板建立專案 vue init webpack dome 工程名稱 工程名字 工程名字不能用中文 備註 use eslint to lint your code n 是是否開...
vue2新人入門
預設對webpack，sass，npm有一定的了解。一些vue指令不會說，反正官方文件有，我也懶得抄。一 超級基礎部分 1.全域性安裝 npm install globall vue cli 已全域性安裝了的不必安裝 2.建立乙個基於webpack的模板專案 vue init webpack 你的專...
vue2原始碼 響應式處理（學習筆記） 2
index.html檔案 一下是手寫vue的js邏輯 檔案層層下去乙個個建就好了 import from init function vue options 擴充套件原型 initmixin vue export default vue import from state export functi...