欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

详解 vue.js用法和特性

程序员文章站 2022-03-21 21:45:25
前  言 最近用vue.js做了一个数据查询平台，还做了一个拼图游戏，突然深深的感到了vue的强大。 vue.js是一套构建用户界面(user interfa...

前  言

最近用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.js用法和特性

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

总结

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

上一篇： vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

下一篇： jQuery实现的鼠标滚轮控制图片缩放功能实例

推荐阅读