vue基础（总结很详细）

快乐就好ya

于 2024-10-10 11:43:43 发布

阅读量540

点赞数 12

分类专栏： vue 文章标签： html5 css3 vue vue.js

本文链接：https://blog.csdn.net/m0_63233901/article/details/142817028

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue 基础

1. vue 是什么？

Vue.js （读音 /vju ː /, 类似于 view ）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

官网地址 API ： https://cn.vuejs.org/v2/guide/index.html

2. MVVM 是什么？

MVC 拆分解释：

视图（ View ）：用户界面。

控制器（ Controller ）：业务逻辑

模型（ Model ）：数据保存

MVC 通信方式

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View ，用户得到反馈

MVC 框架局限性

View 里会包含业务逻辑

View 当中的业务逻辑无法重用

模型的代码少，控制器的代码却是越写越多

MVVM 拆分解释：

Model: 负责数据存储

View: 负责页面展示

View Model: 负责业务逻辑处理（比如 Ajax 请求等），对数据进行加工后交给视图展示

3. 为什么要使用 MVVM

1. 低耦合。视图（ View ）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同

的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变

2. 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ ViewModel ），设计人员可以专注

于页面设计

5. Vue.js 起步

实现步骤

第一步：下载 Vue.js 库并引入

<script type="text/javascript" src="vue.js"></script>

第二步：创建 view 视图

<div id="box"> //确定一个范围，表示此范围内部都是 vue解析出来的
<h1> {{ msg }} </h1>
</div>

第三步通过 Vue 实例化一个 vue 对象


var vm = new Vue({
el: '#box', // el：‘选择器’
data: {
msg: 'hello, world!'
},
// 实例中，可以设置很多配置项
});

第四步使用数据

将 data 中变量 msg 放在 #box 内的双花括号内

修改 data 中的 msg ，会同步显示在页面中

实现原理分析

DOM 监听

视图层发生变化， DOM 监听到之后，会传到逻辑层进行处理

数据绑定

逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层

6. 插值表达式

使用双大括号来包裹 js 代码构成插值表达式 , 如： {{msg}}

插值表达式将双大括号中的数据替换成对应属性值进行展示 , 也叫模板语法

插值表达式中可以写入哪些内容？

1. JSON 数据

<div id="wzy">
<p>{{obj.name}}</p>
</div>
<script>
new Vue({
el: '#wzy',
data: {
message: 'hello world',
obj:{ //插入json数据
name:'tom',
age:20
}
}
})
</script>

2. 数字 <p>{{ 10 }}</p>

3. 字符串 {{ "wzy" }}

4. 表达式 <h1>{{ 2>3?'true':'false' }}</h1>

注意：在表达式中可以调用 js 函数。如 {{msg.charAt(0)}}

7. Vue 指令

什么是 Vue.js 指令

指令（ Directive ）是特殊的带有 v- 前缀的特性

7.1 v-if 指令

被称为条件渲染指令，它根据表达式的真假来插入和删除元素

v-if = ' 表达式 '

根据表达式结果的真假，确定是否显示当前元素

true 表示显示该元素； false 表示隐藏该元素

<div id="wzy">
<p v-if="isShow">表达式的值为真，我就能显示</p>
</div>
var app3 = new Vue({
el: '#wzy',
data: {
isShow: true
}
})

7.2 v-else 指令

v-else 指令为 v-if 添加一个 “else 块 ” ， v-else 元素必须立即跟在 v-if 元素的后面，否则不能被识别

v-else 后面不需要表达式

v-if 为 true ，后面的 v-else 不会渲染到 HTML

v-if 为 false ，后面的 v-else 才会渲染到 HTML

<body>
<div id="wzy">
<h1 v-if="isShow">表达式的值为真，我就能显示</h1>
<h1 v-else>v-if不成立的时候，我就显示出来了</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#wzy',
data: {
isShow: false
}
})
</script>

7.3 v-show 指令

控制切换一个元素的显示和隐藏

v-show = ‘ 表达式 ’

根据表达式结果的真假，确定是否显示当前元素（ true 表示显示该元素； false 表示隐藏该元素）

<div class="div1" v-show='isShow'></div>

v-if 与 v-show 区别

v-show 指令的元素始终会被渲染到 HTML

它只是简单地为元素设置 CSS 的 style 属性。当不满足条件的元素被设置 style="display:none" 样式

v-if 指令满足条件是，会渲染到 html 中，不满足条件时，是不会渲染到 html 中的

v-if 与 v-show 应用场景

v-if 指令有更高的 切换消耗

v-if 当条件成立的时候会将元素加上，不成立的时候，就会移除 dom ，并且内部的指令不会执行

v-show 指令有更高的 初始渲染消耗

v-show 只是简单的隐藏和显示

如果需要频繁切换使用 v ‐ show 较好，如果在运行时条件不大可能改变使用 v ‐ if 较好

7.4 v-on 指令

为 HTML 元素绑定事件监听

v-on ：事件名称 =‘ 函数名称 ()’ 或 @ 事件名称 =‘ 函数名称 ()’

<button v-on:click='fn()'>toggle</button>
//v-on: 可以简写成 @
<button @click='fn()'>toggle</button>
<body>
<div id="wzy">
<a v-on:click="show()">点击测试</a>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#wzy',
data: {
},
methods: {
show:function(){
alert("测试");
}
}
})
</script>

注意：函数定义在 methods 配置项中

案例：

<style type="text/css">
.div1 {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
</style>
<body>
<!-- view -->
<div id="box">
<!--第一种：click事件直接绑定一个方法，没有参数情况下，方法后面的括号可以去掉-->
<!-- <button v-on:click='fn()'>toggle</button> -->
<button v-on:click='fn'>toggle</button>
<!-- v-on: 可以简写成 @ -->
<!-- <button @click='fn()'>toggle</button> -->
<br/>
<div class="div1" v-show='bol'></div>
<!--第二种：传参情况下，click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 实例化对象
var vm = new Vue({
el: '#box',
data: {
// 数据
bol: false
},
// 事件统一写在methods里面
methods: {
fn: function() {
this.bol = !this.bol;
},
say: function(msg) {
alert(msg);
}
}
});
</script>

< 7.5 v-model 指令

能轻松实现表单输入和应用状态之间的 双向绑定

双向绑定

指的是我们在 vue 实例中的 data 与其渲染的 dom 元素上的内容保持一致，两者无论谁被改变，另

一方也会相应的更新为相同的数据

v-model = ‘ 变量 ’

v-model 指令只能用在

</span></p><pre>等这些表单元素

上


<body>
 <div id="box">
        <input type="text" v-model='msg'></input>
        <h1>{{ msg }}</h1>
        <!-- 
            v-model:进行双向绑定的（把用户输入的内容，同步显示在页面上）
            语法：v-model='变量'
            注：使用在表单元素上（常用在 type类型为text 上）
 -->
    </div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            msg: 'hello'
       }
   });
</script>

7.6 v-bind 指令

v-bind 可以在其名称后面带一个参数，参数通常是 HTML 元素的特性（ attribute ）， v-bind 是动态绑定指令，默认情况下自带属性的值是固定的，为了能够动态的给这些属性添加值可以使用v-bind 指令

v-bind: 属性名 = ‘ 表达式 ’

简写形式： v-bind 可以省略，直接书写为 : 属性名 = ‘ 表达式 ’

<img v - bind:src="imageSrc"> 等价于 <img :src="imageSrc"> // 绑定一个属性

<div id="box">
<!-- 第一种：图片的url地址 -->
<img v-bind:src="imageSrc">
<!-- 第二种：动态类名 v-bind：class={类名：表达式} -->
<div v-bind:class="{ divclass: isRed }"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
// 第一种：图片地址
imageSrc: "images/1.png",
// 第二种：class类名
isRed: true
}
});
</script>

7.7 v-for 指令

遍历 data 中的数据，并在页面进行数据展示

v-for = ‘(item, index) in items’

1. item 表示每次遍历得到的元素

2. index 表示 item 的索引，可选参数

3. items 表示数组或者对象

<body>
<div id="app">
<ul>
<!-- 1、遍历对象
value ：表示对象的属性值
key ：当前对象的属性名
index：当前对象的索引值
-->
<!-- <li v-for="(value, key, index) in person">
{{index}} - {{key}} - {{value}}
<br>
</li> -->
<!-- 2、遍历数组
item: 代表遍历的每一个数组对象
index：当前数组对象的索引值
-->
<!-- <li v-for="(item,index) in lesson">
{{index}} - {{item.name}} - {{item.type}}
<br>
</li> -->
<!-- 3、双层嵌套
把课程中内容遍历出来
-->
<!-- <li v-for="(item,index) in lesson">
<span v-for="(childValue,index) in item.type">
{{index}} - {{childValue}} <br>
</span>
</li> -->
<!-- 4、key 属性 ：更高效的去重用和重新排序现有元素
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每
项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单
key的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 ，这里使用简写形式完成
-->
<li v-for="(item,index) in lesson" :key="index">
<!-- 这的 index是 唯一的存在，可以使用，如果有其他的也可以使用 -->
{{index}} - {{item.name}} - {{item.type}}
<br>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
person: {
name: 'zfpx',
age: 7,
},
lesson: [
{ name: '前端三大块', type: ['HTML', 'CSS', 'JavaScript'] },
{ name: '前端三大框架', type: ['vuejs', 'react', 'angularjs'] },
]
}
});
</script>

8. 总结

v-if ：根据表达式的真假来插入和删除元素

v-else ： v-else 指令为 v-if 添加一个 “else 块 ”

v-show ：控制切换一个元素的显示和隐藏

v-on ：为 HTML 元素绑定事件监听

v-model ：将用户的输入同步到视图上

v-bind ：绑定 HTML 元素的属性

v-for ：遍历 data 中的数据，并在页面进行数据展示

vue 优点

简洁： HTML 模板、 Vue 实例、 JSON 数据

轻量： 35K ，性能好

渐进式：边学边用