vue从安装到熟练 2022流畅无痛版(第一季：入门篇)

vue从安装到熟练 2022流畅无痛版(第一季：入门篇)

一、前言

整个实践流程，在2022年8月我已在win10新电脑上测试过一遍，确认是流畅的

1、渐进式框架Vue

  Vue 是一个渐进式框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2、什么是渐进式框架？

  vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
  渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
  vue的渐进式表现为：

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

3、vue中两个核心点

3.1.响应式数据绑定

当数据发生变化是，vue自动更新视图
它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。（这也是为什么vue不支持ie8 以及更早的ie浏览器的原因）

3.2.组合的视图组件

ui页面映射为组件书

划分组件可维护、可重用、可测试

二、vue环境配置

1、vscode的安装

vscode的安装地址：https://code.visualstudio.com/

vscode的安装，除了添加PATH需要特意勾以外一路，剩下的都下一步即可

2、node的安装

node的安装地址：https://nodejs.org/en/

node的安装就没有什么要注意的了，一路next即可

3、Vue CLI的安装

打开cmd面板，输入：

npm install -g @vue/cli

注：这时候最后出现一堆如下info，无视即可，并不代表出错了。

4、查看node与vue是否安装成功

首先打开cmd面板，输入：

1. 查看node版本（v是的小写）

node -v

2. 查看vue版本（V是的大写）

vue -V

3. 查看npm版本（v是的小写）

npm -v

运行结果如下：

三、vue的创建与运行

1、vue项目的创建

1.1. Vscode安装volar插件

安装完这个插件，vscode的vue环境就搭载好了

1.2. 创建vue项目

cd 到一个感觉还比较干净的文件夹

• 1.输入如下指令，创建项目

vue create demo4-vue

注1：demo4-vue是vue项目的名称，可以改动
注2：vue项目的名称不可以有大写字母

• 2.选择手动
  
  最后一个选择，Enter确认
• 3.取消掉Linter / Formatter,选择Progressive Web App (PWA) Support
  

注：上下移动，空格选择/取消

• 4.选择vue3
  
• 5.选择In dedicated config files
  
• 6.不保存预设

• 7.vue项目创建成功结果示意如下
  创建中
  创建成功

熟练之后这几步刷刷就过去了很快的，不长的

2、vue项目的运行

2.1. 当前目录转至vue项目所在目录

cd demo4-vue

2.2.运行项目

npm run serve

运行结果如下：

从浏览器中打开如下页面地址：
http://localhost:8080/

该项目就运行成功了。

四、向vue世界发出的一声Hello World

1、对vue项目文件的简单介绍

1. node_modules文件夹：项目依赖文件

2. public文件夹：放置静态资源（图片），webpack在打包时会原封不动的打包到dist文件夹中。

3. src文件夹（程序员源代码文件夹）：

   3.1 assets文件夹：放置静态资源（多个组件共用的静态资源），在webpack打包时会把静态资源当成模块打包到JS文件中

   3.2 components：放置非路由组件（全局组件）

   • 3.2.1 HelloWorld.vue文件： 页面文件（重要）

   3.3 APP.vue：唯一的根组件 页面文件（重要）

   3.4 main.js：程序入口文件，整个程序中最先执行的文件

   3.5 registerServiceWorker.js ：服务监听

4. .browserslistrc： 一般不去修改

5. babel.config.js：配置文件（与babel相关），一般不去修改

6. package.json：相当于项目的身份证，配置信息，记录项目叫做什么、项目中有哪些依赖、项目怎么运行，

7. package-lock.json：可以删除，是一个缓存文件

8. README.md：说明性文件

注：以上文件只有src文件夹内部的文件，我们会涉及，其他的前期可以先都不用理会

2、vue框架编程前奏

2.1. HelloWolrd.vue文件内容修改如下

<template>
  <div class="hello">
      <h1>{
    
    {
    
    name}}</h1>
  </div>
</template>

<script>
export default {
    
    
  data()
  {
    
    
    return{
    
    
 name: "HelloWorld"
    }
  }
}
</script>

注：<template></template>标签，可以放置网页源码

2.2. App.vue内容修改如下

2.3. 查看页面运行结果

打开运行页面：http://localhost:8080/

如果看到这个页面就说明，恭喜整个环境配置成功，核心文件也都知道。已经走出一大步了！
下面开始之后的vue入门学习
注：vue不需要刷新页面，只需要确保程序已经运行即可，若没运行成功请参考 三.2节 运行程序

五、Vue入门

1、vue官方文档

在讲vue指令入门的时候就不得不介绍一下，vue官方网站所在地址
https://cn.vuejs.org/

vue官方文档如下：

注：我们的Vue学习都将针对官方文档（正宗对味？）进行学习，当然不会全部遍历（不是全部重点雾）。我会基于快速上手实战的原则，针对性介绍相关语法。

2、vue常用内置指令

指令	功能介绍
v-text	更新元素的 tex
v-html	更新元素的 inn
v-bind	绑定解析表达式, 可以省略 v-bin
v-if	如果为 true, 当前标签才会输出
v-else	如果为 false, 当前标签才会输出到页面
v-show	通过控制 display 样式来控制
v-for	遍历数组/对象
v-on	绑定事件监听, 一般简写为@
v-model	双向数据绑定
v-cloak	防止闪现, 与 css 配合: [v-cloak] { display:

3、模板语法

  Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
  在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

注：以上的前期云里雾里很正常，以后会懂的。

3.1 文本插值

Vue最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: { { msg }}</span>
双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

HelloWorld.vue文件

<template>
  <div class="hello">
    <!--我是注释-->
      <h1>{
    
    {
    
    name}}</h1><br><!--第4行与第15行是，文本插值的核心编程代码模式-->
    
  </div>
</template>

<script>
export default {
    
    
  data()
  {
    
    
    return{
    
    
      //我是注释
 name: "Hello World",
    }
  }
}
</script>

注1：在template标签中，注释方法是 <!-- 我是注释 -->
注2：在script标签中，注释方法是 // 我是注释
注3：如无特殊点明，程序都是放在HelloWorld.vue文件

注4:以下写法都是合法的
{ { number + 1 }}

{ { ok ? ‘YES’ : ‘NO’ }}

{ { message.split(‘’).reverse().join(‘’) }}

这些表达式都会被作为 JavaScript ，以组件为作用域解析执行

注5:每个绑定仅支持单一表达式,以下写法都是非法的
{ { var a = 1 }} 这是一个语句，而非表达式

{ { if (ok) { return message } }}条件控制也不支持，请使用三元表达式

3.2. 原始 HTML

双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要在标签后面加上 v-html 指令

<template>
  <div class="hello">
    <!--我是注释-->
      <h1>{
   
   {name}}</h1><br><!--第4行与第17行是，文本插值的核心编程代码模式-->
<p>使用文本插值方式与使用v-html指令的差别对比</p>
      <p>{
   
   {url}}</p>          <!--使用文本插值方式与使用v-html指令的差别对比-->
      <p v-html="url"></p><br><!--第6行与第18行是，文本插值的核心编程代码模式-->
  </div>
</template>

<script>
export default {
      
      
  data()
  {
      
      
    return{
      
      
      //我是注释
 name: "Hello World",
 url:"<a href='https://blog.csdn.net/qq_35942348/category_10060449.html'>博客</a>"
    }
  }
}
</script>

运行结果：

注：这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊attribuite，

3.3 Attribute 绑定

双大括号不能在 HTML attributes 中使用，<div id={ {dynamicId}}>,这样做是非法错误的。想要响应式地绑定一个 attribute，应该使用 v-bind 指令，用法参考：

<template>
  <div class="hello">

      <p v-bind:name="id">v-bind需要F12查看网页源代码来查看效果</p><!-- 核心代码第4，5行与第14行-->
      <p :name="id">v-bind需要F12查看网页源代码来查看效果，可以把前面的v-bind1省略</p><br>  

  </div>
</template>
<script>
export default {
      
      
  data()
  {
      
      
    return{
      
      
 id:"hellowo"
    }
  }
}
</script>

运行结果：

注：v-bind:name="id"与:name="id"是等价的

4、条件渲染

与条件渲染有关的三个内置指令为：v-if、 v-else、 v-show来完成条件渲染

<template>
  <div class="hello">
    <p v-if="flag">我是小哥哥</p><!--这就是v-if 和v-else指令的使用了-->
    <p v-else>我是小姐姐</p>

    <p v-show="flag1">我是小哥哥但爱女装</p>
    <p v-show="flag2">我是靓丽小姐姐</p>
  </div>
</template>
<script>
export default {
      
      
  data()
  {
      
      
    return{
      
      
      flag:false,
      flag1:true,
      flag2:false
    }
  }
}
</script>

运行结果：

注1：有些兄弟可能发现了，无论我是小姐姐还是小哥哥都有些怪怪的，不过这明显不重要是吧？
注2：v-if与v-show的差别结合运行结果中的网页源码可以看出：

综上，如果频繁切换页面就用v-show，否则用v-if

5、列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

<template>
  <div class="hello">
    <h1>列表渲染</h1>
    <ul>
      <li v-for="item in items" :key="item.id"> {
   
   {item.title}}</li>
    </ul>

    <ul>
      <li v-for="(item,index) in items1" :key="index">{
   
   {item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
      
      
  data()
  {
      
      
    return{
      
      
      items:[
        {
      
      id:1001,title:"今日新闻1"},
        {
      
      id:1002,title:"今日新闻2"},
        {
      
      id:1003,title:"今日新闻3"}
        ],
      items1:["今日新闻1","今日新闻2","今日新闻3"]
    }
  }
}
</script>

运行结果:

注：实现列表渲染的两种方式，个人比较推荐第一种。

6、事件处理

  监听事件
  我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“methodName” 或 @click=“handler”。

  事件处理器的值可以是：

• 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
• 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

6.1 内联事件处理器

内联事件处理器通常用于简单场景，例如：

<!-- template -->
<button @click="count++">Add 1</button>
<p>Count is: {
   
   { count }}</p>

//js
data() {
    
    
  return {
    
    
    count: 0
  }
}

注1：为了不水字数，我就不全放了，只将核心部分代码放上面，大家看着使用即可
注2：@click="count++"等价与v-on:click=“count++”

运行效果：

6.2 方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

举例来说：

<!-- `greet` 是上面定义过的方法名 -->
 <button @click="greet">Greet</button>

 //jsdata() {
    
    
  return {
    
    
    name:"World"
  }
},
methods:{
    
    
  greet(event){
    
    
     // 方法中的 `this` 指向当前活跃的组件实例
     alert(`Hello ${
      
      this.name}!`)
  }
}

注1：alert内部的不是单引号，是反引号
注2：方法中的 this 指向当前活跃的组件实例
注3：有多个组件时候，记得在组件之间加逗号

运行结果：

6.3 在内联事件处理器中调用方法

除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

methods: {
    
    
  say(message) {
    
    
    alert(message)
  }
}

注：方法与内联事件区分与判断
模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。
举例来说，foo、foo.bar 和 foo[‘bar’] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器 运行结果

6.4 事件修饰符

  在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

  为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

参考用法	功能描述
.stop	单击事件将停止传递
.prevent	提交事件将不再重新加载页面
.self	仅当 event.target 是元素本身时才会触发事件处理器
.capture	指向内部元素的事件，在被内部元素处理前，先被外部处理
.once	点击事件最多被触发一次
.passive	滚动事件的默认行为 将立即发生而非等待绑定事件完成

注：以上具体用法由于稍多，大家可以对这官方文档操作试试

7、表单输入绑定

7.1文本 输入绑定

  在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
v-model 指令帮我们简化了这一步骤：

<p>Message is: {
   
   { message }}</p>
<input v-model="message"  >

  data(){
    
    
    return{
    
    
      message:""
    }
  }

注：还有多行文本、复选框、单选按钮、选择器等多种双向数据绑定，课下建议根据官方文档尝试一下

7.2 修饰符

• .lazy
  默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
  参考栗子：<input v-model.lazy=“msg” />

• .number
  如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
  参考栗子：<input v-model.number=“age” />
  如果该值无法被 parseFloat() 处理，那么将返回原始值。
  number 修饰符会在输入框有 type=“number” 时自动启用。

• .trim
  如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
  参考栗子：<input v-model.trim=“msg” />

六、vue从安装到熟练 2022流畅无痛版(第二季：熟练篇)

由于，之后还有不少内容，都放在一起就显得太长，太拖拉，我将其分成了三个部分：入门，熟练，项目实战
第二季：熟练篇博客地址：：https://blog.csdn.net/qq_51116518/article/details/126415625?spm=1001.2014.3001.5502