搜索文档
el 的两种写法
配置实例对象写法
在此之前，我们用的都是配置对象写法。
代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="root">{{ name }}</div> <script> new Vue({ el: '#root', data: { name: 'iGma' } }) </script> </body> </html>
通过实例对象的 $mount() 方法
代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="root">{{ name }}</div> <script> const App = new Vue({ data: { name: 'iGma' } }) App.$mount('#root'); </script> </body> </html>这么写的好处是，我们创建一个 Vue 实例后，可以先不去给他绑定容器，在需要绑定时再去做操作，这样会更灵活一些。
data 的两种写法
对象写法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">{{ name }}</div>
<script>
new Vue({
el: '#root',
data: {
name: 'iGma'
}
})
</script>
</body>
</html>函数式写法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">{{ name }}</div>
<script>
const App = new Vue({
data(){
return {
name: 'iGma'
}
}
})
App.$mount('#root');
</script>
</body>
</html>- 如何选择：前期学习的时候两种写法都可以，学到组件后，data必须使用函数式。
- 注意：data 使用函数式时，一定不要使用箭头函数，且返回值一定是一个对象。