這次帶給大家Vue組件使用案例詳解,Vue組件使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
Vue實例
專案啟動過程
看看現在我們的項目,想想整個專案的啟動過程是什麼(以直接開啟index .html的方法存取為例來說明)?
你先打開了index.html,裡面只有一個寫了一個id='root'的p,還有你引入了打包之後的程式碼,然後Vue自己肯定運行了一下(可以認為是Vue初始化)。
接著,應該是執行了entry.js(因為打包是webpack打包的,你設定的入口檔就這一個)。
entry.js做了什麼,是的,創建了一個Vue實例對象,然後這個物件管理的區域根據el屬性知道,應該是index.html中id='root'的那個p,因此剩下的事情就只有明白這個Vue實例物件是如何管理這片區域的就可以了,這就是接下來的內容了。
什麼是Vue實例物件?
根據官方文件的說明:每個Vue應用程式都是透過用Vue函數建立新的Vue實例開始的。
你可以簡單的理解,他就是一個普普通通的對象罷了,只不過這個對像被賦予了一些特殊的功能,讓我們來了解一下他吧!
【我們接下來都是在entry.js裡面創建的那個Vue物件上面進行實驗的】
一個Vue實例物件建立的方法如下:
var vm=new Vue({ //一堆配置 });
因此,接下來要說的就是一些常用的配置(不是全部,比較特殊的以後應該會說,畢竟開始就全部,我怕彼此心都太累了)。
Vue實例物件基本配置
【1】el:選擇器| DOM結點
在我們的專案中,我們配置的是:
el:'#root'
這是一個字串,有點類似CSS選擇器,它會使用查找到的結點作為管理區域(當然還有別的CSS選擇器也可以)。
除此之外,你還可以直接傳遞一個結點,例如現在我們修改一下程式碼:
el: document.getElementById('root')
這樣也是可以了,你可以試試看。
【2】render:(createElement:()=>VNode)=>VNode
上面的是ES6的箭頭函數寫法,舉個栗子:
((x,y)=>x+y)(1,2)
上面ES6的寫法等同於下面ES5的寫法:
(function(x,y){ return x+y; })(1,2);
簡單的說就是:(x,y)=>x y就表示一個有二個參數x和y,回傳x y的函數,因此上面的函式用ES5的寫法就是:
function(createElement){ //createElement是一个函数,返回类型为VNode //这个函数的返回类型也应该是VNode return VNode; }
備註:VNode是Vue編譯產生的虛擬節點,想想Jquery節點,還有Node節點,是不是味道很像。
因此,我把專案中的render稍微改一下:
render: function (createElement) { return createElement(App); }
是不是很清晰了,說白了,就是一個最後回傳值是VNode的函數。
因此看見節點這二個字,應該可以理解頁面為什麼顯示的是App裡面的模板了吧,如何路由調整為什麼配置的是.vue文件大概也有點感覺了吧。
【3】router:VueRouter
這個比較容易理解,就是知道使用的路由配置是什麼,由於專案中是:
router:router
看著很奇怪,我們稍微修改一下:
//上面的import routerObj from './router';这一句要跟着修改一下 router: routerObj
基本的就到這裡,就三個,別的屬性因為還關聯很多東西,會一點點來說明。
Vue物件生命週期
官方的圖我就不放了,感覺意義不大,推薦入門了以後可以去看看,因此後面的文章可能會說。
下面我們來先在entry.js裡面修改一下程式碼,看看運行結果,以下是程式碼:
//根对象 var vm = new Vue({ //挂载点 el: document.getElementById('root'), //2.使用刚刚的路由配置 router: routerObj, //启动组件 render: function (createElement) { return createElement(App); }, //下面是Vue对象的几种状态 beforeCreate: function () { console.debug('Vue对象目前状态:beforeCreate'); }, created: function () { console.debug('Vue对象目前状态:created'); }, beforeMount: function () { console.debug('Vue对象目前状态:beforeMount'); }, mounted: function () { console.debug('Vue对象目前状态:mounted'); }, beforeUpdate: function () { console.debug('Vue对象目前状态:beforeUpdate'); }, updated: function () { console.debug('Vue对象目前状态:updated'); }, beforeDestroy: function () { console.debug('Vue对象目前状态:beforeDestroy'); }, destroyed: function () { console.debug('Vue对象目前状态:destroyed'); } });
運行一下看看控制台。
因此,就是說,Vue物件從創建前到最後死亡,在各個階段狀態改變的時候,都提供了一個鉤子方法,你可以註冊一下,如果你希望在特定狀態改變的時候幹點什麼的話。
到这里,基本上Vue对象实例应该比较清楚了吧?看看我们的代码,应该只有那几个.vue的文件里面的东西没有说清楚了(本文就是把前面写过的代码都说清楚,后面就可以一个新知识点接着一个的来丰富项目,因为都没有疑惑了,学习起来应该不会痛苦了吧!)。
Vue组件实例
说明
Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种,比如你还可以通过Vue.component()的方法来创建,不过这些都以后吧,我们这里就只说明.vue文件这一种(不喜欢一下子说太多,而且仔细想想,不就是API吗)。
【下面都是在PageTwo.vue里面进行修改,菜单名称修改为:Vue组件实例】
.vue文件的基本模板如下(下面都会是ES5的写法,本人还是不太喜欢ES6或者TS,原谅我,反正本质一样):
<template> </template> <script> export default { //一些配置,和前面说的Vue实例类似 } </script> <style> </style>
三个地方,分工明确:模板 + 控制 + 样式
接下来我们说明配置中常用的选项(很多具体的就留到后面一点点品位,好吧,留的有点多):
常用配置
【1】data
先看看PageTwo.vue现在的代码:
<template> <section> <input type="text" v-model="justDoIt"> <p> 输入的数据:{{justDoIt}} </p> </section> </template> <script> export default { //一些配置 data() { return { justDoIt: "初始化数据" }; } }; </script> <style> </style>
模板中的代码应该不用说了吧,前面一篇文章说的很清楚了,直接看看data。
其返回了一个键值对(还有别的写法,推荐你这样写,因为这里如果"初始化数据"这几个字是变量,这种写法形成了闭包,是安全的),在这里就是给当前组件对象是data里面添加了一个justDoIt的数据,然后上面或者别的地方才可以用,他就是干了这事情。
【2】methods
接着,我们添加一下methods属性:
methods: { doIt() { alert(this.justDoIt); } }
其实methods和data类似,只不过是用来添加的不是数据,而是方法,因此,你现在可以在模板里面添加下面代码来调用这个方法(记住,添加的全部代码必须由一个标签包裹):
13a72f693205c50baa4d52f70774a32c
v-on:click就是类似原生的onClick,不过因为是vue的方法,你应该用他的。
现在,你可以点击一下页面的按钮试一下,是不是很舒服。
【3】watch
这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合,比如你添加下面的代码:
watch: { justDoIt: function(newval, oldval) { console.log("justDoIt改变了,新值为:" + newval + ",旧值为:" + oldval); } }
如何你运行一下,打开控制台,修改输入框的值的时候,是不是控制台时刻打印了这句话。
【4】computed
这个叫做计算属性,前面一篇文章说过了,不清楚的看看PageOne.vue,应该可以明白。
简单的说就是,它用到的data里面的值改变的时候,自己会重新计算。
生命周期
和Vue对象一样,也有类似的生命周期钩子,你可以试试,这里就随便提一下。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Vue組件使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!