vue入门（Vue入门基础）

本篇文章给大家谈谈vue入门，以及Vue入门基础对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、36《Vue 入门教程》Vue 第三方库的使用
• 2、20《Vue 入门教程》Vue 插件
• 3、Vue.js入门教程（三）双向绑定和数据渲染
• 4、入门：Vue六大常用内置指令
• 5、Vue.js 入门

36《Vue 入门教程》Vue 第三方库的使用

本小节我们将带大家学习：如何在项目中使用第三方库。在日常的开发中，我们正在大量地使用第三方库。学会使用第三方库，可以说是前端工程师最基本的技能。其实，使用第三方库非常简单，绝大部分库的文档中都会教我们如何使用。

接下来我们用几个案例来学习使用第三方库。

我们打开 ElementUI 的官网，根据官网的教程一步步学习。

在 Vue-cli 创建的项薯猜目中，我们可以蚂手颤使用以下命令进行安装：

也可以通过 CDN 的方式在页面闷败上直接引入：

在 main.js 中写入以下内容：

此时，我们已经可以在项目中使用 Element 给我们提供的各种组件了。

我们可以改造 ‘views/Home.vue’ 中的内容：

同样地，要使用 Lodash，我们需要先通过 npm install --save lodash 安装 Lodash。在使用 lodash 之前，通过 import _ from "lodash" 引入 Lodash 包。此时，我们就可以在项目中使用 Lodash 给我们提供方法了：

本节我们带大家学习了如何在项目中使用第三方库。在使用第三方库之前，我们需要先通过 npm install 安装第三方库，然后在项目中利用 import 加载第三方库。

20《Vue 入门教程》Vue 插件

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 集合简肆了大量由社区贡献的插件和库。

Vue.js 的插饥薯件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们拦肢轿定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

[img]

Vue.js入门教程（三）双向绑定和数据渲染

既然清楚了原理，那么，接下来进入亩码缺正题——我知道了vue怎么安装，那么我怎么使用呢？

在告诉你基础用法之前，我还是要先告诉你一个情况。

可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。

他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。

所谓的双向绑定，你可以理解就是把view。（你还不清楚mvc的话，请看第一章）

和model绑定到模扮一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。

vue是通过解析{{文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。

列表输出使用 v-for，这些v开头加横杠的叫做命令

这些迅辩命令是可以自定义的。但是那都属于高级操作，我们不用它也完全足够支撑做一个大型项目了。

其实你回发现，这里无论是v-for或者是v-什么其他玩意

它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。

你记住这个用法，它就长这样。

前后端分离开发的关键在于：后台只提供接口。

我们获得的数据多数情况下，仅仅是一个json，而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解，数据的解析在mvc中，

是由后端完成的，而html只负责显示。

所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。

我们前端最厉害的地方不就是处理能看得见的东西吗？

入门：Vue六大常用内置指令

指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构

所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中

只能渲染纯文本内容， 会覆盖 标签内部原本的内容

只能渲染纯文本内容， 不会覆盖 标签内部原本的消虚内容

能将带标签的字符串渲染成html内容， 会覆盖 标签内部原本的内容

为元素的属性 动态 绑定属性值

注意： 插值表达式 和 v-bind 还支持javascript表达式的运算

为元素绑定事件

只要是事件，就能使用的修饰符，以下列举5个常用的

只能在触发键盘事件时，使用的修饰符，以下列举2个常用的

快速获取表单数据（只应用于表单元素，如：input、textarea、select）

只能给v-model使用的修扰伍饰符

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

配合 v-if 指令一起使用，否则将不会被识别

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个拿李燃 :key 属性

作者：用户2031777005900

链接：

Vue.js 入门

BootCDN（国内）

unpkg

cdnjs

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

进入项目，安装并运行：

打开localhost：8080

vue实例：

选项API：

组件化应用构建

声明式渲染

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入门基础的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。