什么是Vue?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

Vue的使用

1.引入vue

  • 可以直接在官网下载安装 链接地址

  • CDN的引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 创建Vue实例对象
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200225134515784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Njg1MDYz,size_16,color_FFFFFF,t_70
在上面代码中,我们通过new Vue()构建了一个Vue的实例。

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如:挂载元素(el)和数据(data),我们可以操纵数据改变视图。

el表示Vue要操作哪一个元素下面的区域,比如:#box则表示操作id为box的元素下面的区域;

data表示Vue实例的数据对象,data的属性能够响应数据的变化;每个 Vue 实例都会代理其 data 对象里所有的属性。

vue中的指令

  1. v-once 指令
    执行一次性地插值,当数据改变时,插值处的内容不会更新。

  2. v-if 指令
    条件渲染指令,根据表达式的真假来添加或删除元素。其语法结构是:v-if=“expression”,其中expression是一个返回bool值的表达式,其结果可以是true或false,也可以是返回true或false的表达式。

  3. v-show指令
    也是条件渲染指令,不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于:v-show是根据表达式之真假值,切换元素的 display CSS 属性,当条件变化时该指令触发过渡效果。

  4. v-else指令
    可以用v-else指令为v-if或v-show添加一个“else块”。注意:v-else前一兄弟元素必须有 v-if 或 v-else-if。

  5. v-for指令
    基于数据渲染一个列表,类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。

  6. v-text指令
    v-text:向标签中注入文本,且会替换掉元素之前的内容。

  7. v-html指令
    双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令

  8. v-bind指令
    动态地绑定标签中的一个或多个属性,或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数,中间用一个冒号隔开。这个参数通常是HTML元素的特性(attribute)
    在这里插入图片描述

  9. v-on指令
    动态地绑定一个或多个特性,或一个组件 prop 到表达式;其作用和v-bind类似。注意:如果用在普通元素上时,只能监听 原生 DOM 事件;但是如果用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

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

text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。

使用手法

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为,没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符,键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符,键代码 -->

<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->

<button v-on:click.once="doThis"></button>

补充内容

1、 数组的7个方法

pop:删除最后一个元素

push:插入到数组尾部

shift:删除数组的第一个元素

unshift:插入到数组的头部

splice:删除元素

sort:数组排序

reverse:数组翻转

2、数组和对象的遍历

v-for="(item,index) in list"

v-for="(value,key,index) in object"

以上就是vue简单的一些东西,有不足之处希望指出

Logo

前往低代码交流专区

更多推荐