首页 > js教程 > 正文

vue.js渐进式框架使用详解

原创 2018-04-17 14:51:27 0 173

这次给大家带来vue.js渐进式框架使用详解,vue.js渐进式框架使用详解的注意事项有哪些,下面就是实战案例,一起来看一下。

Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。

Vue.js目前已经更新到2.x,功能和语法上有一定升级和修改,本文首先介绍基础内容。

1、新手指南

  vue的使用非常简单,下载vue.js或vue.min.js直接导入即可使用。

2、vue初步入门

2.1声明式渲染

  Vue.js 的核心是,可以采用简洁的模板语法来声明式的将数据渲染为 DOM:

<p id="app">
 {{ message }}
</p>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

  这样就会输入:Hello Vue!

  我们已经生成了第一个 Vue 应用程序!这看起来和渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被关联在一起,所有的数据和 DOM 都是响应式的。我们如何对这一切清晰领会?只需打开你的浏览器的 JavaScript 控制台(现在,就在当前页面打开),然后设置 app.message 的值,你将看到上面的示例所渲染的 DOM 元素会相应地更新。

  除了文本插值(text interpolation),我们还可以采用这样的方式绑定 DOM 元素属性:

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒,
 可以看到此处动态绑定的 title!
 </span>
</p>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()  }
})

  鼠标悬停几秒后,就可以看到动态的提示。

  这里我们遇到一些新内容。你看到的 v-bind 属性被称为指令。指令带有前缀 v-,表示是由 Vue 提供的专用属性。可能你已经猜到了,它们会在渲染的 DOM 上产生专门的响应式行为。简而言之,这里该指令的作用就是:“将此元素的title 属性与 Vue 实例的 message 属性保持关联更新”。

  如果你再次打开浏览器的 JavaScript 控制台,并输入 app2.message = '一些新的 message',就会再次看到,绑定了title 属性的 HTML 已经进行了更新。

2.1条件与循环

 控制切换一个元素的显示也相当简单:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

  继续在控制台输入 app3.seen = false,你应该会看到 span 消失。

  这个示例表明,我们不只是可以将数据绑定到文本和属性,也可以将数据绑定到 DOM 结构。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时,自动使用过渡效果。

  还有其它一些指令,每个都具有各自不同的特殊功能。例如,v-for 指令,可以使用数组中的数据来展示一个项目列表:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</p>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

3 、vue实例

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

var vm = new Vue({
 // 选项
})

  尽管没有完全遵循 MVVM 模式,但是 Vue 的设计仍然受到了它的启发。作为约定,通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。

3.1data 和 methods

  在创建 Vue 实例时,会将所有在 data 对象中找到的属性,都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时,视图都会“及时响应”,并更新相应的新值。

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
 data: data
})
// 这里引用了同一个对象!
vm.a === data.a // => true
// 设置实例上的属性,
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

  每当 data 对象发生变化,都会触发视图重新渲染。值得注意的是,如果实例已经创建,那么只有那些 data 中的原本就已经存在的属性,才是响应式的。也就是说,如果在实例创建之后,添加一个新的属性,例如:

vm.b = 'hi'

  然后,修改 b 不会触发任何视图更新。如果你已经提前知道,之后将会用到一个开始是空的或不存在的属性,你就需要预先设置一些初始值。例如:

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

  除了 data 属性, Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $,以便与用户定义(user-defined)的属性有所区分。例如:

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回调函数将在 `vm.a` 改变后调用
})

3.2vue实例的声明周期

  vue实例的声明周期是一个很重要的概念,理解之后可以通过它实现很多功能。

  看下这段代码。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p id="container">我的声明周期,大家看吧!</p>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
  //以下代码时显示vm整个生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('创建vue实例前',this);
   },
   created: function(){
    showData('创建vue实例后',this);
   },
   beforeMount:function(){
    showData('挂载到dom前',this);
   },
   mounted: function(){
    showData('挂载到dom后',this);
   },
   beforeUpdate:function(){
    showData('数据变化更新前',this);
   },
   updated:function(){
    showData('数据变化更新后',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue实例销毁前',this);
   },
   destroyed:function(){
    showData('vue实例销毁后',this);
   }
  });
  function realDom(){
   console.log('真实dom结构:' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 数据:' + obj.test)
   console.log('挂载的对象:')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

  通过控制台的打印效果可以看出来,实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段,,注意每个阶段都有对应的钩子,我们可以通过对这些钩子进行操作,达成一些功能。虽然初学者用不太上,但是提前了解一下还是好的,到时候碰到实际功能要能想得到生命周期的钩子。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

ajax与jsonp的使用详解

Vue 2.0内部指令

前端开发中的多列布局实现方法

以上就是vue.js渐进式框架使用详解的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript Vue.js 特性
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    条评论

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • php中世界最好的语言

      全栈工程师

    • 认证0级讲师
    • 7047篇
      文章总数
    • 173
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新