初学Vue_vue albert-CSDN博客

本文链接：https://blog.csdn.net/Albert_weiku/article/details/123039811

学习前准备

vscode下载

Visual Studio Code在官网的下载速度感人，即使开了代理也很慢，几乎下载不了，以下是国内镜像下载地址：国内镜像地址：https://vscode.cdn.azure.cn
大家需要什么版本先去官网找一下，把下载地址替换一下即可：
在官网中点击所需版本的软件将下载地址的https://az764295.vo.msecnd.net替换成https://vscode.cdn.azure.cn
下载速度直接起飞！！！

node.js下载

Node.js的下载与安装；
我也是按照别人的博客教程安装的，这里说一下node现在有很多版本了，node12和node14的有些库文件依赖就不一样了，大家跑开源项目时要注意node的安装版本。

html基础

在大一的时候就学习了HTML5的基础知识，这个非常好入门，作为一种标记语言，就好像一个日常写的书信一样，我们要遵循共同的约定，你要这个文本有点什么样的属性就添加什么样的标签，文本呈现什么的样式就绑定CSS，再加上javasprint构成页面的交互逻辑，这样一个页面就完成了。
HTML基础学习（全）

CSS基础

要想自己的页面更加美观就需要加入CSS属性，详情看其他博客CSS基础
在这里插入图片描述

JS基础

这篇博客的重点不在原生js,给大家仙人指路☞

一、Vue简介

在html页面、CSS属性、原生JS的基础上，Vue框架只是提供了一个更加组件化、自底向上逐层应用的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue的中文文档
一个合格的程序员一定要学会看文档，学vue，看中文文档其实就够了，vue的研发及其生态建设是出自一个国际化的开发团队，而且也有不少中国人，这个框架文档就非常符合我们的阅读习惯。

框架不是唯一的，我认为框架只是为大家提供一个编写代码的规范，一个好的框架就会派生出许多第三方库，这些都是我们学习框架的原因---------更加方便快捷地编写代码。

快速开始

风格指南

在软件工程中使用Vue，为了代码的统一首先就要了解Vue的代码风格，以免自己写的代码难以阅读。

优先级A的规则

组件名应为多个单词（可以避免和HTML元素冲突）
组件的data必须是一个函数（可以让数据为每个实例单独返回一个对象）
Prop定义应该尽量详细
为v-for设置键值（在渲染的时候可以更好的追溯）
避免v-if 和 v-for同时用在同一元素上（v-for的优先级高于v-if，每次重渲染的时候都要遍历整个列表）
为组件样式设置作用域（协同开发时，设置作用域会保证CSS属性运用到你想要的组件上）
私有property名（使用模块作用域保持不允许外部访问函数的私有性）

优先级B的规则

组件文件（只要有能够拼接文件的构建系统，就把每个组件单独分成文件）
单文件组件的文件名要统一（要么驼峰要么横线，大写开头）
基础组件名（应用特定样式和约定的基础组件应该全部以一个特定的前缀开头）
前缀名一致，就可以让webpack用自动路由的方式，将基础组件一样导入使用require.context实现前端工程自动化路由vue项目
单例组件名：只应该拥有单个活跃实例的组件应该以 $T h e$ 前缀命名，以表示其唯一性
和父组件紧密耦合的子组件应该以父组件名作为前缀命名
组件名应该以高级别单词开头，以描述性的修饰词结尾
在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做
对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是PascalCase的

注：PascalCase 相比 kebab-case 有一些优势：
1. 编辑器可以在模板里自动补全组件名，因为 PascalCase 同样适用于 JavaScript。
2. MyComponent视觉上比 my-component 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。
3. 如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。
  不幸的是，由于HTML是大小写不敏感的，在DOM模板中必须仍使用kabab-case
JS/JSX中的组件名应该始终是PascalCase的
组件名应该倾向于完整单词而不是缩写
在声明prop的时候，其命名应该始终使用camelCase，而在模板中和JSX中应该始终使用kebab-case
多个attribute的元素应该分多行撰写，每个attribute一行
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
应该把复杂计算属性分割为尽可能多的更简单的property
非空HTML attrribute值应该始终带引号
指令缩写应该要么都用要么都不用
（用：表示v-bind；
@ 表示v-on；
用 # 表示v-slot；）

开始使用

请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
脚手架是快速开发时使用的工具，刚开始学一个新框架库，不要直接使用工具生产。

声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

vue和原生js不同的时;数据和DOM建立关联,所有东西都是响应式的,不再和HTML直接交互.
一个Vue应用会将其挂载到一个DOM元素上然后对其进行完全控制,HTML是一个入口,其余的都会发生在新创建的Vue实例内部

动态绑定

除了文本插值,我们还可以动态绑定元素

<div id="app-2">
  <span :title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind上面风格指南可以简写成 " : "，并且建议大家统一这么做~

条件与循环

在csdn上没办法显示出来效果，大家看官方文档，直接开控制台，就会体验到vue声明式渲染的魅力.

处理用户输入

为了让用户和应用进行交互，可以用v-on指令添加一个事件监听器。
v-on上面风格指南可以简写成“ @ ”，并且建议大家统一这么做。

<div id="app-5">
  <p>{{ message }}</p>
  <button @click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')//反转消息的事件
    }
  }
})

在方法中，更新了应用的状态，但是没有触碰DOM-所有的DOM操作都由Vue来处理，我们编写的代码只需要关注逻辑层面。
Vue还提供v-model指令,他能轻松实现表单输入和应用状态之间的双向绑定.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

组件化应用构建

组件系统是vue的又一个重要概念,将一个应用界面都可以抽象为一个组件树.
题外：如果说自底向上的构建思路在Vue中体现的淋漓尽致，React框架就将这种组件化的思想发挥的淋漓尽致，做到万物皆组件的形式
在这里插入图片描述
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例

参考

Visual Studio Code国内镜像下载：https://blog.csdn.net/weixin_44041875/article/details/120039029

vue2中文文档
 vue3中文文档