1.data与el的两种写法
1.new Vue 的时候配置el属性
2.先创建Vue实例,然后通过vm.$mount()指定el的值。(vm是Vue 实例)
2.data有两种写法:
(1)对象式
(2)函数式
一个重要原则
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js">
</script>
</head>
<body>
<div >
<h1 id='one'>在new Vue中使用el标签</h1>
<h1 id='two'>先创建Vuew,然后调用$mount方法设置应用到那个id上</h1>
<h1 id='three'>{{name}}</h1>
<h1 id='four'>{{name}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#one',
})
function data(){
return {
name:'在Vue中使用函数设置data'
}
}
var vm = new Vue({
})
vm.$mount('#two')
new Vue({
el:'#three',
data:{
name:'我是第一种方式设置data'
}
})
new Vue({
el:'#four',
data:data
})
</script>
</html>
网友评论