1. 嵌入vue相关的js库嵌入vue相关的js库
| Code Block | ||
|---|---|---|
| ||
<script src="/libs/vue/vue.js"></script> <!-- 还可以嵌入其它第三方js库 --> |
...
| Code Block | ||
|---|---|---|
| ||
.vue-container{border: 1px solid #ff0000;} |
3. 配置控件数据源添加脚本控件
4. 编写vue的html模板根据需求配置数据源
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
}) |