当前标签 / Vue.js / 总共6篇

VueJs + Elements + Axios 我的书签页

概述

看了几天 Vue 文档了,今天应该实践一下了,做一个个人书签页面,记录自己的常用书签。

书签页构思草图

创建工程

vue install webpack "hellovue"

启动预览

npm run dev

值得注意的是 npm run dev 实际上执行的是 package.json 中的 script 脚本的如下命令:

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

也许你已经猜到了, 这个 webpack.dev.conf.js 文件是配置开发过程中的webpack构建文件。

接下来我们就开始修改 HelloWorld.vue 来实现书签页。

阅读更多

VueJs学习随笔--插槽和异步组件

插槽

Vue 中提供插槽来让你替换组件中的部分内容, 例如你定义了一个组件 <navigation-link> :

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

这里的 <slot> 就是可以替换的内容部分,如果你这样使用:

<navigation-link url="/profile">
  Your Profile
</navigation-link>

阅读更多

VueJs学习随笔--组件化

组件基础

组件是可复用的 Vue 实例, 每个组件都有一个名字,我们可以直接使用名字来引入一个组件。

定义一个名为 button-counter 的新组件:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

阅读更多