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

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

文章目录

• vue从安装到熟练 2022流畅无痛版(第一季：入门篇)
• • 一、前言
  • • 1、渐进式框架Vue
    • 2、什么是渐进式框架？
    • 3、vue中两个核心点
    • • 3.1.响应式数据绑定
      • 3.2.组合的视图组件
  • 二、vue环境配置
  • • 1、vscode的安装
    • 2、node的安装
    • 3、Vue CLI的安装
    • 4、查看node与vue是否安装成功
  • 三、vue的创建与运行
  • • 1、vue项目的创建
    • • 1.1. Vscode安装volar插件
      • 1.2. 创建vue项目
    • 2、vue项目的运行
    • • 2.1. 当前目录转至vue项目所在目录
      • 2.2.运行项目
  • 四、向vue世界发出的一声Hello World
  • • 1、对vue项目文件的简单介绍
    • 2、vue框架编程前奏
    • • 2.1. HelloWolrd.vue文件内容修改如下
      • 2.2. App.vue内容修改如下
      • 2.3. 查看页面运行结果
  • 五、Vue入门
  • • 1、vue官方文档
    • 2、vue常用内置指令
    • 3、模板语法
    • • 3.1 文本插值
      • 3.2. 原始 HTML
      • 3.3 Attribute 绑定
    • 4、条件渲染
    • 5、列表渲染
    • 6、事件处理
    • • 6.1 内联事件处理器
      • 6.2 方法事件处理器
      • 6.3 在内联事件处理器中调用方法
      • 6.4 事件修饰符
    • 7、表单输入绑定
    • • 7.1文本 输入绑定
      • 7.2 修饰符
  • 六、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

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

vue -V

1. 查看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>

注：标签，可以放置网页源码

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常用内置指令

3、模板语法

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

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

3.1 文本插值

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

Message: { { msg }}
双大括号标签会被替换为相应组件实例中 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 中使用，

<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>

<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>

<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>

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

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

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

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

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

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

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

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