vue的整体认识_vue语雀-CSDN博客

本文链接：https://blog.csdn.net/qq_44331582/article/details/126283913

vue 框架，复用一些组件加快开发效率。

可以参考文档：

Vue2:

1.Vue核心 Vue简介初识 · 语雀 (yuque.com)
链接： https://www.yuque.com/cessstudy/kak11d/hfeef2
2.vue/vue基础用法&基础原理整理.md · 格雷狐思/笔记 - Gitee.com（该文档已经下载至父文件夹中）
链接：
https://gitee.com/gaohan888/note/blob/master/vue/vue%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95&%E5%9F%BA%E7%A1%80%E5%8E%9F%E7%90%86%E6%95%B4%E7%90%86.md

Vue3: Vue3学习手册(最完整的教程) | ZSEN的博客 (gitee.io)
链接：
https://huzhushan.gitee.io/2020/12/31/Vue3%E5%AD%A6%E4%B9%A0%E6%89%8B%E5%86%8C(%E6%9C%80%E5%AE%8C%E6%95%B4%E7%9A%84%E6%95%99%E7%A8%8B)/

Vue2学习

1. 基本使用步骤

① 导入 vue.js 的 script 脚本文件（下载或者引入在线链接）
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
  <div id="app">
    name is: {{name}}
  </div>
  <script>
    // new Vue({
    //   el: "#app",
    //   data(){
    //     return {
    //       name: "哈哈哈"
    //     }
    //   }
    // })
    const vm = new Vue({
      el: "#app",
      data(){
        return {
          name: "哈哈哈"
        }
      }
    })
    vm.$mount("#app");
  </script>
</body>
</html>

2. 通过vuecli 进行新建项目

前提是下载 node.js
参考如下：vue如何新建一个项目（超详细哦） - 简书 (jianshu.com)

Vue中经常用的：

Vue中的MVVM

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例
基本代码与 MVVM 的对应关系

vue 的指令

指令的概念
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
数据绑定
② 属性绑定指令
Vue中有2种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面
③双向绑定指令
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

tips:
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

④ 事件绑定指令（传值）
vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：
注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，
分别为：v-on:click、v-on:input、v-on:keyup
⑤ 条件渲染指令
⑥ 列表渲染指令