VUE—从入门到飞起（二）
生活随笔
收集整理的這篇文章主要介紹了
VUE—从入门到飞起（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
過濾器filter
vue-resource發送http請求
axios發送http請求
VUE生命周期
VUE生命周期鉤子函數
自定義指令
watch
computed
VUE—從入門到飛起（一）
VUE—從入門到飛起（二）
VUE—從入門到飛起（三）
VUE—從入門到飛起（四）
VUE—從入門到飛起（五）
過濾器filter
<body><div id="app"><!--過濾器也可以在調用的時候傳遞多個參數--><!--過濾器也可以多次調用--><p>{{ msg | msgFormat('瘋狂'+1, '123') | test }}</p></div> </body> <script>//定義一個vue全局過濾器，msgFormatVue.filter('msgFormat', function(msg, arg, arg2) {//字符串的replace方法，第一個參數還可以寫正則return msg.replace(/單純/g, arg + arg2);});Vue.filter('test', function(msg) {//字符串的replace方法，第一個參數還可以寫正則return msg + '=====';});var vm = new Vue({el: "#app",data: {msg: "曾經，我也是一個單純的少年，我很單純"},methods: {}}) </script>vue-resource發送http請求
導入vue.js、vue-resource.js注意：vue-resource依賴vue，所以注意先后順序 <div id="app"><input type="button" @click="getData" value="get請求" /><input type="button" @click="postData" value="post請求" /><input type="button" @click="jsonpData" value="jsonp請求" /> </div> <script>function jsonFc(data){console.log("jsonp" + data);console.log(data.name);console.log(data.age);}var vm = new Vue({el:"#app",data:{},methods:{getData(){//發起get請求，通過.then來設置回調函數this.$http.get("http://127.0.0.1:3000/jsonpData").then(function(result){//成功回調console.log(result);},function(err){//失敗回調})},postData(){//post請求//手動發起的post請求默認沒有表單格式，有的服務器處理不了//通過post方法第三個參數，設置提交的內容為普通表單格式this.$http.post("/url", {}, {emulateJSON:true}).then(result=>{//成功回調console.log(result);},err=>{//失敗回調})},jsonpData(){//jsonpthis.$http.jsonp("http://127.0.0.1:3000/jsonpData").then(result=>{console.log(result);},err=>{})}}}) </script>axios發送http請求
注意導入vue.min.js和axios.min.js GET方式：axios.get('url').then(response => (this.info = response.data.sites)).catch(function (error) { // 請求失敗處理alert(error);});POST方式： axios.post('url',{rows : json }).then(function(resp){}).catch(function(e){//請求失敗處理 });post方式后臺獲取參數為null解決辦法： axios.post('url','keys=' + evictStr).then(function(resp){ console.log(resp); }).catch(function(e){});VUE生命周期
VUE生命周期鉤子函數
<div id="app"><input type="button" value="修改msg" @click="msg = 'no'" /><h3 id="h3">{{ msg }}</h3> </div> <script>var vm = new Vue({el:"#app",data:{msg:'ok'},methods:{show(){console.log("執行了show()");}},beforeCreate(){//這是我們遇到的第一個生命周期函數，表示實例完全被創建出來之前會執行。//在本方法中，data和methods都未被初始化//console.log(this.msg);//undefined//this.show();//方法也未被初始化},created(){//這是遇到的第二個生命周期函數//在本方法中，data和methods都已經初始化好了//如果要調用methods和data，最早應該是在created方法中操作。//console.log(this.msg);ok//this.show();//執行了show()},beforeMount(){//這是遇到的第三個生命周期函數，表示模板已經編譯完成了，但是尚未把模板渲染到頁面中//beforeMont執行的時候，頁面中的元素，還沒有真正替換過來，只是之前寫的一些模板字符串//console.log(document.getElementById("h3").innerText);//{{ msg }}},mounted(){//這是遇到的第四個生命周期函數，表示內存中的模板已經真實的掛載到頁面中，用戶已經可以看到渲染好的頁面了//注意：mounted是實例創建期間的最后一個生命周期函數，當執行mounted已經完全創建好了，//如果要通過某些插件操作頁面上的dom節點，最早要在mounted中進行操作//此時如果沒有其他操作的話，這個實例就靜靜地躺在內存中一動不動//此時組件已經脫離了創建階段，進入了運行階段。//console.log(document.getElementById("h3").innerText);//ok},//接下來的是運行中的兩個事件beforeUpdate(){//數據被更新了觸發這個事件，這時候表示我們的界面還沒有被更新console.log("beforeUpdate界面上元素的內容" + document.getElementById("h3").innerText);//okconsole.log("beforeUpdatedata中的內容" + this.msg);//no//得出結論：當執行beforeUpdate時，頁面中的元素是舊的，此時data中數據是新的},updated(){//update執行的時候，頁面和data數據，已經保持一致了console.log("updated界面上元素的內容" + document.getElementById("h3").innerText);//noconsole.log("updateddata中的內容" + this.msg);//no},beforeDestroy(){//當執行beforeDestroy,vue實例從運行階段進入了銷毀節點。//當執行beforeDestroy的時候，此時實例身上所有data、methods過濾器等等，都處于可用狀態。},destroyed(){//當執行destroyed時候，組件已經被完全銷毀了，此時組件中所有的data、methods等都不可用。}}) </script>自定義指令
<div id="app"><p>頁面載入時，input 元素自動獲取焦點：</p><input v-focus> </div><script> // 注冊一個全局自定義指令 v-focus /*Vue.directive('focus', {// 當綁定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus()} })*/ // 創建根實例 new Vue({el: '#app',directives: {// 注冊一個局部的自定義指令 v-focusfocus: {// 指令的定義inserted: function (el) {// 聚焦元素el.focus()}}} }) </script>watch
<div id="app"><input type="text" v-model="firstname"/>+<input type="text" v-model="lastname" />=<input type="text" v-model="fullname" /> </div><script>var vm = new Vue({el:"#app",data:{firstname:'',lastname:'',fullname:''},methods:{},watch:{//使用watch監視data 中指定數據的變化，觸發這個watchfirstname:function(newVal, oldVal){this.fullname = newVal + '-' + this.lastname;},lastname:function(newVal){this.fullname = this.firstname + '-' + newVal;}}}) </script>computed
<div id="app"><input type="text" v-model="firstname"/>+<input type="text" v-model="lastname" />=<input type="text" v-model="fullname" /><p>{{ fullname }}</p><p>{{ fullname }}</p><p>{{ fullname }}</p> </div><script>var vm = new Vue({el:"#app",data:{firstname:'',lastname:''},methods:{},computed:{//在這里可以定義一些屬性，這些屬性叫做計算屬性，//計算屬性本質就是一些方法，只不過我們在使用這些計算屬性的時候，是把它們的名稱直接當做屬性來使用//并不會把計算屬性，當做方法去調用//注意：計算屬性，在引用的時候，一定不要加小括號()去調用， 直接把它當做普通屬性去使用//注意：只要計算屬性， 這個function內部所用到的任何data中的數據發生變化，就會立即重新計算屬性值//注意：計算屬性的求值結果，會被緩存起來，方便下次直接使用；如果計算屬性中所依賴的所有數據，都沒有發生過變化，則不會重新計算求值fullname:function(){console.log("ok");return this.firstname + '-' + this.lastname;}}}) </script>?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的VUE—从入门到飞起（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VUE—从入门到飞起（一）
- 下一篇： VUE—从入门到飞起（三）