Vue.js 入门

JavaScript020

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 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

https://unpkg.com/vue@2.5.3/dist/vue.js

来,直接开始:

创建一个 .html 文件,然后通过如下方式引入 Vue:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Vue.js 文档: https://cn.vuejs.org/v2/guide/

https://www.w3cplus.com/blog/vue

Vue 以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。

通常,我们不会去接触vue底层的东西,又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的,其实还是插件。

插件,你也可以理解为就是一套方法的集合,当我们需要调用它的时候,引入一下就行了。

举个例子,比如说,swiper和elementui。

一般来说,我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑,但是,网上能搜到了插件不一定能解决我们所有的问题。也就是说,我们剩下30%左右的逻辑部分是需要自己处理的,比如说,转化时间,处理字符串等等。

这些东西网上是没有现成插件的,需要我们自己来写。此时,如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件,事半功倍!

一般来说,我们自己的js通常会写成下面的两种形式:

第一种,声明多个方法。这个做法也叫函数声明,这样做的好处是,声明到全局,你只要引用了它,在页面任意地方都可以使用。但是同样的缺点也很明显,容易引起全局污染,浪费浏览器资源。而且当我方法多的时候,调用起来很不方便。

第二种,这是我们最长使用的声明方式,函数表达式。目的就是加载了这个js以后,当我需要使用的时候,直接调用str.xxx(),就可以返回我需要的内容了。并且,方法封装在变量内部,不会引起全局污染,也符合模块化的规则。

ok,ok。我们接下来,就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中,然后在main.js中引入。

调用起来是完全没有问题的。

但是,又好像哪里不太对?是的,这样我们仅仅是引入了一个js,并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式:

为什么他这个可以直接从this上面调用???

个人理解他的方法应该是被定义到全局的vue对象上面了,这里的this应该指的就是vue本身!

如果你看过龙哥前面的教程,你应该知道,当我们引入的插件,是一个对象的时候,应该使用:

use方法,可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件,按照下面的方式书写:

最后在页面中调用的时候:

到此我们的插件已经跟vue融为一体!其实插件本身还支持更多参数和写法,请各位同学自行研究吧!