Vue基础

最新推荐文章于 2024-05-06 21:59:50 发布

XieYZSND

最新推荐文章于 2024-05-06 21:59:50 发布

阅读量794

点赞数

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

本文链接：https://blog.csdn.net/weixin_51327185/article/details/128412075

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.Vue简介

Vue是一个MVVM框架。它是一套用于构建用户界面的渐进式框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js的作者为Evan You（尤雨溪），早年任职于Google Creative Lab。现在全职维护 Vue 框架。

Vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

二.MVVM框架

MVVM框架分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

M：模型层，主要负责业务数据相关；

V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；

VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

因为电脑安装过vue脚手架了就不写教程了

三.hello world程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>

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

<script>
//创建一个Vue实例
Vue.createApp({
template: '<p>Hello World</p>' //Vue容器中的模板内容
}).mount("#app") //Vue实例使用mount()方法挂载到根组件上
</script>
</body>
</html>

四.vue的基本语法

1.文本渲染指令

v-text：更新元素的innerText
v-html：更新元素的innerHTM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>

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

<script>
//创建一个Vue实例
Vue.createApp({
template: '<p>Hello World</p>' //Vue容器中的模板内容
}).mount("#app") //Vue实例使用mount()方法挂载到根组件上
</script>
</body>
</html>

2.属性绑定指令

v-bind

<body>
<div id="app">
<div v-bind:title="msg">DOM元素属性绑定</div>

<div :title="msg">DOM元素属性绑定</div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
msg:'Hello World!'
}
}
}).mount('#app');
</script>
</body>

上面展示的是v-bind的最基本的使用，第一种是完整语法，第二种是缩写方式。

v-bind简写就是:

除了将元素的title属性和vue实例的相关字段进行绑定外，还能将其他的属性字段进行绑定，最常见的是对于样式的绑定，即class和style属性。

3.事件绑定指令

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。

v-on指令可以简写为：@

<body>
<div id="app">

<button v-on:click="pointme">点击我</button>

<button @click="pointyou">点击你</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//methods:此处声明Vue方法
methods: {
pointme() {
alert('点击了我');
},
pointyou() {
alert('点击了你');
}
}
}).mount('#app');
</script>
</body>

4.条件渲染指令

条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。

4.1.v-if指令

当v-if的值为false时，网页中将不会对此元素进行渲染

<body>
<div id="app">
<div v-if="isShow">DOM元素的样式绑定</div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
isShow: false
}
}
}).mount('#app')
</script>
</body>

4.2.v-if指令和v-show指令

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 是简单地切换元素的 CSS 属性 display 。

<body>
<div id="app">
<div v-if="isShow">这里是v-if</div>
<div v-show="isShow">这里是v-show</div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
isShow: false
}
}
}).mount('#app');
</script>
</body>

区别：

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
v-if有很高的切换开销，适用于条件不太容易改变的时候
v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
v-show有很高的初始渲染开销，适用于非常频繁地切换

XieYZSND

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

Vue是一个MVVM框架。它是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js的作者为Evan You（尤雨溪），早年任职于Google Creative Lab。现在全职维护 Vue 框架。Vue.js - 渐进式 JavaScript 框架 | Vue.js。
复制链接

扫一扫