當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js入门系列教程（二）

發布時間：2025/3/15 vue 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js入门系列教程（二）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

過濾器：filter

?全局過濾器

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p></div><script>// 定義一個 Vue 全局的過濾器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg2) {// 字符串的 replace 方法，第一個參數，除了可寫一個字符串之外，還可以定義一個正則return msg.replace(/單純/g, arg + arg2)})Vue.filter('test', function (msg) {return msg + '========'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'},methods: {}});</script> </body></html> View Code

?定義格式化時間的全局過濾器

定義私有過濾器

字符串的padStart方法

自定義按鍵修飾符

鉤子函數

自定義私有指令

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="../Scripts/Vue.js/vue.js"></script></head> <body><div id="app"><h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3></div><script>// 使用 Vue.directive() 定義全局的指令 v-focus// 其中：參數1 ：指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴,// 但是：在調用的時候，必須在指令名稱前加上 v- 前綴來進行調用// 參數2：是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作 Vue.directive('focus', {bind: function (el) { // 每當指令綁定到元素上的時候，會立即執行這個 bind 函數，只執行一次// 注意：在每個函數中，第一個參數，永遠是 el ，表示被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象// 在元素剛綁定了指令的時候，還沒有插入到 DOM中去，這時候，調用 focus 方法沒有作用// 因為，一個元素，只有插入DOM之后，才能獲取焦點// el.focus() },inserted: function (el) { // inserted 表示元素插入到DOM中的時候，會執行 inserted 函數【觸發1次】 el.focus()// 和JS行為有關的操作，最好在 inserted 中去執行，放置 JS行為不生效 },updated: function (el) { // 當VNode更新的時候，會執行 updated，可能會觸發多次 }})// 自定義一個設置字體顏色的指令 Vue.directive('color', {// 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內聯的樣式// 將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素 bind: function (el, binding) {// el.style.color = 'red'// console.log(binding.name)// 和樣式相關的操作，一般都可以在 bind 執行// console.log(binding.value)// console.log(binding.expression) el.style.color = binding.value}})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {dt: new Date()},methods: {directives: { // 自定義私有指令'fontweight': { // 設置字體粗細的 bind: function (el, binding) {el.style.fontWeight = binding.value}},'fontsize': function (el, binding) { // 注意：這個 function 等同于把代碼寫到了 bind 和 update 中去 el.style.fontSize = parseInt(binding.value) + 'px'}}}});</script></body> </html> View Code

生命周期

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="../Scripts/Vue.js/vue.js"></script></head><body><div id="app"><input type="button" value="修改msg" @click="msg='No'"><h3 id="h3">{{ msg }}</h3></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: 'ok'},methods: {show() {console.log('執行了show方法')}},beforeCreate() { // 這是我們遇到的第一個生命周期函數，表示實例完全被創建出來之前，會執行它 console.log("beforeCreate()")// console.log(this.msg)// this.show()// 注意：在 beforeCreate 生命周期函數執行的時候，data 和 methods 中的數據都還沒有沒初始化 },created() { // 這是遇到的第二個生命周期函數 console.log("created()")// console.log(this.msg)// this.show()// 在 created 中，data 和 methods 都已經被初始化好了！// 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作 },beforeMount() { // 這是遇到的第3個生命周期函數，表示模板已經在內存中編輯完成了，但是尚未把模板渲染到頁面中 console.log("beforeMount()")// console.log(document.getElementById('h3').innerText)// 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串 },mounted() { // 這是遇到的第4個生命周期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了 console.log("mounted()")// console.log(document.getElementById('h3').innerText)// 注意： mounted 是實例創建期間的最后一個生命周期函數，當執行完 mounted 就表示，實例已經被完全創建好了，此時，如果沒有其它操作的話，這個實例，就靜靜的躺在我們的內存中，一動不動 },// 接下來的是運行中的兩個事件 beforeUpdate() { // 這時候，表示我們的界面還沒有被更新【數據被更新了嗎？數據肯定被更新了】 console.log("beforeUpdate()")/* console.log('界面上元素的內容：' + document.getElementById('h3').innerText)console.log('data 中的 msg 數據是：' + this.msg) */// 得出結論：當執行 beforeUpdate 的時候，頁面中的顯示的數據，還是舊的，此時 data 數據是最新的，頁面尚未和最新的數據保持同步 },updated() {console.log("updated()")//console.log('界面上元素的內容：' + document.getElementById('h3').innerText)//console.log('data 中的 msg 數據是：' + this.msg)// updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的 }});</script> </body> </html> View Code

vue-resource發起get、post、jsonp請求

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="../Scripts/Vue.js/vue.js"></script><script src="../Scripts/Vue.js/vue-resource-1.3.4.js"></script> </head> <body><div id="app"><input type="button" value="get請求" @click="getInfo"><input type="button" value="post請求" @click="postInfo"><input type="button" value="jsonp請求" @click="jsonpInfo"></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {getInfo() { // 發起get請求// 當發起get請求之后，通過 .then 來設置成功的回調函數this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {// 通過 result.body 拿到服務器返回的成功的數據// console.log(result.body) })},postInfo() { // 發起 post 請求 application/x-wwww-form-urlencoded// 手動發起的 Post 請求，默認沒有表單格式，所以，有的服務器處理不了// 通過 post 方法的第三個參數， { emulateJSON: true } 設置提交的內容類型為普通表單數據格式this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {console.log(result.body)})},jsonpInfo() { // 發起JSONP 請求this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {console.log(result.body)})}}});</script></body> </html> View Code

轉載于:https://www.cnblogs.com/cnki/p/9672230.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的Vue.js入门系列教程（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript 基础数据类型与运
下一篇： vue之二级路由