整体代码结构
由于 Grails 框架现在并不支持解析 Vue.js的插件, 所以采用如下方式：
其中，assets/vbuilder/目录下放置的是ci/vueSrc编译生成的js文件。
以appDetail.gsp举例，appDetail.gsp中的代码如下所示
<body>
<div class="container-fluid">
<g:render template="side"/>
<div id="appDetail">
<router-view></router-view>
</div>
</div>
<script src="${assetPath(src: 'vbuilder/static/common.js')}" type="text/javascript"></script>
<script src="${assetPath(src: 'vbuilder/static/appDetail/index.js')}" type="text/javascript"></script>
</body>
而vueSrc/pages/appDetail/中包含 index.js 和 index.vue 两个文件。其中index.js是包含路由设置，而index.vue负责页面UI和业务逻辑。
大家都知道，Vue的代码需要编译成js代码之后，才能在浏览器中生效。所以，修改Vue代码之后，使用webpack打包，刷新页面，才能看到修改之后的页面。但是我们公司开发了一个实时编译Vue代码的工具-vbuilder.这个工具能感知指定目录下的文件变化，一旦文件发生改动，它会重新编译生成JS文件，不需要我手动使用webpack打包。总的来说，Grails与Vue结合的重点的是assets目录，它的整体流程如下所示：
Vue 工程的代码结构
接下来就是vueSrc工程的代码结构
uto-orient/strip%7CimageView2/2/w/1240)
vueSrc下有common,components,node_modules,pages四个目录其中，他们的作用如下所示
| 目录名 | 描述 |
|---|---|
| page | 一个页面对应一个目录，每个目录下都包括index.js文件 |
| common | 包括api.js,config.js,common.js。其中api.js存储后端的URL; config.js存储标题，内容等常量; common.js 是一些普遍常用的函数 |
| components | 包含该工程特有的组件库 |
| node_modules | 第三方组件库 |
Vue.js 在项目中遇到的坑
- Vue 中的 data 属性一般是用于数据的初始化，这里需要注意的是，data 中定义的变量a，当该变量 a 的值发生变化时，使用该变量的 html 中。也会发生变化；但是依赖b =a +1 （其中b定义在data）中的b，并不会随着a的变化而变化。
- Vue 中如果父子组件同时需要修改子组件中某个属性的值。这个属性最好存在于props中，当子组件需要修改该值时，通过 emit 方法向父组件发送消息，请求父组件修改该属性的值。
- data 中的属性的初始化不能利用props的属性
export default {
props: {
customClass: {
type:String,
default: ''
},
options: {
type:Array,
default: []
},
initOption: {
type:String,
default: ''
}
},
data: {
optionVal: this.initOption
},
}
这样会报错。
原因是，props的初始化在data初始化之后？
- Vue 中 methods 有正确的调用顺序
- Vue 中双向数据渲染需要注意的问题
this.alert = CONFIG.addOrUpdateAppSuccessAlert;
this.alert.show = true
首先CONFIG.addOrUpdateAppSuccessAlert会变成一个新的Vueobject。由于alert.show有双向数据渲染，所以CONFIG.addOrUpdateAppSuccessAlert.show会变成false。而且无法变为true。所以上面正确的写法如下所示
this.alert = JSON.parse(JSON.stringfy(CONFIG.addOrUpdateAppSuccessAlert)) ;
- Vue 初始化需要注意的点
<input v-model='jobInfo.name'>
<script>
export default{
data(){
return {
jobInfo: {
}
}
}
}
</script>
如果jobInfo中没任何定义的话，jobInfo.name是无法和 input 元素进行双向绑定的，至于为什么呢？因为在 Vue 2.0 中 v-model 不再创造没有初始化的属性。所以，无法双向绑定。
v-model with uninitialized property
- Vue 中监听某个 object 类型的 key 值
data: {
block: {
checkbox: {
active:false
},
someotherprop: {
changeme: 0
}
}
},
watch: {
'block.checkbox.active': function() {
// checkbox active state has changed
this.block.someotherprop.changeme = 5;
}
}
