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

vue

vue iframe 中写script_vue: 单文件组件 render函数

發布時間：2024/1/23 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue iframe 中写script_vue: 单文件组件 render函数小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用vue-cli創建的vue項目，如何在這種項目中使用組建?

首先創建項目、啟動項目

我們再來了解一下目錄結構，src文件夾是寫邏輯代碼的地方，public是最終渲染到瀏覽器的地方。

在public下index.html中的id="app"和瀏覽器中的id="app"不是一樣的，pulic下的index.html中的id="app"是指vue掛載的地方，瀏覽器中id="app"是會覆蓋index.html節點中的id的東西。

入口文件是main.js(可配置)，通過模塊化的方式引入了vue(在node_modules下)，也可以使用es6語法，并new了一個vue控制#app的html

// main.js初始文件 import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App), }).$mount('#app')

.$mount('#app')等價el: "#app"

這個時候我們可以寫兩個模板(已知)。

html模板: 可以寫當前id="app"的這段div，可以在里面寫{{}},v-on等vue語法

template模板: 可以在當前模板中寫template字段來使用vue，并且template模板會覆蓋html模板

但是這里寫的是render函數。什么是render函數？

模板 -> 進行編譯 -> 生成ast樹 -> 數據綁定 -> 成render函數 -> 成虛擬dom -> 真實dom

如果直接使用render函數，就省略了模板的編譯過程，vue運行的更快。

--------------岔開一下: render函數基礎用法----------------------------

第一種用法:

在render函數中會自動注入一個createElement參數

2. return createElement(這是一個函數)

3 .createElement第一參數是想渲染的dom元素,第二參數是對該dom節點的配置(如id,class等，可忽略,到第三參數)，第三參數是一個數組

4. 第一參數為一個父元素(也會覆蓋html模板),第三參數是一個數組,數組里的為子元素(實驗中傳文本節點)

5. 若還要創建元素，可以數組中繼續寫createElement函數，在里頭再創建一個p標簽

6. 總結: 感覺這樣寫繁瑣,但是html模板和template模板最終都會渲染成render函數,所以還是render函數執行效率高

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>render函數</title> </head> <body><div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>new Vue({el: "#app",render: function(createElement) {return createElement('div', ['hello, world!', createElement('p', ['fanghuayong'])])}}) </script> </body> </html>

第二種用法: 只傳一個參數(是對象組件的配置項)

回顧一下組件: 第一參數是名稱，第二參數是配置項

// 第一參數組件名稱 // 第二參數組件配置項 Vue.component("my-com", {template: "<div>{{ name }}</div>",data(){return {name: "fanghuayong"}} })

把組件配置項賦值給一個變量，再傳入createElement函數中

代碼如下: 組件配置項也可以有兩種寫法

template模版: 好寫，但還是要編譯

render函數: 不好寫，但是不需要編譯，執行效率高

var app = {// template: "<div>{{ name }}</div>",// 這種方法也是需要編譯的render: function(createElement) {// 這種方式不需要編譯了，但是寫起來更麻煩return createElement('div', ['fanghuayong1', '0000'])},data(){return {name: "fanghuayong"}} } new Vue({el: "#app",render: function(createElement) {return createElement(app)// 把組件配置項傳入} })

---------------------回到單文件組件中------------------------

使用es5還原main.js中的render函數

return出去默認傳進來的h(自定義)函數(已知)

因為直傳了一個參數，不可能是第一種用法，所有是第二種用法。

new Vue({render: function(h) {return h(App)} }).$mount('#app')

特殊的配置項: 這個App是vue組件的一個配置項

console.log(App)

確實是一個配置項，有beforeCreate、beforeDestroy等這些鉤子函數，還有render函數

App.vue在編譯成配置項的同時，Vue會把template內容編譯成render函數(vue做的事情)

假設我們不想用render函數，使用template模版的話，

// main.js文件 new Vue({template: "<div>name</div>"// render: function(h) {// return h(App)// } }).$mount('#app')

會報錯: 你正在使用僅僅是運行時候的構架環境vue

如果我們想把template模板編譯成ast渲染成render函數，它應該在vue的源碼中編譯這部分的邏輯操作,如果把這部分的邏輯刪了,源碼就會變得更小,整個項目就更小,然后App編譯的過程就交給package.json中的依賴項"vue-template-compiler"來做(這是webpack做的事情)，所有組件渲染出來以后都是render函數，沒有template模板。

vue頁面渲染的更加快

vue源碼中把編譯的這部分去掉了，只是個運行的環境，少了vue源碼，所有只寫template模板就不好用了。(當前vue是去掉了編譯部分的vue)

總結: 如何用.vue這個文件組件，就是把組件的配置項寫成了一個文件的形式，template里寫的就是component組件中的template字段，script中寫其他的配置項

// App.vue文件 <template><div id="app1"><img alt="Vue logo" src="./assets/logo.png">{{ name }}<HelloWorld msg="Welcome to Your Vue.js App"/></div> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',data() {return {name: "fanghuayong"}},components: {HelloWorld} } </script><style> #app1 {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

-------------寫個小項目-----------------------------

提醒: template模版需要一個根節點

可以直接寫在App.vue中，但是我們要進行組件化開發

注冊全局組件

在src下創建一個server.vue文件

server.vue的代碼

// server.vue的代碼 <template><div><p>服務器的狀態: {{ status }}</p><hr><button @click="changeStatus">轉換</button></div> </template> <script> export default {data() {return {status: '運行中',} },methods: {changeStatus: function() {this.status == '運行中' ? this.status = '結束' : this.status = '運行中'}} } </script>

2. 現在組件配置項寫好了，開始在main.js中注冊全局組件

main.js的代碼

import Vue from 'vue' import App from './App.vue' import Server from './server.vue'Vue.config.productionTip = false // 注冊全局組件 Vue.component('app-server', Server) new Vue({render: function(h) {return h(App)} }).$mount('#app')

3. 現在注冊好組件了，我們去App.vue中使用組件

App.vue中的代碼

<template>// 直接使用標簽就可以了<app-server></app-server> </template><script>export default {} </script><style></style>

注冊局部組件

在src下新建一個serverStatus.vue文件

serverStatus.vue代碼

<template><div><p>服務器的狀態: {{ status }}</p><hr><button @click="changeStatus">轉換</button></div> </template> <script> export default {data() {return {status: '運行中',}},methods: {changeStatus: function() {this.status == '運行中' ? this.status = '結束' : this.status = '運行中'}} } </script>

server.vue代碼

<template><app-server-status></app-server-status> </template> <script> // 引入它的配置項 import ServerStatus from "./serverStatus.vue"export default {// 注冊局部組件components: {"app-server-status" : ServerStatus}} </script>

main.js代碼

import Vue from 'vue' import App from './App.vue' import Server from './server.vue' console.log(App) Vue.config.productionTip = false // 注冊全局組件 Vue.component('app-server', Server)new Vue({render: function(h) {return h(App)} }).$mount('#app')

App.vue代碼

<template><app-server></app-server> </template><script>export default {} </script><style></style>

小結: 入口文件main.js的配置項是App.vue，App.vue中有一個全局組件標簽app-server，這個標簽是server.vue中的，server.vue中又有局部組件serverStatus.vue

超強干貨來襲云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的vue iframe 中写script_vue: 单文件组件 render函数的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： redis配置_Redis配置大全（三）
下一篇： html5倒计时秒杀怎么做,vue 设