Vue.js中基础指令的示例分析

这篇文章给大家分享的是有关Vue.js中基础指令的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司成立于2013年，我们提供高端网站建设、重庆网站制作、成都网站设计、网站定制、网络营销推广、小程序设计、微信公众号开发、网站推广服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为地磅秤企业提供源源不断的流量和订单咨询。

Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的，所以和前者的语法特别相似，却又使用简洁了很多。

那今天，我就给大家详细的说道说道这个 Vue.js ，以下是我们这次详解的目录，朋友们可以根据自己的情况选择性阅读，所有操作均附有代码实现。

1. Vue.js 如何绑定到页面中，使用他的功能。

2. Vue 实例化对象的生命周期。

3. Vue 的所有数据绑定指令

1. Vue.js 如何绑定到页面中，使用他的功能。

先看下面的一段代码：



 
 
 
 
  
 我是app1，点我
 
 
 
 
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",
  data:{
  message:"我在app1中显示出来了吗？",
  func:function(){
   alert(this.message);
  }
  }
 });
 console.log(app1.$data.message); 

 //这个要知道哈，app1就是一个变量，一个对象类型的变量，链式语法直接用即可

效果如下：

Vue.js中基础指令的示例分析

上述代码就是点击按钮有弹窗，下面解析一下这段代码。

var app1= new Vue({
 el:"#app1",
 data:{
 message:"我在app1中显示出来了吗？",
 func:function(){
  alert(this.message);
  }
 }
 });
console.log(app1.$data.message);

通过Vue.js的构造函数实例化出一个根实例 app1 ，说白了，这就是我们面向对象的对象的实例化，直接 new 一个对象。

el:"#app1", 这是在挂载我们实例化对象的元素节点，就是这个app1 对象作用域是那一个标签里面的。这里可以是 id、class、tagname。但是主要还是用id，因为他的唯一性。

data:{} 是定义这个对象的变量和方法，注意所有在和 app1 有关联的变量、方法都必须在data中声明。

注意：

(1)作用域。js5 只有函数作用域，所以 data 中的函数如果想调用变量，就必须通过 this. 调用，或者直接通过对象名调用。

(2)外部调用。app1.$data.message；在js中直接调用 vue 对象的属性、方法时，需要链式语法，一层层点出来，这里用 $data ，主要还是和js的变量作区别

(3)与HTML代码的绑定。这里我是通过 js 的onclick直接绑定的，当然 vue 有自己的事件绑定，这里暂且不讲，如果用 js 的行内绑定，注意需要带对象名。这就是纯 OOP思想了。相信大家对面向对象也不陌生，如果真的不知道是啥玩意的，赶紧百度学去。

以上就是最最最最最最.....基础的使用 vue 的方法了。

2. Vue 实例化对象的生命周期。

接下来，我们说一下，一个实例化出来的对象，他的生命周期是啥样的，要经历那些阶段。请看下面一段代码：



 
 
 
 
 

 我的声明周期，大家看吧！

//以下代码时显示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('------------------') }

那接下来看看效果图：

Vue.js中基础指令的示例分析

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

3. Vue 的所有数据绑定指令

那现在我们就总结一下 vue 的最大亮点，各种灵活的数据绑定方法。这里主要列举实例详解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。

（1）首先是 {{}} 、 v-once 、 v-html 的用法，请看下面的代码：



 
 
 数据绑定篇
 
 
 
 

  
  点我，改变变量message的值
  
  
  
  {{message}}

  
  {{message}}

数据绑定篇 .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; }

-------------------------------------------------------------------------------------

//通过Vue.js的构造函数实例化出一个根实例 var app1= new Vue({ el:"#app1", data:{ myColor:"blue", myWidth:100, myHeight:100, myClass:"aaa", mySrc:"img/2.png", func1:function(){ if (this.myColor == "blue") { this.myColor = "red"; this.myWidth = 50, this.myHeight = 50 }else{ this.myColor = "blue"; this.myWidth = 100, this.myHeight = 100 } }, func2:function(){ if (this.myClass == "aaa") { this.myClass = "bbb"; }else{ this.myClass = "aaa"; } }, func3:function(){ if (this.mySrc == "img/2.png") { this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg"; }else{ this.mySrc = "img/2.png"; } } } });

数据绑定篇 .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; }

{{ myText }} -------------------------------------------------------------------------------------

男

  女
  您选择了: {{ picked }}

  -------------------------------------------------------------------------------------

  好帅！      你是我的男神！      我爱你，飞哥！
  您对飞哥的评价: {{ names }}

  --------------------------------------------------------------------------

  真心话大冒险: {{ selected1 }}

  ------------------------------------------------------------------------------

  你想和飞哥偷偷干些啥: {{ selected22 }}
   //通过Vue.js的构造函数实例化出一个根实例 var app1= new Vue({   el:"#app1",   data:{   myText:"",   picked:"",   selected1:"",   //这是复选列表的变量，函数   selected2:[],   selected22:"",   funcselected22:function(){    this.selected22 = this.selected2.join("　");   },   //复选框的函数,及其相关变量   checkedNames:[],   names:"",   funcCheckedNames:function(){    this.names = this.checkedNames.join("　");   }

Vue.js中基础指令的示例分析

其他资讯