<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el和data的两种写法</title>
</head>
<body>
<div id="root">
<h1>你好,{
{
name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.procuctionTip = false;
const vm = new Vue({
// el: '#root',第一种写法
// data的第一种写法:对象式
// data: {
// name: '小阿牛'
// }
//data的第二种写法:函数式
data () {
console.log(this);
//该方法是vue调用,此处的this是vue实例对象,如果写成箭头函数,则this指向window.
return {
name: '小阿牛' }
}
});
console.log(vm);
vm.$mount('#root');//第二种写法
</script>
</body>
</html>
知识点
el和data的两种写法:
1:el的两种写法:
(1):可以在new Vue创建vue实例的时候,指定el属性的值。
(2):可以在创建vue实例之后,通过vm.$mount('#root')指定el的值。
2:data的两种写法:
(1):写成对象的形式;
(2):写成函数的形式;使用组件的时候,需要写成函数形式。
注意:由vue管理的函数一定不要写成箭头函数,否则,this指向的就不是vue实例了。
打印一下vue的实例,以$开头的都是开发者可以使用的。