Vuejs2.0 使用教程 - 简书
Vuejs2.0 使用教程
Vuejs2.0 使用教程简介：在本实验中你可以学到数据双向绑定，介绍vuejs的部分指令等等。适合有一些html和js经验的伙伴。
本教程由发布在，完整教程及在线练习地址：（更多课程请查看）
教程提纲：
第1节 开始使用 Vuejs 2.0
第2节 Vuejs的常用指令
第3节 Vuejs的第一个示例
第4节 Vuejs组件
第5节 vuejs 计算属性
第1节 开始使用 Vuejs 2.0
一、实验介绍
1.1 实验内容
本实验简单介绍Vuejs的概念，获取，和简单的例子，在实验中你可以体会到js的强大的功能，非常适合我们学习。
1.2 实验知识点
Vuejs双向绑定方法
Vuejs的v-model和v-text属性
1.3 实验环境
1.4 适合人群
本课程难度为一般，属于初级级别课程，适合具有html和js经验的小伙伴。
1.5 代码获取
本实验使用所有代码均已上传，可在实验楼环境中获取：
二、实验准备
打开终端，进入 Code 目录，将其作为课程的工作目录。
把代码下载到Code目录
三、实验步骤
3.1 什么是Vuejs
Vue.js（读音 /vju:/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vuejs 采用自底向上增量开发的设计。Vuejs 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vuejs 完全有能力驱动采用单文件组件和 Vuejs 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做,Vuejs在实现相同功能的时候更简单.
3.2 获取Vue.js
Vuejs中文官网地址
获取开发版本：
wget http://vuejs.org/js/vue.js
获取生产版本：
wget http://vuejs.org/js/vue.min.js
还可以使用vuejs的cdn
/vue@2.1.10/dist/vue.js
3.3 引入到代码中
使用vuejs需要把我们获取到的js文件引入到我们的代码中，这个和我们的普通的js文件引入格式一样。 因为在开发版本中会有很多友好的提示，因此我们引入开发版本的vue.js
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8" /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--下面为cdn引用方式，实验中我们使用下载好的vue.js
&script src='/vue@2.1.10/dist/vue.js'&&/script&--&
3.4 vuejs中的双向绑定
下面我们开始vuejs的双向绑定,大家看下代码
在Vuejs中变量在html中绑定标签是两个花括号{{变量}}
在vuejs中的获取页面中id不可以放在body和html标签里
vuejs启用的区域就在id为demo的div块中
3.4.1 vuejs数据绑定
创建vue-1.html并编辑为
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8" /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--下面为cdn引用方式，实验中我们使用下载好的vue.js
&script src='/vue@2.1.10/dist/vue.js'&&/script&--&
&!--定义一个id为demo的div--&
&div id="demo"&
&!--此处的msg为在vuejs中定义的变量，放在两个花括号中--&
&h1&Hello {{msg}}&/h1&
&!--实例化vuejs--&
&!--el指定的id为css选择器--&
el:'#demo',
&!--我们的变量统统放到data中--&
&!--此处声明的变量msg内容为实验楼--&
msg:'实验楼'
上面的代码实际上初始化了Vue，我们看里面两个属性；el表示在html中哪个部分起作用，语法类似jquery的节点选择器，在这里我们看到它选择了一个ID。
data属性就是我们要定义变量的地方：
msg:'实验楼' 我们定义了一对键值，很好理解。
数据定义好了，现在来“驱动”视图，body 标签里面加入：
&div id="demo"&
{{}}里面可以写Vue的数据变量，它会自动解析为html. 在浏览页面上显示hello实验楼,实验中我们把js代码都写到的了html中，我们也可以把所有的js代码封装到另一个js文件中。
现在我们知道了Vuejs的执行顺序
在页面引入Vuejs
实例化Vuejs
创建Vuejs的应用区域
填充绑定数据
3.4.2 vuejs数据双向绑定
下面我们来实现数据双向绑定的例子，我们使用vuejs的v-model属性
v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。
创建vue-2.html并编辑为
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8" /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--定义一个id为demo的div--&
&div id="demo"&
&!--此处的msg为在vuejs中定义的变量，放在两个花括号中--&
&h1&Hello {{msg}}&/h1&
&!--此处我们创建一个文本框并定义它的v-model的属性的内容为我们在vue中定义的msg--&
&input type="text" v-model="msg"&
&!--实例化vuejs--&
&!--el指定的id为css选择器--&
el:'#demo',
&!--我们的变量统统放到data中--&
&!--此处声明的变量msg内容为实验楼--&
msg:'实验楼'
页面效果如下
我们在改变文本框内容的同时，在h1标签中的msg也同时会改变。以后我们说双向绑定，都是指的是类似input这样的，自带change事件的表单项目。
3.4.3 vuejs中的v-text属性
在vuejs中可以使用v-text属性来控制整个标签的内容绑定，在vue-1.html中我们使用了{{msg}}在页面中绑定数据，另外我们也可以使用vuejs的v-text属性来绑定数据。 创建vue-3.html并编辑为
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8" /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--定义一个id为demo的div--&
&div id="demo"&
&!--此处的msg为在vuejs中定义的变量，放在两个花括号中--&
&h1&Hello {{msg}}&/h1&
&!--此处我们把v-text属性放到span标签中--&
&span v-text='msg'&hello shiyanlou&/span&
&!--实例化vuejs--&
&!--el指定的id为css选择器--&
el:'#demo',
&!--我们的变量统统放到data中--&
&!--此处声明的变量msg内容为实验楼--&
msg:'实验楼'
浏览效果如下
我们可以看到在span标签中的内容并没有被输出，输出的是我们在vue定义的变量msg的内容。v-text属性会把整个标签的内容绑定为我们定义的内容。
四、实验总结
通过本次实验，大家可以简单的了解了vuejs的使用方法，可以知道如何获取和引入vuejs，熟悉vuejs的双向绑定，希望可以帮到各位小伙伴。
五、参考链接
后续章节可以在查看：
第2节 Vuejs的常用指令
第3节 Vuejs的第一个示例
第4节 Vuejs组件
第5节 vuejs 计算属性
实验楼是专业的IT在线实训平台，不但提供海量的IT教程，更有在线开发环境，可以随时动手操作，实战式的学习IT这样如何正确使用Vue。js的组件_电脑数码_丸子百科网
这样如何正确使用Vue。js的组件
&&&来源:用户发布&&&发布时间:&&&查看次数:34
有人知道这样如何正确使用Vue。js的组件,谢啦。网友回答使用vue.js构造modal组件的方法是使用 v-mode*指令
电脑数码相关
更多相关内容
本站内容来自网友发布，本站无法保证其部分内容的正确性，请用户一定仔细辨别。如何在 Vue.js 中使用第三方库 - WEB前端 - 伯乐在线
& 如何在 Vue.js 中使用第三方库
在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.
本文将介绍一些在 Vue.js 中使用第三方库的方式.
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
window._ = require('lodash');
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
export default {&&created() {&&&&console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');&&}}
这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.
在每个文件中引入
另一个简单的方式是在每一个需要该库的文件中导入:
MyComponent.vue
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
import _ from 'lodash';&export default {&&created() {&&&&console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');&&}}
这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.
优雅的方式
在 Vuejs 项目中使用 JavaScript 库的一个优雅方式是讲其代理到 Vue 的原型对象上去. 按照这种方式, 我们引入 Moment 库:
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
import moment from 'moment';Object.defineProperty(Vue.prototype, '$moment', { value: moment });
由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此在所有组件/实例中都可以通过 this.$moment: 的方式访问 Moment 而不需要定义全局变量或者手动的引入.
MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
export default {&&created() {&&&&console.log('The time is ' . this.$moment().format("HH:mm"));&&}}
接下来就了解下这种方式的工作原理.
Object.defineProperty
一般而言, 可以按照下面的方式来给对象设置属性:
Vue.prototype.$moment =
Vue.prototype.$moment = moment;
可以这样做, 但是 Object.defineProperty 允许我们通过一个
来定义属性. Descriptor 运行我们去设置对象属性的一些底层(low-level)细节, 如是否允许属性可写? 是否允许属性在 for 循环中被遍历.
通常, 我们不会为此感到困扰, 因为大部分时候, 对于属性赋值, 我们不需要考虑这样的细节. 但这有一个明显的优点: 通过 descriptor 创建的属性默认是只读的.
这就意味着, 一些处于迷糊状态的(coffee-deprived)开发者不能在组件内去做一些很愚蠢的事情, 就像这样:
this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function
this.$http = 'Assign some random thing to the instance method';this.$http.get('/'); // TypeError: this.$http.get is not a function
此外, 试图给只读实例的方法重新赋值会得到 TypeError: Cannot assign to read only property 的错误.
你可能会注意到, 代理第三库的属性会有一个 $ 前缀, 也可能看到其它类似 $refs, $on, $mount 的属性和方式, 它们也有这个前缀.
这个不是强制要求, 给属性添加 $ 前缀是提供那些处于迷糊状态(coffee-deprived)的开发者这是一个公开的 API, 和 Vuejs 的一些内部属性和方法区分开来.
你还可能注意到, 在组件内是通过 this.libraryName 的方式来使用第三方库的, 当你知道它是一个实例方法时就不会感到意外了. 但与全局变量不同, 通过 this 来使用第三方库时, 必须确保 this 处于正确的作用域. 在回调方法中 this 的作用域会有不同, 但箭头式回调风格能保证 this 的作用域是正确的:
this.$http.get('/').then(res =& {
if (res.status !== 200) {
this.$http.get('/') // etc
// Only works in a fat arrow callback.
this.$http.get('/').then(res =& {&&if (res.status !== 200) {&&&&this.$http.get('/') // etc&&&&// Only works in a fat arrow callback.&&}});
如果你想在多个项目中使用同一个库, 或者想将其分享给其他人, 可以将其写成一个插件:
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);
import MyLibraryPlugin from 'my-library-plugin';Vue.use(MyLibraryPlugin);
在应用的入口引入插件之后, 就可以在任何一个组件内像使用 Vue Router, Vuex 一样使用你定义的库了.
写一个插件
首先, 创建一个文件用于编写自己的插件. 在示例中, 我会将 Axios 作为插件添加到项目中, 因而我给文件起名为 axios.js. 其次, 插件要对外暴露一个 install 方法, 该方法的第一个参数是 Vue 的构造函数:
export default {
install: function(Vue) {
// Do stuff
export default {&&install: function(Vue) {&&&&// Do stuff&&}}
可以使用先前将库添加到原型对象上的方法:
import axios from 'axios';
export default {
install: function(Vue,) {
Object.defineProperty(Vue.prototype, '$http', { value: axios });
import axios from 'axios';&export default {&&install: function(Vue,) {&&&&Object.defineProperty(Vue.prototype, '$http', { value: axios });&&}}
最后, 利用 Vue 的实例方法 use 将插件添加到项目中:
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);
created() {
console.log(this.$http ? 'Axios works!' : 'Uh oh..');
import AxiosPlugin from './axios.js';Vue.use(AxiosPlugin);&new Vue({&&created() {&&&&console.log(this.$http ? 'Axios works!' : 'Uh oh..');&&}})
彩蛋: 插件的可选参数
插件的 install 方法可以接受可选参数. 一些开发可能不喜欢将 Axios 实例命名为 $http, 因为这是 Vue Resource 提供的一个通用名字. 因而可以提供一个可选的参数允许他们随意命名:
import axios from 'axios';
export default {
install: function(Vue, name = '$http') {
Object.defineProperty(Vue.prototype, name, { value: axios });
import axios from 'axios';&export default {&&install: function(Vue, name = '$http') {&&&&Object.defineProperty(Vue.prototype, name, { value: axios });&&}}
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');
created() {
console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
import AxiosPlugin from './axios.js';Vue.use(AxiosPlugin, '$axios');&new Vue({&&created() {&&&&console.log(this.$axios ? 'Axios works!' : 'Uh oh..');&&}})
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线