vue的简单认识和使用

什么是Vue?

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

Vue的使用

1.引入vue

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

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

2. 创建Vue实例对象

在上面代码中，我们通过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简单的一些东西,有不足之处希望指出