Vue简单用户管理源码

最新推荐文章于 2023-04-24 13:00:13 发布

hr226

最新推荐文章于 2023-04-24 13:00:13 发布

阅读量485

点赞数

分类专栏： demo Vue 文章标签：初始Vue&amp;简单用户管理demo

本文链接：https://blog.csdn.net/hr226/article/details/100805976

版权

本文介绍了如何使用Vue CLI搭建项目，并通过基础语法实现简单用户管理功能。首先，全局安装vue-cli并创建基于webpack的项目。接着，讲解了Vue的基础语法。然后，引入vue-router和vue-resource，通过index.html、main.js、Test.vue、Users.vue和App.vue等文件，实现了用户管理的演示demo。

摘要由CSDN通过智能技术生成

一、Vue—安装脚手架
1、npm install -g vue-cli //全局安装脚手架
2、vue init webpack my-project //创建一个基于webpack模板的新项目（项目名my-project）

二、Vue—基础语法

<template>
  <div>
    <!-- 获取数据 -->
    <h1>{
  {title}}</h1>
    <p>{
  {user.firstName}}</p>
    <p v-text="user.lastName"></p>

    <!-- v-if -->
    <p v-if="showName">{
  {user.firstName}}</p>
    <!-- v-else -->
    <!-- <p v-else="showName">Nobody</p> -->
    <p v-else>Nobody</p>

    <!-- v-for -->
    <ul>
      <li v-for="(item,index) in items" :key="index">{
  {item.title}}</li>
    </ul>

    <!-- v-on -->
    <!-- <button @click="greet">Say Greeting</button> -->
    <button @click="greet('Hello everybody')">Say Greeting</button>

    <!-- 键盘事件 -->
    <input type="text" @keyup="pressKey" @keyup.enter="enterHit" />

    <!-- computed 计算属性  -->
    <label>First Name:</label>
    <input type="text" name id v-model="user.firstName" />
    <br />
    <label>First Name:</label>
    <input type="text" name id v-model="user.firstName" />
    <br />

    <h3>{
  {fullName}}</h3>

    <!-- props属性 -->
    <h2>{
  {msg}}</h2>
  </div>
</template>

<script>
export default {
  name: "test",
  props: {
    msg: {
      type: String,
      default: "默认就是当前属性"
    }
  },
  data() {
    return {
      title: "Hello Vue.js!",
      user: {
        firstName: "Hemiah",
        lastName: