1、vue 学习的前提条件

熟悉命令行
已安装 16.0 或更高版本的 Node.js
在命令行输入 npm create vue@latest

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

2、vue 特点

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面和单页面应用程序。它具有以下特点：

响应式数据绑定：Vue.js 使用双向数据绑定，当数据发生变化时，视图会自动更新，反之亦然。
组件化：Vue.js 支持组件化开发，可以将页面拆分为多个独立的组件，每个组件负责自己的视图和行为。
指令：Vue.js 提供了丰富的指令，如 v-if、v-for、v-bind 等，用于操作 DOM 元素、数据绑定和事件处理。
虚拟 DOM：Vue.js 使用虚拟 DOM 技术，通过比较虚拟 DOM 树的差异来高效更新实际 DOM。
生命周期钩子：Vue.js 组件具有生命周期钩子函数，可以在组件创建、更新和销毁时执行相应的逻辑。
工具和生态系统：Vue.js 拥有丰富的工具和插件，如 Vue Router 用于路由管理、Vuex 用于状态管理、Vue CLI 用于快速搭建项目等。

如果你想学习 Vue.js 的基础知识，可以从官方文档开始，里面有详细的教程和示例，同时也可以参考一些优质的在线教程和视频课程。另外，练习和实践也是学习 Vue.js 的重要方式，可以尝试构建一些小型的项目来加深对 Vue.js 的理解。

3、vue 的基本使用

js
    <template>
        <h1>姓名：{{ name }}, 年龄： {{ age }}</h1>
    </template>

    <script>
        export default {
            data() {
                return {
                    name: '张三',
                    age: 18
                }
            }
        }
    </script>

    <style scoped> 
        *{
            margin: 0;
            padding: 0;
        }
    </style>

4、vue 条件渲染

js
    <template>
        <!-- v-if 这个内置指令，如果为 假，那么 这个 标签就不在渲染 -->
        <h1 v-if="falg">我是 h1 标签</h1>
        <h2 v-if="!falg">我是 h2 标签</h2>
        <h3 v-if="num === 100">我是 h3 标签</h3>
        <!-- 
            v-show 这个内置命令，不管成不成立，标签一定会加载
            如果 条件不成立，那么 给这个 标签 设置一个 display: none  
        -->
        <h4 v-show="falg">我是 h4 标签</h4>
        <h5 v-show="!falg">我是 h5 标签</h5>
    </template>

    <script>
        export default {
            data() {
                return {
                    falg: true,
                    num: 100
                }
            }
        }
    </script>

5、属性绑定

js
    <template>
        <a v-bind:href="url">点击跳转百度</a>
    </template>

    <script>
        export default {
            data() {
                return {
                    url: "https://www.baidu.com/"
                }
            }
        }
    </script>

6、样式绑定

js
    <template>
        <div class="title">姓名： {{ name }}</div>
    </template>

    <script>
        export default {
            data() {
                return {
                    name: '张三',
                    id: 12,
                    age: 18
                }
            }
        }
    </script>
    <!-- scoped 
            scoped 属性是帮助我们解决 代码量多了之后可能会出现 类名重复的问题
                    因为我们是单文件组件，一但类名重复，那么样式就会出现问题
            所以 scoped 会将我们的标签上 添加一个 特殊的标识
                    将来在寻找类名的时候，特殊标识如果不一致，就不应用样式
    -->
    <style scoped>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>

7、事件绑定

在Vue中，你可以通过v-on指令来完成事件的绑定。例如，你可以在一个按钮上绑定一个点击事件：

xml
<template>
  <button v-on:click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 点击事件处理逻辑
    }
  }
}
</script>

在上面的例子中，v-on:click="handleClick"表示当按钮被点击时，会调用handleClick方法。你也可以使用简化的@click语法糖来完成相同的功能：

xml
<template>
  <button @click="handleClick">点击我</button>
</template>

这样，当按钮被点击时，handleClick方法就会被调用。这就是Vue中完成事件绑定的方式。在绑定事件的时候 @click.stop 这样可以阻止事件冒泡 @click.stop.once 这样可以阻止事件冒泡并且事件执行一次后，自动解绑

8、循环渲染

在Vue中，你可以使用v-for指令来完成循环渲染。v-for指令可以遍历数组或对象，并为每个元素或属性执行相同的模板。

以下是一个简单的示例，演示如何在Vue模板中使用v-for指令：

xml
    <template>
      <div>
        <ul>
          <li v-for="item in items" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          items: [
            { id: 1, name: 'Item 1' },
            { id: 2, name: 'Item 2' },
            { id: 3, name: 'Item 3' }
          ]
        };
      }
    }
    </script>

在上面的示例中，v-for="item in items"指令遍历items数组，并为每个数组项渲染一个li元素。使用:key绑定item.id作为每个列表项的唯一标识符，以便Vue能够高效地更新DOM。

这样，你就可以在Vue中完成循环渲染。

9、v-model

在Vue中，v-model指令用于在表单元素和Vue实例的数据之间创建双向数据绑定。这意味着当表单元素的值发生变化时，Vue实例中的数据也会相应地更新，反之亦然。

以下是一个简单的示例，演示了如何在Vue中使用v-model指令：

xml
    <template>
      <div>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          message: 'Hello Vue!'
        };
      }
    }
    </script>

在上面的示例中，input元素使用v-model指令绑定到了message属性上。这意味着当input元素中的文本发生变化时，message属性的值也会相应地更新。反之亦然，如果在Vue实例中修改了message的值，那么input元素中的文本也会相应地更新。

v-model指令不仅适用于input元素，还适用于textarea、select等表单元素。它大大简化了表单输入和Vue实例数据之间的同步操作。

总而言之，v-model指令是Vue中非常强大且常用的指令，用于实现表单元素和Vue实例数据之间的双向绑定。

10、vue 中 v-for 和 v-if 能不能一起使用

在vue2 中，因为 v-for 的优先级会比 v-if 要高，所以当一个标签同时具有 v-for和 v-if 的时候，会先运行v-for,所以在 vue2 中禁止同一个标签使用 v-for 和 v-if
在 vue3 中， vue 调整了 v-if 的优先级，所以在 vue3 中可以同时使用 v-for 和 v-if,但是我们开发习惯不会出现 v-for 和 v-if 同时使用

JS VUE 学习指南

1、vue 学习的 前提条件