Vue.js 入门

JavaScript018

Vue.js 入门,第1张

BootCDN(国内)

unpkg

cdnjs

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

进入项目,安装并运行:

打开localhost:8080

vue实例:

选项API:

https://cn.vuejs.org/v2/api/#components

组件化应用构建

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

指令邦定

指令

指令 (Directives) 是带有 v- 前缀的特殊属性

v-bind:

v-on:

v-if

v-for:

v-model:

数据,方法,计算属性,侦听器

生命周期

组件

全局注册

局部注册

组件组合

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。

prop 向下传递,事件向上传递

子组件要显式地用 props 选项 声明它预期的数据:

动态邦定prop

单项数据流

Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

自定义事件

每个 Vue 实例都实现了 事件接口 ,即:

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

这里有一个如何使用载荷 (payload) 数据的示例:

官方支持的 vue-router 库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

  在上一章节中,我们了解了Vue中的常用指令,同样,在本章节中继续讲解Vue中常用的指令,并且这些指令是针对语句使用的

  用于条件性的渲染一块内容,只有当条件的返回值为真时,才会渲染该块的内容,一般默认值是true

当设置ok为false时,div没有被渲染到浏览器中。

   要注意的是,为变量赋值Boolean类型时,不能加引号,加了引号就是字符串类型,字符串类型永远都为真

  如果v-if的条件不满足,将跳转到v-else-if,而当所有的v-else-if条件都不满足时,将会跳转到v-else。v-else-if、v-esle相当于v-if的一个分支

  当为type赋值A或者B时,就会将A或者B的div渲染到浏览器中,当条件都不满足时,就会渲染最后一个div到浏览器中。

   要注意的是,v-else 元素要跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

  v-show指令也是用于根据条件显示元素的指令,不同的是 v-show不支持v-else和<template>元素 ,并且带有 v-show 的元素 始终会被渲染并保留在 DOM 中 ,只是简单地切换元素的 CSS 属性 display。

  当one赋值为真时,div就会显示在浏览器中,当one赋值为false时,div就会隐藏在浏览器中。

4.1 渲染元素

  ① v-if :是 “真正 ”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

  ② v-show:不管初始条件是什么,元素总是会被渲染,并且只是 简单地基于 CSS 进行切换

4.2 渲染条件

  ① v-if :当条件结果为 时, 不对元素进行渲染 ,直到条件为 才将元素 渲染

  ② v-show: 不管初始条件是什么 ,都已经将 元素渲染 到浏览器中

4.3 运行条件

  ① v-if:更高的切换开销,适用在 运行时条件很少改变 的情况下

  ② v-show: 有更高的初始渲染开销。如果需要非常 频繁地切换 ,建议使用v-show

以上就是条件语句常用的四条指令:v-if,v-else-if,v-else,v-show

  在Vue中,for语句使用 v-for 的指令来操作,具体的结构如下:

  其中,site可以看做是某个特定的元素,而sites则是某个元素所在的集合,可以分成以下几类:

①通过对象的 属性 来迭代对象数据,其结构是: v-for =‘value in object’

② 通过 key-value 的方式迭代对象数据