学习笔记编写vue的第一个程序

学习笔记编写vue的第一个程序的完整攻略如下：

1. 前置条件

开始编写Vue的第一个程序，需要确保已经安装好了以下开发环境：

• Node.js：JavaScript 的运行环境
• npm：Node.js 的包管理器
• Vue CLI：Vue 的命令行工具

如果还没有安装，可以先参考 Vue官网 进行安装。

2. 创建项目

使用 Vue CLI 创建一个新项目，可以使用以下命令：

vue create hello-world

其中 hello-world 是项目的名称，可以根据需要进行修改。执行命令后会出现一些配置选项，可以根据自己的需要进行选择。如果不确定可以直接回车使用默认参数。

3. 运行项目

成功创建了一个新的 Vue 项目后，进入项目目录并执行以下命令：

cd hello-world
npm run serve

然后在浏览器中打开 http://localhost:8080/，即可看到一个 Vue 的欢迎界面。

4. 修改页面内容

可以在项目的 src/App.vue 文件中修改页面的内容。默认情况下，该文件的内容如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      Edit <code>src/App.vue</code> and save to reload.
    </p>
    <a
      href="https://v3.cn.vuejs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn Vue.js 3
    </a>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
};
</script>

可以将 msg 的值改为自己想要显示的内容，例如：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "Hello, Vue World!",
    };
  },
};
</script>

修改后保存，浏览器将会自动显示新的内容。

示例1：添加输入框

可以在页面中添加输入框，使用户可以输入自己的名字，然后显示在页面上。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="name" placeholder="请输入您的姓名" />
    <p v-if="name">您好，{{ name }}！</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "欢迎来到 Vue 世界！",
      name: "",
    };
  },
};
</script>

上述代码中，我们使用了 v-model 来绑定输入框的值，然后通过 v-if 来判断输入框中是否有内容，如果有，则显示欢迎信息。

示例2：添加按钮

除了使用输入框来触发数据的变化，还可以添加按钮，通过按钮来触发事件改变数据。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="name" placeholder="请输入您的姓名" />
    <p v-if="name">您好，{{ name }}！</p>
    <button @click="resetName">重置</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "欢迎来到 Vue 世界！",
      name: "",
    };
  },
  methods: {
    resetName() {
      this.name = "";
    },
  },
};
</script>

上述代码中，我们添加了一个按钮，通过 @click 来绑定点击事件 resetName，然后在 methods 中定义了该事件的处理函数，在函数中重置了姓名数据。