文章目录

• • 前言
  • 前景
  • • Vue 的长期技术支持 (LTS)、终止支持 (EOL) 及其延长版服务
  • 学习vue 要掌握那些技能-
  • 为什么学习 vue
  • 走进vue
  • • Hello World 起手
    • • 提示：
    • 示例：
    • 示例解析
    • 编辑器 VSCode
    • • vsCode 插件
  • 正式使用 vue.js
  • • 要使用 vue 就绕不开生命周期 下面是生命周期图：
    • • 下面提出了 4 组常用生命钩子函数
      • 常用实例属性介绍 ( 和生命周期一样 刚入手不需要过多纠结其原理 知道作用即可 )
    • 常用指令
    • • v-show (接受一个 Boolean 值 true 展示当前标签 false 隐藏当前标签)
      • v-if (接受一个 Boolean 值 true 展示当前标签 false 隐藏当前标签)
      • • 区别
        • 使用场景
      • v-else (v-if 值为 true 将不显示 v-else 内容 反之 显示 v-else 内容)
      • v-for (可循环一个数组 item 是数组里的每一项; index 是数组下标)
      • v-on 可绑定一个函数 实现事件的操作 click 点击 change 监听 keyup 键盘事件 等等
      • v-bind
      • v-model
      • • 说明
        • 示例：
        • 原理
• 本篇完
• • 感言

前言

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
IE8 及以下版本不支持 vue 因为 vue 使用了 IE8 及以下版本不支持的 Object.defineProperty 方法 它是 vue 必须的

• 官网地址在这里>>

前景

Vue 的长期技术支持 (LTS)、终止支持 (EOL) 及其延长版服务

• Vue 2 的技术支持会持续多久？

• Vue 2.7 是当前、同时也是最后一个 Vue 2.x 的次级版本更新。Vue 2.7 会以其发布日期，即 2022 年 7 月 1 日开始计算，提供 18 个月的长期技术支持 (LTS：long-term support)。在此期间，Vue 2 将会提供必要的 bug 修复和安全修复，但不再提供新特性。

• Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。

• 虽然现在官方说后面不更新了，但是还是很多项目都会选用 vue2 原因：比起vue3来说 技术是成熟的（坑基本都被填了 生态是完整的 依然是求稳项目的首选）

学习vue 要掌握那些技能-

• 熟练使用 Html + JavaScript + Css / es5 es6 新特性

为什么学习 vue

1 学习成本低 门槛低 简单易学
2 轻量、高性能、组件化
3 在构建单页应用方面有着极大优势
4 相较于传统的 mvc 模式 vue.js 采用 mvvm 设计模式 实现数据的双向绑定 让开发者可以将更多精力放到业务逻辑

走进vue

Hello World 起手

提示：

• 尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

或者

如果是新手不推荐直接使用 vue-cli 创建项目 循序渐进是一个不错的选择

示例：

1 鼠标右键 创建 一个 test_01_helloWorld.txt 文本文件
2 将下面代码 复制进去再将文件后缀 .txt 改成 .html 回车 此时文件将变成 test_01_helloWorld.html 文件
3 双击 test_01_helloWorld.html 文件打开就完成了 vue 的第一次使用啦

{{ message }}

如果此时你按下 F12 右边控制栏会提示：你正在使用vue

示例解析

通过上述图片 可理解为：
1 创建 html
2 src=“https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js” 引入 vue.js
3 new Vue() 创建 Vue 实例 内部执行了根实例的初始化过程
4 el 绑定 dom(此处指 div id=“app” 标签)
5 data: {} 定义变量的地方
6 data 对象里 定义了一个 message 的变量 值为 Hello World! 的文本
7 视图层(body标签里) 给了一个 div 标签 里面使用了 vue.js 的插值表达式方式去使用 message 变量

注意：只有 el 绑定 dom 区域使用 vue.js 才有效 如图：

正确写法：

如此！我们就完成了第一次使用 vue.js 的实践 so easy ！

编辑器 VSCode

当然 我们使用 .txt 的方式写代码肯定是不现实且低效率的做法 那就应该我们的编辑器上场了
前端使用的编辑器有很多 比如 Sublime Text / VS Code / HBuilder / Atom 等等
这里 使用 vsCode 编辑器

• 下载 vsCode
• 当下载 好 vsCode 编辑器后 桌面上会有快捷键图标
• 只需要将刚刚的 test_01_helloWorld.html 文件按下左键拉到 快捷图标上 松开左键就能直接打开文件并且启动编辑器
• 当然 也可以直接左键双击 打开编辑器 在编辑器里导入 需要打开的文件 如：
  -

vsCode 插件

vsCode 是一款轻量级编辑器 可用于快速高效编辑代码 插件是 vsCode 的一大亮点 根据自己需求安装
安装插件步骤： 1 打开插件库 2 输入安装的插件名 3 点击安装即可
插件很多很多 选自己需要的安装即可 web端插件推荐 也可自己百度需求安装
示例：

编辑器中打开页面 Alt + B 快捷打开页面
如此我们完成了学习 vue.js 的准备工作
vsCode 更多用法可以百度 非常的简单

正式使用 vue.js

要使用 vue 就绕不开生命周期 下面是生命周期图：

下面提出了 4 组常用生命钩子函数

    const app = new Vue({el: '#app',  // 绑定元素生  beforeCreate () {"这一组是创建阶段"} // Vue实例创建之前，什么都没有，一般不做操作命  created () {  } // Vue已经创建实例，可做数据请求。但是没有实现挂载，也没有创建元素周  beforeMount(){"这一组是挂载阶段"} // 挂载之前。这里找到了主元素，但是里面知识模板，没有真实DOM。也可做数据请求期  mounted() { } // 挂载完成之后，这里真实DOM已经完成渲染和挂载，可以访问真实DOM，能做页面交互一  beforeUpdate(){"更新阶段"} // 跟新之前。这里不建议再次操作数据，容易造成死循环，导致内存溢出共  updated() { } // 跟新完成四  beforeDestroy(){"销毁阶段"} // 销毁前一般做一些无用的时间监听或者无效的定时器组  destroyed(){ }  // 销毁})还有一组：activated ()进入组件触发 deactivated ()离开组件触发

常用实例属性介绍 ( 和生命周期一样 刚入手不需要过多纠结其原理 知道作用即可 )

const app = new Vue({el: '#app',  // 绑定元素data: {},   //管理数据。组件定义时，data必须是函数computed: { },  // 计算属性,会被缓存：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。methods: {  },  // 装方法的：计算属性会被缓存，而方法不会被缓存，通常计算属性效率会比方法更高watch: {  },    // 用来监测Vue实例上的数据变动filters: {   },  // 定义处理数据的地方components: {  }, // 注册组件的地方})

常用指令

v-show (接受一个 Boolean 值 true 展示当前标签 false 隐藏当前标签)

 
{{ message }}
{{ name }}

示例图：

注意：以下示例将简写多余代码

v-if (接受一个 Boolean 值 true 展示当前标签 false 隐藏当前标签)

 
{{ message }}
{{ name }}

var app = new Vue({el: '#app',data: {message: 'Hello World!',name: '孙悟空'}
})

示例图：

好像有点似曾相识 因为 v-if 和 v-show 好像是一样的 那为何既生瑜又生亮呢

解析

• v-if 是通过 布尔值(true / false) 控制标签 / 组件 是否应该存在（true 表示应该存在 就重建 标签 / 组件； false 表示不应该存在 就销毁 标签 / 组件）
• v-show 是通过 布尔值(true / false) 控制标签 / 组件 的css display: none 来决定是否应该隐藏 (true 表示不隐藏 标签 / 组件 此时移除 display:none 此时并不是把display变为block，而是保持元素style的原始性； false 表示隐藏标签 / 组件 此时 display 的值 为 none)

区别

• 1 v-if 在条件不成立时 标签 / 组件是不会渲染的; v-show 不管条件成立与否都会渲染一次 因为只有 dom 渲染了才会有 css
• 2 v-if 存在切换性能高消耗 v-show 存在初始性能高消耗

使用场景

• 频繁切换 v-show
• 反之 v-if

v-else (v-if 值为 true 将不显示 v-else 内容 反之 显示 v-else 内容)

 
{{ message }}
{{ name }}

var app = new Vue({el: '#app',data: {message: 'Hello World!',name: '孙悟空',count: 1}
})

示例图：

v-for (可循环一个数组 item 是数组里的每一项; index 是数组下标)

 
名字:{{ item.name }}  / 编号: {{ index }}

var app = new Vue({el: '#app',data: {message: 'Hello World!',arr: [{name: '孙悟空'},{name: '猪八戒'},{name: '沙僧'},]}
})

示例图：

v-on 可绑定一个函数 实现事件的操作 click 点击 change 监听 keyup 键盘事件 等等

click 点我试试click 点我试试 简写keyup 点我试试 简写

var app = new Vue({el: '#app',data: {message: 'Hello World!',},methods: {  // 事件实现区clickFun_01() {   // 事件名console.log('打印' + this.message)  // 实现内容},clickFun_02() {    // 事件名console.log('我是简写' + this.message)  // 实现内容},keyupFun_01(e) {   // 事件名console.log('按下了:' + e.key + '键，键码为:' + e.keyCode)  // 实现内容}}
})

示例图：

v-on详细教程>>

v-bind

绑定属性的关键字 示例：

下面是 v:bind 简写
可以加入判断
上面判断 显示 true 结果 下面显示 false 结果
 3 ? myStyle_02 : 'width: 150px;height: 50px;background-color: pink;'}`">

var app = new Vue({el: '#app',data: {message: 'Hello World!',myStyle_01: 'width: 50px;height: 50px;background-color: red;',myStyle_02: 'width: 150px;height: 50px;background-color: blue;'},
})

示例图：

更多用法 有兴趣可以看看：

总结：简单来说就是 标签上的属性要动态改变的时候就用 v-bind 去绑定它 说白了就是给它加个冒号后面跟上自己的变量值;

v-model

说明

• v-model 是一种语法糖 嗯 有点甜 通俗点说就是 综合后的方便写法 让使用者 更轻松 便捷
• 使用场景如： input、textarea以及select元素上创建双向数据绑定

示例：

测试变量count:{{ count }}
点击改变count

var app = new Vue({el: '#app',data: {message: 'Hello World!',count: 0,},methods: {countFun() {this.count++}}
})

上面代码做了什么 我们 一点一点分析
1 input 标签 用 v-model 绑定了 count 变量
2 div 标签 引用了 count 变量 以作显示方便观察
3 button 按钮 绑定了 countFun 方法
接下来看看运行结果

当 点击 按钮 触发 countFun 方法时 count 变量加一 此时 input 和 测试变量数字也自动加一了
如果只是使用的话，通过上面就已经可以了，要纠其原理，还得接着往下看

原理

可以看到 上面代码 input 里修改内容时 测试变量数字 也是相应改变！！！注意噢！ input 标签可是没有绑定 任何 事件 或者 监听的噢
只有一个 v-model 双向绑定，接下来看看 v-model 原理

原理解析： 利用 input 标签的 @input / change 方法改变变量 count， 而这个变量同时被 div 引用了， 且 也被 input 标签的 v-bind:value=“count” 引用；接下来看看 v-model 效果的原始方法

  
不使用 v-model 测试变量count:{{ count }}
不使用 v-model 点击改变count

var app = new Vue({el: '#app',data: {message: 'Hello World!',count: 10086,},methods: {countFun() {this.count++},inputFun(e) { // 以 @input 绑定的 inputFun 方法(事件) 通过 e（event）拿到输入的值 赋值给 countthis.count = e.target.value}}
})

接下来看一下 示例结果：

以上示例结果可以清楚的看到 和 使用 v-model 并无差别，v-model 原理到这里就是这样了 so easy！

提示： 如果你面试简历写了 vue 项目，那 v-model 原理很大概率会问的

以上就是 vue 常用的一些指令 但不包括所有
比如： v-else-if v-slot v-cloak v-once 等等这些 目前用不到，感兴趣可以自己查看

本篇完

• 下一篇>>

感言

谢谢您的耐心阅读 有不足之处 望各位看官指正 三连必回
在 vue 的长河里我们一起遨游 让我们拥有了共同的目标
在此祝您 步步高升！