公司新项目使用Asp.Net Core+Vue组合来做，这里总结下对于Vue的认识
为什么选择Vue
主要基于以下几点选择Vue而不是jQuery、React等框架
- 双向绑定
相比于jQuery减少了许多DOM操作 - 文档
相比于React和Angular，Vue的文档简单易读 - 上手快
- 轻量级
Debug
Chrome借助于Vue Devtools插件可以方便的查看Vue对象：
Vue Devtools
Vue实例
基本使用
页面中至少有一个Vue实例
var vm = new Vue({
el: '#app',
data: {
tag: "",
codes: []
},
mounted: function () {
this.init();
},
methods: {
init() {
this.getCodes();
},
getCodes() {
if (this.tag === "") {
// ...
}
}
}
});
页面中使用Vue实例：
<div id="app" v-cloak>
<input type="text" v-model="tag">
<ul>
<li v-for="item in codes">item</li>
</ul>
<button v-on:click="getCodes()">刷新</button>
</div>
只有当Vue实例被创建时data中存在的属性才是响应式的，当这些数据改变时，视图会进行重渲染；视图接收用户输入时，data中相应的属性值也会发生改变。
如果你在Vue实例创建完毕后，添加一个新的属性，比如：
vm.attr="vue";
那么对attr的改动将不会触发任何视图的更新。如果你需要在晚些时候操作一个属性，那么可以在创建Vue实例时对该属性赋予一个初始值。
计算属性与侦听器
项目中只用到了计算属性，未用到侦听器
组件
单文件组件相对复杂，且整个项目中只有极少处需要使用组件，所以这里使用了全局组件。
模板语法
内容可参考官方文档：模板语法。
项目中主要用到以下指令
- v-if...v-else
条件渲染
v-bind
Class 与 Style 绑定v-for
列表渲染v-model
表单输入绑定v-on
事件处理
遇到的问题
- v-for 和 v-on:click 一起使用 v-on:click无效，也不报错
网上多数是在Vue组件中出现这种情况，使用v-on:click.native来替代v-on:click，我这里不是，示例代码如下：
<ul>
<li v-for="item of products" v-on:click="redirectToDetail(item.id)">{{item.name}}</li>
</ul>
后来发现因为样式问题，页面上鼠标点击时并未点击到li标签，因而未触发redirectToDetail方法。
小结
这是第一次在项目中使用Vue。目前，仅仅体会了Vue的便利之处，对于背后的原理尚不清楚，这也是以后需要多研究的地方。
以上内容，不足之处希望各位网友多多指教。
