1 Vue基础

性随事迁

已于 2022-04-27 10:58:01 修改

阅读量1.2k

点赞数 1

文章标签： vue

于 2022-04-27 10:54:47 首次发布

本文链接：https://blog.csdn.net/qq_63464941/article/details/124445254

版权

Vue基础

一、什么是Vue

1.1 概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
- 所谓渐进式，就是按需分配，用多少，就引入多少，由开发者自行决定
  - 既可以只使用Vue的核心功能，作为一个项目的视图层来应用
  - 也可以使用Vue全家桶开发，实现一个组件化、模块化、工程化的项目
- Vue全家桶
  - vue-cli
    - vue-cli就是快速建立搭建一个vue项目的脚手架工具
  - vue-router
    - vue-router 是一个官方的路由管理器, 用于实现页面组件之间的跳转
  - vuex
    - vuex 是一个基于vue的状态管理模式，以方便的实现组件之间的数据共享和集中管理
  - axios
    - axios 是一个基于 promise 的 HTTP 库，是vue官方推荐的ajax异步请求工具
  - vant
    - Vant 是一个轻量、可靠的移动端UI组件库, 由有赞前端团队开发并维护
  - element-ui
    - element-ui 是一个基于vue的桌面端UI组件库, 由饿了么前端团队开发并维护
- Vue中文官网
  - https://cn.vuejs.org/

1.2 特点

Vue 体积小，运行效率高，适合于移动/PC端开发
Vue简单易学，容易上手
Vue借鉴了angular的模板和数据绑定技术，可以轻松实现响应式编程
Vue借鉴了react的组件化技术，即提高了代码重用性，又易于维护和扩展性
Vue借鉴了react的虚拟DOM技术，采用diff算法实现页面更新，运行速度快

1.3 作者

Vue作者是尤雨溪
- 尤雨溪，Vue.js和Vite的作者，HTML5版Clear的打造人，独立开源开发者。
- 前Google员工，2014年2月，创作并开源了Vue.js
- 2016年宣布加盟阿里巴巴Weex团队担任技术顾问
- 尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯

1.4 版本

2014年2月25日，发布0.9.0
2015年10月27日，发布1.0.0
2016年4月27日，发布2.0
2020年9月18日晚 11 点半，发布3.0.0
- 为何不直接讲Vue3.0
  - 市场普及度不够，企业项目还是以2.X版为主
  - 新版本总会出现各种小错误，等反馈慢慢修复才会稳定
  - Vue3没有Vue2容易上手，掌握Vue2了再去学习Vue3会事半功倍

二、Vue起步

2.1 引入vue.js

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

Vue2最新版

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

Vue2压缩版：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

2.2 创建第一个Vue 应用

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

<!-- 准备好一个容器，容器中使用的是vue的模板语法 -->
<div id="app">
  {{ message }}
</div>

<script>
    // 创建vue实例
    const app = new Vue({
      // 绑定容器,作为该vue实例作用范围
      el: '#app',
      // 为容器提供数据  
      data: {
        message: 'Hello Vue!'
      }
    })
</script>

2.3 vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ipJ8rsh3-1651027041961)(images/image-20210708032045635.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OETYRzKd-1651027041962)(images/image-20210708031902135.png)]

2.3 响应式数据绑定

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
- 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
数据绑定最常见的形式就是使用双大括号（Mustache）语法：
```
<span> {{ message }}</span>
```
{{}}中使用 JavaScript 插值表达式
- 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
```
{{ number + 1 }} 

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
```

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

  <!-- 这是语句，不是表达式 -->
  {{ let a = 1 }}
  
  <!-- 流程控制也不会生效，请使用三元表达式 -->
  {{ if (ok) { return message } }}

2.4 MVVM

软件架构模式是那些由软件架构师通过持续实践，进而总结出的已验证过的优秀设计架构。复杂的软件必须有清晰合理的架构模式，否则无法开发和维护。
Vue采用MVVM软件架构模式
- M 模型（Model）：用于实现数据处理
- V 视图（View）：用于实现界面展示
- VM 视图模型（ViewModel）: 用于从Model中获取数据并响应给View的层
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gJCHBPrI-1651027041964)(images/image-20210708044208280.png)]

三、Vue指令

3.1 v-text

文本插值一般采用模板的插值表达式来实现
也可以通过v-text指令来实现
两都同时存在时只有v-text指令的生效

建议使用模板插值表达式来实现，减少v-text的使用

<div id="app">
    <p>{{ message }}</p>
    <p v-text="message"></p>
    <p v-text="message + 'aaa'">{{ message + 'bbb' }}</p>
</div> 
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue',
        }
    })  
</script>

3.2 v-html

默认情况插值表达式的内容会被解释为文本节点内容，这样html标签就无法正常显示，v-html指令可以解决这一问题

<div id="app">
    <p>{{ jd }} </p>
    <p v-html="jd"></p>
</div> 
<script>
    const vm = new Vue({
        el: '#app',
        data: {        
            jd: '<a href="http://www.jd.com">京东</a>'
        }
    })  
</script>

3.3 v-pre

v-pre是一个不需要值的指令，作用是跳过这个元素和它的子元素的编译过程，使用内容原样显示
```
<div id="app">
    <p v-pre>{{ message }}</p>
</div> 
```

3.4 v-once

v-once是一个不需要值的指令，作用是定义的它的元素或组件只能渲染一次。首次渲染后，不会再随数据的变化重新渲染。
```
<div id="app">
    <p v-once>{{ message }}</p>
</div> 
```

3.5 v-on

用来绑定事件监听器，实现交互效果

v-on:事件名

可以简写为 @事件名

<div id="app">
    <button @click="add(10)">增加</button>
    <div>counter : {{ counter }}</div>  
</div> 
<script>
    const vm = new Vue({
        el: '#app',
        data: {        
            counter: 0
        },
        methods: {        
            add(n){    
        		this.counter += n
            }
        }
    })  
</script>

3.6 v-bind

v-bind的基本用途是来绑定html元素属性，用法v-bind:属性名=“表达式”

v-bind:属性名

可以简写为 :属性名

<div id="app">
   <img v-bind:src="imgUrl">
   <img :src="imgUrl">
</div> 
<script>
    const vm = new Vue({
        el: '#app',
        data: {        
            logo: 'https://cn.vuejs.org/images/logo.svg'
        }
    })  
</script>

3.7 v-model

实现表单元素的双向数据绑定

<div id="app">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        }
    })
</script>

3.8 v-if

v-if…v-else-if…v-else

vue中的条件指令可以根据条件在DOM中渲染或销毁元素/组件

<p v-if="line == 1">第一行....</p>
<p v-else-if="line == 2">第二行....</p>
<p v-else>第三行....</p>
<script>
    const vm = new Vue({
        el: '#app',
        data: {        
            line: 1
        }
    })  
</script>

3.9 v-show

v-show的用法与v-if的用法基本一致，只不过v-show是改变元素的display属性进行显示和隐藏，当表达式的值为true时显示，为false时隐藏。
```
<p v-show="line == 1">第一行....</p>
<p v-show="line == 2">第二行....</p>
<p v-show="line !== 1 && line !== 2">第三行....</p>
```
v-if和v-show的选择
- v-if才是真正的条件渲染，它会根据条件表达式销毁或重建元素，
- v-show只是简单的css的display属性的切换，实现的是元素的显示和隐藏
- 相比之下，v-if更适合条件不经常改变的场景，因为它切换的开销相对较大，而v-show适合于频繁切换条件的场景

3.10 v-for

当需要循环遍历时就会用来v-for指令，它的表达式需要结合in来使用。有些类似于原生js中for…in的用法

<div id="app">
    <ul>
        <li v-for="item in books" :key="item.id">
        	<span>{{ item.name }}</span>           
        </li>
    </ul>
</div>
 <script>
     const vm = new Vue({
         el: '#app',
         data: {              
             books: [
                 {id:'001',name: '三国演义'},
                 {id:'002',name: '水浒传'},
                 {id:'003',name: '西游记'},
                 {id:'004',name: '红楼梦'},
             ]             
         }
     })  
</script>

v-for中的key属性：

使用v-for更新已渲染的元素列表时,列表数据修改的时候,会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素

作业：

请简单描述你对vue的理解
安装Vue Devtools
什么是MVVM
举例说是响应式数据的实现
举例说明10个Vue常见指令的作用
完成下图效果，输入任意字符串都转成相反顺序输出，比如“hello”转为“olleh”
思考题：使用vue实现如下学生信息录入系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RD0aitQA-1651027041964)(images/image-20211129170957033.png)]

性随事迁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1 Vue基础

Vue基础一、什么是Vue1.1 概念Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合所谓渐进式，就是按需分配，用多少，就引入多少，由开发者自行决定既可以只使用Vue的核心功能，作为一个项目的视图层来应用也可以使用Vue全家桶开发，实现一个组件化、模块化、工程化的项目Vue全家桶vue-c
复制链接

扫一扫