1. 嵌入vue相关的js库
Code Block | ||||
---|---|---|---|---|
| ||||
<script src="/libs/vue/vue.js"></script>
<!-- 还可以嵌入其它第三方js库 --> |
2. 嵌入自定义样式
Code Block | ||||
---|---|---|---|---|
| ||||
.vue-container{border: 1px solid #ff0000;} |
3. 添加脚本控件
4. 根据需求配置数据源
5. 编写vue的html模板
Code Block | ||||
---|---|---|---|---|
| ||||
<div id="vueApp">
{{ message }}
</div> |
6. 编写vue的js脚本
Code Block | ||||
---|---|---|---|---|
| ||||
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#vueApp',
data: exampleData
}) |