原创Vue3,VUE进阶

VUE安装/VUE基础指令

本文阅读 2 分钟
首页 Vue3,VUE进阶 正文

1.安装VUE

  1. 安装vue需要借助vue脚手架vue cli 安装脚手架需要用到npm或者yarn,mpm安装需要先进行安装node.js

    • nodejs安装地址nodejs.org
    • 安装完成之后可以通过node -v查看是否安装成功
      36800-39oaeiik0jk.png
    • 然后使用npm命令安装脚手架 npm install -g @vue/cli 最新版本的npm不会报错 如果低版本可能会报错可以参考下解决方案
    • 安装脚手架是否成功可以通过vue -V查看
      08118-tstreq0tmp.png
  2. 安装vue 脚手架安装完成之后使用命令vue create 项目名创建项目就OK了

    • 安装之后显示这样的

    57867-p6rv6nvh13r.png

    • 安装完成后可以执行cd目录名 然后启动服务 npm run serve

    16921-z71ehxe85ap.png

2.vue的基础指令

<template>
  <!-- 变量显示 -->
  <div>{{ huixiang }}</div>
  <!-- 双向绑定 -->
  <input v-model="huixiang" />
  <!-- v-html可以解析html代码 -->
  <p v-html="html"></p>
  <!-- v-text显示文本 -->
  <p v-text="html"></p>
  <!-- v-if判断 -->
  <div v-if="status == true">汇享</div>
  <div v-else>编程</div>
  <!-- v-on事件绑定 语法糖@-->
  <div @:click="fun">点击切换</div>
  <!-- v-bind动态绑定属性 -->
  <div :class="green">绿色文字</div>
  <!-- v-for 循环 -->
  <div>
    <ul>
      <li v-for="(v, k, index) in users">{{ v }}--{{ k }}--{{ index }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      huixiang: "汇享",
      html: "<i>你好</i>",
      status: false,
      green: "green",
      users: {
        xiaobai: "小白",
        xiaohuang: "小黄",
        xiaoliu: "小刘",
        xiaowang: "小王",
      },
    };
  },
  methods: {
    fun() {
      this.status = !this.status;
    },
  },
};
</script>

<style scoped>
div {
  color: red;
  font-size: 30px;
}

.green {
  color: green;
}
</style>

61441-keh8a26oli.png

原创文章,作者:huixiang,如若转载,请注明出处:https://www.hui-xiang.cn/archives/243.html
-- 展开阅读全文 --
最近在使用npm安装Vue脚手架遇到的报错问题解决方案
« 上一篇 09-02

相关推荐