Vue基础知识总结

最新推荐文章于 2022-09-14 11:14:31 发布

xsqsharp

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量447

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xsq123/article/details/125396543

版权

vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

本文介绍了Vue.js的基础概念和核心特性，包括如何创建第一个Vue页面、数据绑定的多种形式（如内容绑定、属性绑定、v-for循环、条件渲染v-if/v-show）以及事件处理的v-on指令。通过比较Vue与原生JavaScript，强调了Vue在减少DOM操作上的优势，使开发者能更专注于数据和业务逻辑。

摘要由CSDN通过智能技术生成

一、初识vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

第一个vue页面

通过通过上面的 vue 案例，总结 vue 的使用方法如下：

创建dom结构，作为vue实例挂载点，vue实例中的所有数据只能在此dom范围内使用

<div id="app"></div>

通过 new Vue 创建 vue 实例
el 属性指定当前 vue 实例的挂载点
data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中访问data数据
可以通过插值表达式使用 data 中的数据
vue和原生js对比
案例需求：将文本框输入的内容实时显示到页面上

vue代码

<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>

原生js代码

<div>
<input type="text">
<p></p>
</div>
<script>
var input = document.querySelector("input");
var p = document.querySelector("p");
input.addEventListener("keyup", () => {
p.innerHTML = input.value;
});
</script>

对比结果
vue 中不用操作 dom 元素，这可以让开发者将经历集中到数据处理及业务逻辑开发中

二、数据绑定
所谓数据绑定，就是将 vue 实例中的 data 属性中的变量显示到挂载点(dom结构)中

内容绑定
将 data 中的数据显示成内容（开始标签与结束标签之间）使用 {{}}

<div id="app">
<p>{{title}}</p>
</div>

上面只能显示纯文本，如果要显示 html 内容，需要使用 v-html 指令

<p v-html="content"></p>

属性绑定
将data中的数据作为某个元素的属性的值，使用 v-bind:属性名称指令，属性可以是内置，也可以是自定义的

<p v-bind:id="id">{{title}}</p>

v-bind: 可以缩写为 :

<p :id="id">{{title}}</p>

表单控件的值
可以用 v-model 指令在表单、及元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

表单类型   绑定的值
v-mode:text   绑定的值是value
v-mode:textarea   绑定的值是innerHTML
v-mode:radio   绑定的值是value
v-mode:checkbox/select(单选)   绑定的值是布尔值
v-mode:checkbox/select(多选)   绑定的值是数组
循环遍历
v-for遍历数组

作用：根据数组中的元素遍历指定模板内容生成内容
语法：

<ul>
<li v-for="(item, index) in name">
{{index+1}}.{{item}}
</li>
</ul>

v-for遍历对象

作用：根据数组中的元素遍历指定模板内容生成内容
语法：

<ul>
<li v-for="(value, key, index) in info">
{{index+1}}.{{value}}
</li>
</ul>

条件渲染
vi-f与v-else-if与v-else
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>

v-show
v-show的用法和v-if非常相似,也用于决定一个元素是否渲染

<h2 v-show="isShow">{{message}}</h2>

v-if 和 v-show对比

v-if 当条件为false时,压根不会有对应的元素在DOM中
v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已
开发中如何选择呢?
当需要在显示与隐藏之间切换很频繁时,使用v-show
当只有一次切换时,通过使用v-if
样式处理
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可
vue操作class

class 与 v-bind:class 可以共存，但是其实最终操作的都是元素的 class 属性
v-bind:class 的值可以是字符串、对象或者数组
对象语法的含义是:class后面跟的是一个对象

<h2 :class="{'active': isActive}">Hello World</h2>

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

数组语法的含义是:class后面跟的是一个数组

<h2 class="title" :class="['active','news']">{{message}}</h2>
<h2 class="title" :class="[active,news]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>

vue操作style

对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"

数组语法
<div v-bind:style="[baseStyles, fontColor]"></div>
//js
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}

事件绑定
js 中可以通过 addEventListener 的方式为元素注册各种事件类型
vue 中通过 v-on 指令为元素注册事件监听

<button v-on:click="greet">按钮</button>
<script>
let app = new Vue({
el: '#app',
data: {
},
methods: {
greet: function () {
console.log('初辰')
}
}
})
</script>

计算属性和选择器
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}，将上面代码转换成计算属性