Vue入门速成

语法

{{}} 变量、表达式渲染
v-html html模板，渲染html
v-model 绑定值（双向绑定）
v-if 判断
v-bind 简写 : 绑定属性
v-on 简写 @ 绑定事件
v-for 循环
动态class style

测试效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue学习</title>
  <style>
    .active { color: red}
  </style>
</head>
<body>
  <div id="app">
    {{ message }}
    {{ message2 }}
    <div>
      <input type="text" v-model="message3">
      <div>{{ message3 }}</div>
    </div>
    <div>{{ num+1 }}</div>
    <div>{{ bool }}</div>
    <div>{{ bool ? 'a' : 'b' }}</div>
    <div>{{ arr.find(v => v.name==='张三')?.age }}</div>
    <div v-html="htmlStr"></div>
    <div>
      <input type="text" v-model="value">
      <div>{{ value }}</div>
    </div>
    <div>
      <div v-if="color === 'red'">这是红色</div>
      <div v-else-if="color === 'blue'">这是蓝色</div>
      <div v-else>这是其他色</div>
    </div>
    <div>
      <a :href="url">搜索一下</a>
    </div>
    <div style="width: 100px; height: 100px; background-color: red" @click="clickDiv" id="div"></div>
    <div>
      <div v-for="(item,index) in users" :key="index">{{ (index+1) + '=====' + item.name }}</div>
    </div>
    <div style="display: flex; margin-top: 20px">
      <select v-model="currentMenu">
        <option value="首页">首页</option>
        <option value="教师">教师</option>
        <option value="学生">学生</option>
      </select>
      <div style="padding: 0 10px" :style="{fontSize : item === currentMenu ? '20px' : '18px'}"
           :class="{'active' : item === currentMenu}" v-for="(item,index) in menus" :key="index">{{ item }}</div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      data() {//vue2的方式
        return {
          message2 : 'aaa',
          message3 : 'bbb'
        }
      },
      setup() {//vue3推荐方式
        const message = ref('Hello vue!')
        const num = 1
        const bool = false
        let arr = [ {name: '张三', age: 23} ]
        let htmlStr = '<strong style="color: red">渲染html测试</strong>'
        let value = ref('')
        let color = ref('red')
        let url = 'https://www.baidu.com'
        let users = [{name: '张三', age:22},{name: '李四', age:22},{name: '王五', age:22}]
        let menus = ['首页','教师','学生']
        let currentMenu = ref('首页')
        return {
          message,
          num,
          bool,
          arr,
          htmlStr,
          value,
          color,
          url,
          users,
          menus,
          currentMenu
        }
      },
      methods: {
        clickDiv() {
          console.log('我点击了div')
          let color = document.getElementById('div').style.backgroundColor
          document.getElementById('div').style.backgroundColor = color === 'blue' ? 'red' : 'blue'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

Vue项目创建

1.vue.js官网学习vue的语法等知识，有html、css、JavaScript基础。

vue官网：https://cn.vuejs.org

2.下载node.js，使用其中的npm包管理工具构建vue项目，npm管理依赖，类似maven，node-v查看版本，建议14以上

nodejs官网：https://nodejs.org/zh-cn/

下载nodejs，一路下一步，就能完成 node&npm 的安装

3.cmd到项目路径下，npm -v检查npm版本，npm install -g @vue/cli，安装vue脚手架，vue create创建vue项目

配置选择

选择如下四个，取消Linter

vue版本选3.x

使用history mode，输入y

选择如下

保存配置，第一次可以y，已保存过可以n

创建成功日志

运行项目

启动成功日志

登录页面测试

ctrl+c，y，关闭运行的项目

4.vue项目开发使用idea，也可使用vscode，看习惯，vue项目文件夹拖到idea里启动即可，配置启动项

配置保存后，点运行，可快速启动项目

启动后自动跳转到页面配置

5.主要文件结构介绍，index.html入口html文件包括了根元素，assets静态资源，components组件，router路由，store页面变量，views视图（页面级组件），App.vue根组件，main.js项目入口文件实例化Vue应用，package.json依赖配置文件，vue.config.js全局配置文件，node_modules依赖的第三方库