Vue知识（一）Vue基础语法

2023-08-04 04:19| 来源: 网络整理| 查看: 265

Vue知识一、邂逅Vue.js1、认识Vue.js2、Vue.js安装方式3、Vue初体验4、Vue的MVVM框架二、Vue基础语法v-if指令v-show指令v-else指令v-for指令v-bind指令v-on指令v-model ❤v-once指令v-html指令计算属性ES6补充块级作用域letconst的使用对象增强写法数组哪些方法是响应式购物车案例Java高阶函数

一、邂逅Vue.js 1、认识Vue.js

Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据可复用的组件- 前端路由技术状态管理虚拟DOM

这些特点，在后面的学习和开发中都会慢慢体会到的。

学习Vuejs的前提？

从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。但是你需要具备一定的HTML、CSS、JavaScript基础。 2、Vue.js安装方式

CDN引入在这里插入图片描述

下载和引入在这里插入图片描述

NPM安装管理

通过webpack和CLI的使用 3、Vue初体验

创建Vue实例传入的options

el：类型：string （#app）| HTMLElement （document.querySelector）作用：决定之后Vue实例会管理哪一个DOM。 data：类型：Object | Function （组件当中data必须是一个函数）作用：Vue实例对应的数据对象。 methods：类型：{[key:string]:Function} 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

（1）Hello

{{message}} // let（变量）/ const（常量） // 编程范式：声明式 const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 message: "你好啊" } }) // 原生js的做法编程范式：命令式 // 1.创建div元素，设置id属性 // 2.定义一个变量叫message // 3.将message变量放在div元素中显示

（2）列表展示

{{item}} // let（变量）/ const（常量） // 编程范式：声明式 const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 movies: ['蜘蛛侠','钢铁侠','美国队长','大话西游'] } })

（3）计数器新的属性：methods，该属性用于在Vue对象中定义方法。新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）

当前计数：{{counter}} + - // let（变量）/ const（常量） // 编程范式：声明式 const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 counter: 0 } }) // 原生JS： // 1.拿button元素 // 2.添加监听事件

通过methods

当前计数：{{counter}} + - // let（变量）/ const（常量） // 编程范式：声明式 const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 counter: 0 }, methods: { add: function () { this.counter++ }, sub: function () { this.counter-- } } }) 4、Vue的MVVM框架

在这里插入图片描述 ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

View发生点击，ViewModel监听响应，回调Model中的js函数 View层：

视图层在我们前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。

Model层：

数据层数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。在我们数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

ViewModel层：

视图模型层视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

在这里插入图片描述

当创建了ViewModel后，双向绑定是如何达成的呢？首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

{{ message }} // 这是我们的Model var exampleData = { message: 'Hello World!' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model new Vue({ el: '#app', data: exampleData }) 定义View定义Model创建一个Vue实例或"ViewModel"，它用于连接View和Model 在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app’表示该Vue实例将挂载到...这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。 Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

模板template 在这里插入图片描述

二、Vue基础语法

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式。

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

v-if指令v-show指令v-else指令v-for指令v-bind指令v-on指令v-once指令 v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression" expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

Hello, Vue.js! Yes! No! Age: {{ age }} Name: {{ name }} var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) 注意：yes, no, age, name这4个变量都来源于Vue实例选项对象的data属性。这段代码使用了4个表达式：数据的yes属性为true，所以"Yes!"会被输出；数据的no属性为false，所以"No!"不会被输出；运算式age >= 25返回true，所以"Age: 28"会被输出；运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。

条件渲染小案例

用户登录时，可以切换使用用户账号登录还是邮箱地址登录切换时，input框要清空（如果缺少key的话，会导致切换时，输入框扔保存上一个类型的值） —— 先把要渲染的东西通过虚拟DOM放到内存里如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。这是因为Vue进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。解决方案：如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，并且我们需要保证key的不同。 Title 用户账号用户邮箱切换类型 const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 isUser: true }, methods: { changeType () { this.isUser = !this.isUser } } }) v-show指令

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性（display）。

Hello, Vue.js! Yes! No! Age: {{ age }} Name: {{ name }} 表达式age >= 29的值为false，可以看到Age: 29元素被设置了style="display:none"样式。 v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

Age: {{ age }} Name: {{ name }} ---------------------分割线--------------------- Name: {{ name }} Sex: {{ sex }} var vm = new Vue({ el: '#app', data: { age: 28, name: 'keepfool', sex: 'Male' } })

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。这段代码中v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else仍然渲染到HTML了。

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items" items是一个数组，item是当前被遍历的数组元素。

v-for遍历数组和对象

遍历数组 {{item}} {{index}}-{{item}} 遍历对象 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value {{item}} 2.获取key和value 格式：(value,key) {{value}}-{{key}} 3.获取key和value和index 格式：(value,key,index) {{value}}-{{key}}-{{index}} const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 items: ['why', 'kobe', 'james', 'curry'], info: { name: 'why', age: 18, height: 1.88 } } })

遍历对象

Name Age Sex {{ person.name }} {{ person.age }} {{ person.sex }} var vm = new Vue({ el: '#app', data: { people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] } })

我们在选项对象的data属性中定义了一个people数组，然后在#app元素内使用v-for遍历people数组，输出每个person对象的姓名、年龄和性别。

在这里插入图片描述

v-for绑定和非绑定key的区别组件的key属性官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

为什么需要这个key属性呢？（了解）

这个其实和Vue的虚拟DOM的Diff算法，对比有无变化。创建新的元素并插入位置，导致后面的也跟随更新。在这里插入图片描述

当某一层有很多相同的节点，也就是列表节点时，我们希望插入一个新的节点。（如下步骤，过于繁琐，效率低）我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E。

所以我们需要使用key来给每个节点做一个唯一标识（数组呢也要唯一元素，否则会报错）

Diff算法就可以正确的识别此节点找到正确的位置区插入新的节点在这里插入图片描述

key的作用主要是为了高效的更新虚拟DOM

v-bind指令

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class。 v-bind:argument="expression" 属性的动态绑定应用：

动态绑定a元素的href属性动态绑定img元素的src属性语法糖：:

v-bind的基本使用正确的做法

const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 imgURL: 'http://5b0988e595225.cdn.sohucs.com/images/20181004/25392110ac1b425db7fe698370449cf4.jpeg' } })

错误的做法

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章