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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    所以选择了slot来实现,如何保证传入的form-item的布局一致,则是拿slot-scope

    CRPER
  • 【译】使用 Webpack 和 Poi 构建更好的 JavaScript 应用

    Webpack 是一个将你所有的 JavaScript 文件,图片、字库以及 CSS 等打包到一个依赖关系图的构建工具。这使得你可以在源码中使用 require...

    逆葵
  • 19年你应该关注这50款前端热门工具(上)

    19年,又是新的一年,“前端届”,又出了哪些新的“玩意”?今天小编向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所帮助。

    前端达人
  • Vue 组件间通信方法汇总

    除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 ?

    JS菌
  • Vuex 实战

    Vuex 作为中大型 Vue 应用中的“御用”集中数据管理工具,在实习时的公司很早就得到了广泛使用。本文旨在以尽可能简洁的文字向读者展示:如何在一个颇具规模的 ...

    逆葵
  • Vue项目i18n国际化语言切换

    RtyXmd
  • beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

    场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容。

    hotqin888
  • Vue 插件开发入门

    相对组件来说,Vue 的插件开发受到的关注要少一点。但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能。

    逆葵
  • vue cli3 开发环境与生产环境配置(一)

    yangdongnan
  • 2018热度上升最快的编程工具是什么?TensorFlow只排第11

    排名依据是Stack Overflow的问题数据。今年,平均每天有超过6,000条新问题发布。

    量子位

扫码关注云+社区

领取腾讯云代金券