Vue的使用

Posted 2021-10-24 wangzhijing88

Vue

Vue.js是一套构建用户界面的渐进式框架，Vue采用自底向上增量开发的设计，Vue的核心库只关注视图层，更易于上手。

Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API,MVVM采用了双向绑定（data-binding）：view的变动，自动反映在ViewModel,反之亦然

Vue 框架有以下特点:

v 简洁： html 模板 + JSON 数据。

v 数据驱动： 自动追踪依赖的模板表达式和计算属性。

v 组件化： 用解耦、可复用的组件来构造界面。

轻量： ~24kb min+gzip，无依赖。

v 快速： 精确有效的异步批量 DOM 更新。

v 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

一、Vue  模板语法

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：

 

准备 html：

 

 

在 Vue 的 html 中使用{{}}来获取组件定义的 data 数据，页面中引用Vue.js 搭建好 Vue 环境,开始准备使用 Vue:

 

 

 

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,el(element)

代表要绑定 html 代码片段的根元素,data 定义该代码片段上绑定的数据。

1、插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

 

Mustache 标签将会被替代为对应数据对象上  message 属性的值。无论

何时，绑定的数据对象上  message 属性发生了改变，插值处的内容都会更新。

2 、javascript 表达式

在 Vue 模板中，提供了完全的 JavaScript 表达式支持

 

注意，只能在模板中写入表达式，而不能使用 js 语句，所以下面的写法会

报错:

 

二、指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1）文本渲染

1 、 v-text

在 html 中插入数据，跟{{}}功能一致：

响应属性：

除了在 Vue 组件内部定义 data 外，可以在外部定义一个对象，在内部直接引用。

 

2、v-once:
   只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

 

 

 

 

 

 

 

 

 

 

 

 

在控制台中修改 data 中 msg 的值会发现，使用 v-once 命令的元素不再发生变化。

 

3、v-html:
    把文本内容进行解析，生成 html 结构并渲染

 

 

2）class 与 与 style  绑定

1 、v-bind

v-bind 指令可以绑定元素的属性，动态给属性赋值。比如：v-bind:class、v-bind:style、v-bind:href 形式。

v-bind 的简写形式：v-bind:  简化为 : ，上边的形式可以改写成：:class 、:style 、:href

 

2 、class 绑定

通过 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }">我是一些文本</div>

绑定对象中 active 是 css 样式 class 的名称，isActive 控制是否添加样式，true添加 false 不添加。假定

 

 

绑定 DOM 对象的 class 样式有以下几种形式：

 

 

 

 

 

绑定的对象可以同时切换多个 class ：

 

 

 

 

 

 

 

 

 

 

 

 

 

可以直接传入 classObject ，不必写成内联形式：

 

 

 

 

 

 

 

 

 

 

 

 

 

可以使用数组传入一个 classList ：

 

实例：form 表单校验

 

3 、style 绑定

绑定形式跟 class 一致：

v  使用内联对象 Object

v  直接传入对象 styleObject

v  使用数组对象 styleList

内联对象形式：

直接传入对象 styleObject :

 

 

 

 

 

直接传入数组 array :

3）事件处理

1 、监听事件

用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。使用形式：v-on:click ，简化形式为@click

2 、方法事件处理器

一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。需要在 methods  属性中定义方法，然后 v-on 引用对应相关的方法名。

 

注意: 加括号与不加括号的区别？

 

3 、$event  对象

在事件处理函数中问 访问 DOM  原生事件 event  对象，可以使用特殊变量$event 对象传入。

 

4 、事件修饰符

在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为） 或event.stopPropagation()（阻止事件冒泡到父元素） 是非常常见的需求。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

stop ： 阻止 event 冒泡，等效于 event.stopPropagation()

v  prevent ： 阻止 event 默认事件，等效于 event.preventDefault()

v  capture ： 事件在捕获阶段触发

v  self ： 自身元素触发，而不是子元素触发

v  once ： 事件只触发一次

stop ：

 

 

 

点击上面的 li 会同时触发父元素 ul 的 click 的执行，所以会打印 2 次。点击下面的li 只打印 1 次，由于阻止了事件进行冒泡，所以只会触发 li 本身事件的执行

prevent  ：

此时点击<a>标签链接不会发生跳转,因为阻止了 a 标签的默认点击事件。

capture  ：

 

事件执行默认是在冒泡阶段触发，在点击上边的 li 时，先触发子元素 li 执行后触发父元素 ul 执行，打印：子元素 父元素。下边 ul 和 li 指定在捕获阶段触发，那么首先会触发父元素 ul 执行后触发子元素 li 执行，打印：父元素 子元素。

 

 

 

 

 

 

 

 

 

self ：

 

点击上边的 li 会触发父元素 ul 的执行，而下边不会，子元素点击不会触发父元素事件执行。

once ：

 

 

点击 li 触发事件的执行，只会触发一次，后续点击就不会触发了

5、键值修饰符

  在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

 

全部的按键别名：.enter

v .tab

v .delete (捕获“删除”和“退格”键)

v .esc

v .space

v .up

v .down

v .left

v .right

简单看一下 enter(13)和 delete 的使用：

 

3）条件渲染

1 、v-if

   根据 if 绑定值得 true 或者 false 进行渲染

 

控制设置 seen 为 false 则 HTML 元素被隐藏。

2 、v-else

   需要配合 v-if 使用，显示一个相反的情况。

3 、v-else-if

配合 v-if 一起使用，来做一个条件判断

 

4、v-show

根据条件渲染 html，使用类似 v-if

 

 

5 、v-if  和 v-show

两者的区别是 v-if 是“真正”的条件渲染，只有为 true 时才会被渲染。v-if 也是“惰性”的，假如初始条件为 false，那么条件变为 true 时才会发生第一次渲染。

v-show 只是 CSS 的 display 属性的切换，不论初始条件是否成立，都会进行 html渲染，然后改变 display 的值为 none 或者 block。

一般来说 v-if 开销比较大，如果需要频繁切换显示不显示使用 v-show，需要进行条件判断的但是改变很少的使用 v-if。

4）列表渲染

1 、v-for

可以把一组值进行列表渲染，语法形式： item in items，items 是源数据数组并且 item 是数组元素迭代的别名

           

 

 

 

 

在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

 

v-for 也可以遍历对象，可以指定三个形参:

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

v  value: 对象的值

v  key: 对象的键

v  index: 遍历的索引

 

2 、key 属性

用 v-for 渲染列表时， 使用 key 属性给每个指定一个唯一的 ID 表示，那么可以在下次数据渲染时，提高渲染速度。它默认用“ 就地复用”策略。

如果数据项的顺序被改变，重复 ID 的元素将会被再次使用，不会重新渲染。这个默认的模式是高效的。需要用 v-bind 来绑定动态值 (在这里使用简写)：

 

3、取值范围

v-for 也可以指定整数，用来重复多次使用模板。

 

 

 

 

5）表单输入绑定

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

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。

1 、文本 text

2、复选框

单个使用时 v-model 是逻辑值：true 和 false，多个一起使用需要指定 value 值，选中结果绑定 v-model 的数组。

 

3、单选框

 

4、选择列表

 

 

使用 v-for 指令渲染列表，增加选项的 value 并指定默认值。

6） 修饰符

使用 v-model 绑定数据后，可以使用修饰进行数据处理：

  .lazy：绑定数据默认实时更新，lazy 可以在 onChange 触发

.number：返回数字类型的值，转换不成返回 NaN

v .trim：去除数据的前后空格

三、组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

1 、定义组件

Vue 自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前 Vue 实例使用

1）全局注册

使用 Vue.component(tagName, options)来定义：

 

注意，HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用<my-component>进行引用。

2）局部注册

在 Vue 实例中使用 components  属性来定义：

2 、使用组件