1Vue基础

Vue基础

一、什么是Vue

1.1 概念

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

1.2 特点

• Vue 体积小&＃xff0c;运行效率高&＃xff0c;适合于移动/PC端开发

• Vue简单易学&＃xff0c;容易上手

• Vue借鉴了angular的模板和数据绑定技术&＃xff0c;可以轻松实现响应式编程

• Vue借鉴了react的组件化技术&＃xff0c;即提高了代码重用性&＃xff0c;又易于维护和扩展性

• Vue借鉴了react的虚拟DOM技术&＃xff0c;采用diff算法实现页面更新&＃xff0c;运行速度快

1.3 作者

• Vue作者是尤雨溪

  • 尤雨溪&＃xff0c;Vue.js和Vite的作者&＃xff0c;HTML5版Clear的打造人&＃xff0c;独立开源开发者。

  • 前Google员工&＃xff0c;2014年2月&＃xff0c;创作并开源了Vue.js

  • 2016年宣布加盟阿里巴巴Weex团队担任技术顾问

  • 尤雨溪大学专业并非是计算机专业&＃xff0c;在大学期间他学习专业是室内艺术和艺术史&＃xff0c;后来读了美术设计和技术的硕士&＃xff0c;正是在读硕士期间&＃xff0c;他偶然接触到了Javascript &＃xff0c;从此被这门编程语言深深吸引&＃xff0c;开启了自己的前端生涯

    

1.4 版本

• 2014年2月25日&＃xff0c;发布0.9.0
• 2015年10月27日&＃xff0c;发布1.0.0
• 2016年4月27日&＃xff0c;发布2.0
• 2020年9月18日晚 11 点半&＃xff0c; 发布3.0.0

  • 为何不直接讲Vue3.0

    • 市场普及度不够&＃xff0c;企业项目还是以2.X版为主
    • 新版本总会出现各种小错误&＃xff0c;等反馈慢慢修复才会稳定
    • Vue3没有Vue2容易上手&＃xff0c;掌握Vue2了再去学习Vue3会事半功倍

二、Vue起步

2.1 引入vue.js

• 直接下载并用


3.6 v-bind

• v-bind的基本用途是来绑定html元素属性&＃xff0c;用法v-bind:属性名&＃61;“表达式”

• v-bind:属性名

  • 可以简写为 :属性名

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


3.7 v-model

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

  {{ message }}

  
  
  




3.8 v-if

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

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

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


3.9 v-show

• v-show的用法与v-if的用法基本一致&＃xff0c;只不过v-show是改变元素的display属性进行显示和隐藏&＃xff0c;当表达式的值为true时显示&＃xff0c;为false时隐藏。

  <p v-show&＃61;"line &＃61;&＃61; 1">第一行....p>
<p v-show&＃61;"line &＃61;&＃61; 2">第二行....p>
<p v-show&＃61;"line !&＃61;&＃61; 1 && line !&＃61;&＃61; 2">第三行....p>


  v-if和v-show的选择

  • v-if才是真正的条件渲染&＃xff0c;它会根据条件表达式销毁或重建元素&＃xff0c;
  • v-show只是简单的css的display属性的切换&＃xff0c;实现的是元素的显示和隐藏
  • 相比之下&＃xff0c;v-if更适合条件不经常改变的场景&＃xff0c;因为它切换的开销相对较大&＃xff0c;而v-show适合于频繁切换条件的场景

3.10 v-for

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

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


  v-for中的key属性&＃xff1a;

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

作业&＃xff1a;

1. 请简单描述你对vue的理解

2. 安装Vue Devtools

3. 什么是MVVM

4. 举例说是响应式数据的实现

5. 举例说明10个Vue常见指令的作用

6. 完成下图效果&＃xff0c;输入任意字符串都转成相反顺序输出&＃xff0c;比如“hello”转为“olleh”

   

7. 思考题&＃xff1a;使用vue实现如下学生信息录入系统

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