Vue使用小结

公司新项目使用Asp.Net Core+Vue组合来做，这里总结下对于Vue的认识

为什么选择Vue

主要基于以下几点选择Vue而不是jQuery、React等框架

• 双向绑定
  相比于jQuery减少了许多DOM操作
• 文档
  相比于React和Angular，Vue的文档简单易读
• 上手快
• 轻量级

Debug

Chrome借助于Vue Devtools插件可以方便的查看Vue对象：

 

 

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的便利之处，对于背后的原理尚不清楚，这也是以后需要多研究的地方。

以上内容，不足之处希望各位网友多多指教。