vue小细节(1)
1.vue.js里的vm：
實(shí)例名稱~vm ~他是new出來的，
var vm=new Vue({})var app =new Vue({})?
官方api用的vm,只是一個(gè)實(shí)例 2.vm.$el解讀： var vm = new Vue({el: '#app', router, template: '<App/>', components: {App} }); console.log(vm.$el)
這里,只能在入口文件中獲取vm.$el，并不能在其他文件獲取
通過 Vue 命令行使用 webpack 項(xiàng)目模板生成的項(xiàng)目，webpack 打包的基礎(chǔ)是模塊化，模塊是一個(gè)個(gè)封閉的上下文，不但入口文件中的私有變量不能被其他文件獲取，
所有文件中的私有變量都不能在其他文件中獲取。
只有通過 export 導(dǎo)出的值才可以在其他模塊中訪問，因此如果需要在其他模塊中使用 vm，你需要 export vm
$els類似于document.querySelector('.class')的功能,可以拿到指定的dom元素。
?this.$el等于vm.$el
3.$mount()手動(dòng)掛載
?
當(dāng)Vue實(shí)例沒有el屬性時(shí)，則該實(shí)例尚沒有掛載到某個(gè)dom中；
假如需要延遲掛載，可以在之后手動(dòng)調(diào)用vm.$mount()方法來掛載。例如：
<div id="app">{{a}} </div> <button onclick="test()">掛載</button> <script>var obj = {a: 1}var vm = new Vue({data: obj})function test() {vm.$mount("#app");}初始，顯示的是{{a}}
當(dāng)點(diǎn)擊按鈕后，變成了1
4.vue生命周期：
運(yùn)行結(jié)果如下：
?
代碼如下：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id=app>{{a}}<br><button v-on:click="greet">change</button> </div><script>var myVue = new Vue({el: "#app",data: {a: "hava data"},methods:{greet:function(){this.a="changed data"}},beforeCreate: function() {console.log("創(chuàng)建前")console.log(this.a)console.log(this.$el)},created: function() {console.log("創(chuàng)建之后");console.log(this.a+"........")console.log(this.$el)},beforeMount: function() {console.log("mount之前")console.log(this.a+"........")console.log(this.$el)},mounted: function() {console.log("mount之后")console.log(this.a+"........")console.log(this.$el)},beforeUpdate: function() {console.log("更新前");console.log(this.a+"........")console.log(this.$el)},updated: function() {console.log("更新完成");console.log(this.a+"........")console.log(this.$el)},beforeDestroy: function() {console.log("銷毀前");console.log(this.a)console.log(this.$el)console.log(this.$el)},destroyed: function() {console.log("已銷毀");console.log(this.a)console.log(this.$el)}});</script> </body> </html>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/goodshred/p/9812468.html
總結(jié)
- 上一篇： 创建多线程的4种方式
- 下一篇： [翻译]pytest测试框架（二）：使用