Vue.js是一个用于构建用户界面的渐进式框架。他不是一个全能的框架。——只关注视图层。因此，很容易学习并与其他库或现有项目集成。当与相关工具和支持库一起使用时，Vue.js还可以完美地驱动复杂的单页应用程序。它基于AnjularJs，因此其语法与前者非常相似，但使用起来要简单得多。

今天给大家详细介绍一下这个Vue.js，以下是我们详细讲解的目录。朋友可以根据自己的情况有选择地阅读，所有操作都用代码实现。

1.vue.js如何绑定到页面并使用其功能。

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

3.VUE的所有数据绑定说明

那么，让我们开始今天的介绍吧！

1.vue.js如何绑定到页面并使用其功能。

首先看下面的代码：

！doctype html html head meta charset=' utf-8 ' title/title/head body button id=' app1 ' onclick=' app 1 . func()'这是app 1。点击me/button/body script type=' text/JAVAScript ' src=' http : js/jquery-3 . 1 . 1 . min . js '/script script type=' text/JAVAScript ' src=' http 3360 js/vue.js '/script script type=' text/JAVAScript '/通过vue . js的构造函数实例化一个根实例varapp 1=new vue({ El : ' # app1 '，data:)，func : function(){ alert(this . message)；} } });console.log(app1。$ data . message)；//这个你应该知道，app1是一个变量，一个对象类型的变量，可以直接使用链式语法。/script/html效果如下：

上面的代码是通过点击按钮弹出的窗口。让我们分析下面的代码。

Varapp1=newvue ({el:' # app1 '，data: {message3360 '我在app1中显示过吗？func : function(){ alert(this . message)；} } });console.log(app1。$ data . message)；通过Vue.js的构造函数实例化一个根实例app1说白了，这就是我们面向对象对象的实例化，直接创建一个对象。

El:'#app1 '，这是为了挂载我们实例化对象的元素节点，也就是哪个标签是这个app1对象的作用域。它可以是id、类、标记名。但是我主要用id是因为它的唯一性。

Data:{}是定义此对象的变量和方法。请注意，与app1相关联的所有变量和方法都必须在数据中声明。

注意：

(1)范围。Js5只有函数作用域，所以如果数据中的一个函数想要调用一个变量，必须通过这个调用。或者直接通过对象名。

(2)外部调用。app1。$ data.message在js中直接调用vue对象的属性和方法时，需要链式语法，并逐层指出。这里，您使用$data，它主要不同于js变量

(3)与HTML代码绑定。这里，我通过js的onclick直接绑定。当然，vue有自己的事件绑定。暂时不在这里说。如果使用js的内联绑定，应该注意带对象名。这是纯粹的OOP思维。相信大家对面向对象并不陌生。如果你真的不知道它是什么，你应该去百度学。

这是使用vue最基本的方法。

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

接下来，让我们谈谈实例化对象的生命周期，以及它将经历哪些阶段。请参见以下代码：

！doctype html html head meta charset=' utf-8 ' title/title/head body div id=' container '我的申报期，我们来看看！/div/body Script type=' text/JavaScript ' src=' http : js/jquery-3 . 1 . 1 . min . js '/Script Script type=' text/JavaScript ' src=' http : js/vue . js '/Script type=' text/JavaScript '/以下代码展示了VM var VM=new vue({ El : ' # container '，data: {ShowData('在创建vue实例之前'，这个)；}，create d : function(){ show data('创建vue实例后'，this)；}，mount:之前的函数(){ show data(' mount到dom之前'，这个)；}，mount ed : function(){ show data('装载到dom后'，this)；}，更新前：函数(){显示数据('数据更改和更新前'，此)；}，updated : function(){ show data('在数据更改和更新之后'，this)；}，BeforeDestroy : FuncTion(){ VM . test=' 3333 '；显示数据('在vue实例被销毁之前'，这个)；}，销毁了：函数(){ show data(' vue实例销毁后'，这个)；} });函数realDom(){ console.log ('real dom结构：' document . getelementbyid(' container ')。innerhtml)；}函数showData(process，obj){ console . log(process)；Console.log('数据数据：' obj.test) console.log('挂载对象：')console.log(obj。$ El)RealDom()；console . log(“-”)console . log(“-”)}/script/html然后看渲染：

从控制台的打印效果可以看出，实例化vue对象大致可以分为四个阶段：创建vue实例、挂载到dom、更新数据更改和销毁vue实例。注意每个阶段都有对应的钩子，我们可以通过操作这些钩子来实现一些功能。虽然初学者用得不太好，但提前了解一下还是不错的。当你遇到实际的功能时，你应该能够得到生命周期的钩子。

3.VUE的所有数据绑定说明

现在我们来总结一下vue最大的亮点，各种灵活的数据绑定方法。这里主要举几个例子来说明{{}}，v-once，v-html，v-bind，v-model。

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

！doctype html html head meta charset=' utf-8 ' title data binding/title/head body！-数据绑定-div id=' app1 '！- 1.{{}} v-once v-html -！-小胡子标签，也就是双大括号，刷新页面时会显示出来-button onclick=' app1.func()'点击我更改变量message /button的值br /br/！-即时绑定，div的内容随着变量的变化而变化，绑定的内容作为纯文本处理-！-也可以用双大括号写表达式，就像AngularJs-div { { message } }/div br/！-只绑定一次，整个div的所有绑定数据只加载一次，更新-div v-once {{message}}/div br/！-双括号只能显示为纯文本。V-HTML可以直接绑定到HTML标记-div v-HTML=' h1 '/div br//div/body脚本类型=' text/JavaScript ' src=' http : js/jquery-3 . 1 . 1 . min . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/vue . js '/脚本脚本类型='text/javascript' /通过，h 1: ' h1 style=' color : fuchsia；我是h1标签/h1 '，//注意单引号//消息更改函数func : func(){ if(this。message=='我是可变消息的内容！){this.message='消息的消息内容已更改！}else{ this.message='我是可变消息的内容！}} /script/html然后看效果：

或者分析这个小演示。

Div{{message}}/div小胡子标签，即双大括号，与AnjularJs的双大括号完全一样，即直接将数据动态绑定到标签。当变量改变时，标签的内容也会改变，表达式可以写在大括号里。上面的代码通过点击按钮改变变量消息的值，然后通过数据绑定即时改变div的文本。

div v-一次{{message}}/div它也是数据绑定，但是只绑定一次。注意v-once是加载在div上的，所以整个div的所有绑定数据只会加载一次，更新后不会改变，所以当你点击按钮时，第二个div的数据不会改变。

Div v-HTML='h1'/div是绑定HTML标签的。请注意，它可以直接绑定html模板，但是这一堆HTML标记不能嵌套在多个层中。你什么意思？您可以绑定标签或模板，但是如果绑定模板，则不能将模板嵌套在该模板中。否则无法渲染。上面的代码直接导入了一个内嵌样式的h1标签，功能非常强大，比直接操作dom节点强很多，效率提高了几何倍。

(2)接下来是v-bind

！文档类型HTML HTML头元字符集=' UTF-8 '标题数据绑定/标题样式类型='文本/CSS '。AAA { Margin: 10px宽度： 100 px；高度： 100像素；背景-颜色：红色；} .bbb { margin: 10px宽度： 50px；高度： 50px；背景-颜色：蓝色；}/风格/头身！-数据绑定-div id=' app1 '！- 2.v-bind -！-v-bind是专门用来绑定属性的，主要用来操纵类列表中的元素及其内联样式-！-这与使用js直接操作dom节点是一样的，但是要简单得多-div v-bind : style=' { background color 3360 my color，width3360 mywidth' px '，height : my height ' px ' } ' onclick=' app 1 . func 1()'/div！-您也可以直接绑定以更改class-div v-bind : class=' my class ' onclick=' app 1 . func 2()'/div-div class=' img ' style=' width : 100px；' height: 100px'img style=' width : 100%；'v-bind : src=' Http : mysrc ' onclick=' app1 . func 3()'//div/div/body script type=' text/JavaScript ' src=' http: js/jquery-3 . 1 . 1 . min . js '/script type=' text/JavaScript ' src=' http3360 js/vue . js '/script type=' text/JavaScript '/A根实例varapp1this.myWidth=50，this . my height=50 } else { this . my color=' blue '；this.myWidth=100，this.myHeight=100 } }，func 2: function(){ if(this . myclass==' AAA '){ this . myclass=' BBB '；} else { this.myClass=' aaa} }，func 3: function(){ if(this . mysrc==' img/2 . png '){ this . mysrc=' img/u=1622626696，1630096734fm=23gp=0 . jpg '；} else { this . Mysrc=' img/2 . png '；} } } });/script/html然后看看效果：

让我们分析一下上面的代码。

V-bind是专门用来绑定属性的，主要用来操纵元素的类列表及其内联样式。这和AnjularJs的ng-bind完全不一样，注意！

div v-bind : style=' { background color : my color，width3360 mywidth' px '，height : my height ' px ' } ' onclick=' app 1 . func 1()'/div这是直接绑定行中的样式。然后，通过绑定click函数，我们给每一对赋值，从而通过click改变div样式。

div v-bind : class=' my class ' onclick=' app 1 . func 2()'/div这是一个直接绑定和修改的类名。有两个类名，aaa和。bbb，由我在页面样式表中定义。通过动态修改类名来修改样式比JQuery直接操作dom节点要快得多。

img style=' width : 100%；'v-bind : src=' http 3360 mysrc ' onclick=' app 1 . func 3()'/这是一个直接绑定属性，它会动态修改img的src属性。达到点击图像显示不同图像的效果。

这里需要强调的是，v-bind直接绑定属性，而不是样式。对于img，它的src是属性，但是对于div，宽度是样式，不是属性，所以v-bind:width='100 'px ' '不容易制作。

至于v-bind属性绑定，有这么多常见的用法。

(3) v型

使用v-model指令在窗体控件元素上创建双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。它负责监控用户的输入事件来更新数据，尤其是处理一些极端的例子。V-model不关心窗体控件初始化产生的值。因为它会选择Vue实例数据作为具体值。默认情况下，v-model会在输入事件中同步输入框的值和数据，但是您可以添加一个修饰符lazy，它可以在change事件中转换为同步

让我们看看下面的一段代码：

！文档类型HTML HTML头元字符集=' UTF-8 '标题数据绑定/标题样式类型='文本/CSS '。AAA { Margin: 10px宽度： 100 px；高度： 100像素；背景-颜色：红色；} .bbb { margin: 10px宽度： 50px；高度： 50px；背景-颜色：蓝色；}/风格/头身！-数据绑定-div id=' app1 '！-3.v-model输入类型=' text' v-model=' mytext '占位符='请输入：'/div {{mytext}}/div br/br/-。-绑定单选按钮-输入类型=' radio ' id=' one ' name=' aa ' value='雄' v-model='picked' label for='one '雄/Label br输入类型=' radio ' id=' two ' name=' aa ' value='雌' v-model='picked' label for='two '雌/label br span您选择了： {{ picked }}/span brbr -！-绑定检查按钮-div onclick=' app 1 . func checkname()' input type=' checkbox ' id=' jack ' value='好帅！'V-model=' checked names '的标签为=' jack '太帅了！/labe input type=' checkbox ' id=' John ' value='你是我的男神！'V-model=' checked names '标签为=' John '你是我的男神！/labe input type=' checkbox ' id=' Mike ' value='我爱你，飞哥！'V-model=' checked names '标签为=' Mike '我爱你，飞哥！/label /div br span您对飞哥：的评价{ { name } }/span brbr-。-绑定电台列表-br选择v-model=' selected1 '选项亲格非/选项告白格非/选项选项邀请格非吃饭/选项/选择br span真实故事冒险： { { selected 1 } }/span brbr-div onclick=' app1 . func selected 22())选择v-model=' selected2 '多个选项亲吻/选项拥抱/选项高举/选项/选择/divbr span你想和飞哥秘密做什么： {{ selected22 }} script script type=' text/JavaScript '//实例化一个根实例varapp1=newvue ({el:' # app1 '，data: {mytext3360 ' '，picked : ' '，Selected1: ' '，//这是检查列表的一个变量，函数selected2: []，selected22: ' '，functionselected 22: function(){ This。 selected22=这个。选择了2。join(' ')；}，//复选框及其相关变量checked names :[]，name : ' '，funchecked name 3360 function(){ this。名字=这个。检查姓名。join(' ')；} /script/html然后看看效果：

然后解析这段代码。这里就不详细解释代码了。挑几个典型的解释，其他的就很简单了。

让我们以多选按钮为例：

div onclick=' app 1 . func checked name()' input type=' checkbox ' id=' jack ' value='好帅啊！'V-model=' checked names '的标签为=' jack '太帅了！/labe input type=' checkbox ' id=' John ' value='你是我的男神！'V-model=' checked names '标签为=' John '你是我的男神！/labe input type=' checkbox ' id=' Mike ' value='我爱你，飞哥！'V-model=' checked names '标签为=' Mike '我爱你，飞哥！/label /div//这是检查列表的一个变量，函数selected2: []，selected22: ' '，functionselected 22: function(){ this . selected 22=this . selected 2 . join(')；}，这里需要强调的是，v-model动态绑定多个盒子等等，将以数组的形式访问。因此，我们使用selected2:[]变量来接收选择框的数据，但不能直接用双大括号显示数据。朋友可以试试。双大括号以纯文本显示，他会显示整个数组的括号、引号、逗号，太难看了。所以在这里，我使用join(' ')，将JQuery的数组划分为字符串，将选中的数据划分为字符串，然后使用字符串类型的变量接收数据，这样打印出来会好很多。注意，我这里使用的join(')分隔符是一个空白字符，占据了一个汉字的空间，但是不会显示出来。

好了，以上就是Vue.js的基本内容，至于后续的渲染和组件API，我们将在下周分享。如果你觉得我的博客还不错，请记得关注我。以前的博客也有高质量的产品！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。