1.新建index.html并以CDN形式引入Vue。
<script src="https://unpkg.com/vue"></script>
2.新建index.js实例化一个Vue对象。
index.js内容如下:
new Vue({
el:'#vue', // el: element(元素) 需要挂载的元素,也是html的根容器元素
data:{ //存储数据
'key':'value'
},
methods:{
//存储方法
//没有参数
sayHello(){
return 'Hello World!'
},
//有参数
sayWord(word){
return 'Hello'+word+'!'
}
},
computed:{
//计算属性
}
});
3.在index.html中引入index.js。
<body>
<div id="vue">
<!-- 方法和属性只能作用于id为vue的容器内 -->
<h3>{{key}}</h3>
<h2>{{sayHello()}}</h2>
<h1>{{sayWord('World')}}</h1>
</div>
<script src="index.js"></script>
</body>
至此，Vue的实例化对象已经完成。
运行效果:
xiaoguo.png
网友评论