详解 vue.js用法和特性

前  言

最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大。

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:

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

  这样就会输入:Hello Vue!

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

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

<div id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒,
 可以看到此处动态绑定的 title!
 </span>
</div>
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条件与循环

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

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

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

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

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

<div id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</div>
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>
  <div id="container">我的声明周期,大家看吧!</div>
 </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个阶段,,注意每个阶段都有对应的钩子,我们可以通过对这些钩子进行操作,达成一些功能。虽然初学者用不太上,但是提前了解一下还是好的,到时候碰到实际功能要能想得到生命周期的钩子。

总结

以上所述是小编个大家介绍的详解 vue.js用法和特性,希望对大家有所帮助!

时间: 2017-10-13

Vue.js自定义指令的用法与实例解析

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义

vue.js中$watch的用法示例

前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m

详解Vue.js 作用域、slot用法(单个slot、具名slot)

作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component> 这里的message就是一个slot,但是它绑定的是父组件的数据,而不是组件< child-component >的数据. 父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译. <div id="app"> <child-co

Vue.js展示AJAX数据简单示例讲解

最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

浅谈Vue.js中ref ($refs)用法举例总结

本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co

vue.js计算属性computed用法实例分析

本文实例讲述了vue.js计算属性computed用法.分享给大家供大家参考,具体如下: 需求:数据msg值为12345,我们现在需要反向显示成54321. 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> &l

js的Object.assign用法示例分析

本文实例讲述了js的Object.assign用法.分享给大家供大家参考,具体如下: 作用 Object.assign() 用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, -sources) 参数: target: 目标对象 sources:任意多个源对象 返回值 返回值为合并属性后的目标对象,即target. 示例1(属性值是值类型) var obj1 = { a:1 }; var obj2 ={ b:2 }

使用Bootstrap + Vue.js实现添加删除数据示例

界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="

使用vue.js实现联动效果的示例代码

想用vue.js写一个联动效果,按照自己的思路实验了下,并没有成功.请大家指点下我的思路是:通过遍历YX数组,如果某个对象的text和第一个select的selected value相同,则显示对应院系的专业 <div id="test"> <select v-model="A"> <option v-for="yx in YX"> {{yx.text}} </option> </select

JS+HTML5 FileReader对象用法示例

本文实例讲述了JS+HTML5 FileReader对象用法.分享给大家供大家参考,具体如下: FileReader 实例中有四个方法来读取文件数据 1.readAsBinaryString(Blob|File) 2.readAsDataURL(Blob|File) 3.readAsText(Blob|File) 4.readAsArrayBuffer(Blob|File) FileReader 实例包含很多事件(onerror, onprogress, onload[result]) <inp