作者：高小原gy_941 | 来源：互联网 | 2023-06-04 12:16
data与el的2种写法：1：el有2种写法：（1）newVue时候配置el属性（2）先创建Vue实例，随后再通过vm.$mount(#root)指定el的值
data与el的2种写法：
1：el有2种写法：
（1）new Vue时候配置el属性
（2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2：data有2种写法：
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，以后学习到组件的时候，data必须使用函数式，否则会报错
3：一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>el的两种写法title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>Hello,{{name.toUpperCase()}}h1>
div>
<script>
const x = new Vue({
// el:"#root",
data:{
name:'哈哈'
}
});
console.log(x);
//先生成实例再接管容器
x.$mount('#root')
script>
body>
html>
DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>data的两种写法title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>Hello,{{name.toUpperCase()}}h1>
div>
<script>
new Vue({
el:"#root",
//data的第一种写法：对象式
// data:{
// name:'哈哈'
// }
//data的第二种写法：函数式
// data: function(){
// return{
// name:'Vue'
// }
// }
//函数式的进一步简写
data(){
return{
name:'Vue'
}
}
});
script>
body>
html>
京公网安备 11010802041100号