03el与data的两种写法_终是痴情负了空的博客-爱代码爱编程
data与e1的2种写法
1.e1有2种写法
(1) .new Vuel时候配置e1属性
(2).先创建Vue实例,随后再通过vm. $mount( ’ #root”)指定e1的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必 须使用函数式,否则会报错。
3.个重要的原则:
由Vue管理的函数,一定不要写箭头函数, .一旦写了箭头函数,this就不再是Vue实例了。
例如:data(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--容器-->
<div id="root">
{{name}}
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例
/*const v =new Vue({
//el的第一种写法:
// el:'#root',//用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
data:{
name:'尚硅谷1'
}
})
//el的第二种写法:
v.$mount('#root')//更灵活
*/
//data的两种写法
new Vue ({
el:'#root',
//第一种
// data:{
// name:'尚硅谷1'
// },
//函数式写法
data:function () {
//不可以写成箭头行数,因为这时候this指的是window实例
return{
name:'尚硅谷2'
}
}
//简写data(){}
})
</script>
</body>
</html>