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-cli
- Vue中文官网
- https://cn.vuejs.org/
- 所谓渐进式,就是按需分配,用多少,就引入多少,由开发者自行决定
1.2 特点
-
Vue 体积小,运行效率高,适合于移动/PC端开发
-
Vue简单易学,容易上手
-
Vue借鉴了angular的模板和数据绑定技术,可以轻松实现响应式编程
-
Vue借鉴了react的组件化技术,即提高了代码重用性,又易于维护和扩展性
-
Vue借鉴了react的虚拟DOM技术,采用diff算法实现页面更新,运行速度快
1.3 作者
-
Vue作者是尤雨溪
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)]