Vue 关于 el 和 data 的两种写法
el 的两种写法
el 的第一种写法：new Vue 的时候配置 el 属性
el 的第一种 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>el 第一种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
msg:'你好 Vue'
}
})
</script>
</body>
</html>
el 的第二种写法：先创建 Vue 实例，随后通过 v.$mount('#root') 指定 el 的值
el 的第二种 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>el 第二种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript">
const vm = new Vue({
data: {
msg: '你好 Vue'
}
})
vm.$mount('#root')
</script>
</body>
</html>
data 的两种写法
data 的第一种写法：对象式
data 第一种 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data 第一种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
msg:'你好 Vue'
}
})
</script>
</body>
</html>
data 的第二种写法：函数式 （推荐使用）
推荐使用原因：后续组件的使用 data 必须使用 函数式 否则会报错
另一个重要的原则：由 Vue 管理的函数，一定不要使用箭头函数，一旦使用，this 就不再是 Vue实例了
data 第二种 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data 第二种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data() {
return {
msg: '你好 Vue'
}
}
})
</script>
</body>
</html>
