Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] 说说你对选项el,template,render的理解 #273

Open
haizhilin2013 opened this issue Jun 16, 2019 · 4 comments
Open

[vue] 说说你对选项el,template,render的理解 #273

haizhilin2013 opened this issue Jun 16, 2019 · 4 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 说说你对选项el,template,render的理解

@haizhilin2013 haizhilin2013 added the vue vue label Jun 16, 2019
@wenyejie
Copy link

el: 把当前实例挂载在元素上
template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数
render: 不需要通过编译的可执行函数

template和render, 开发时各有优缺点, 不过在线上尽量不要有template

@yxllovewq
Copy link

yxllovewq commented Mar 10, 2022

el:被挂载的dom
template:会被render编译成vdom,在没有提供render选项时,会找template选项,没有template选项,会找el指向的外部template。
render:template最终都会通过render编译成vdom

@sc950828
Copy link

el: 把当前实例挂载在哪个元素上,vue2会替换该元素,vue3不会替换
template:最后都会被编译成渲染函数
render: 渲染函数

@Cai-zhiji
Copy link

Cai-zhiji commented Jul 7, 2023

el选项用于指定Vue实例的挂载目标,
template选项用于定义组件的模板,
render选项提供了更灵活和直接的方式来手动渲染组件。

el

<!-- HTML -->
<div id="app">
  <h1>{{ message }}</h1>
</div>

// JavaScript
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

template

// JavaScript
new Vue({
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello, Vue!'
  }
}).$mount('#app');

render

// JavaScript
new Vue({
  render: function (createElement) {
    return createElement('div', this.message);
  },
  data: {
    message: 'Hello, Vue!'
  }
}).$mount('#app');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

5 participants