脚本宝典收集整理的这篇文章主要介绍了

Vue2学习之旅四:Vue实例 + Vue组件实例

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>作者:心叶<br />时间:2018-04-27 11:23</p> <p>本篇最终项目文件Github地址:github.com/paper520/vue.quick/tree/V4</p> <p><a href="https://segmentfault.com/u/yelloxing/articles">Vue2学习之旅系列文章目录</a></p> <p>本文正式开始学习vue的方方面面,不过开始的学习还是属于基础使用和理解,深入的东西会随着时间的流逝,慢慢道来。</p> <h1 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>实例</h1> <h2 id="articleHeader1">项目启动过程</h2> <p>看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html的方法访问为例来说明)?</p> <p>你首先打开了<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html,里面只有一个写了一个id='root'的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>,还有你引入了打包之后的代码,然后<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>自己肯定运行了一下(可以认为是<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>初始化)。</p> <p>接着,应该是执行了en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>.js(因为打包是webpack打包的,你配置的入口文件就这一个)。</p> <p>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>.js干了什么,是的,创建了一个Vue实例对象,然后这个对象管理的区域根据el属性知道,应该是<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex.html中id='root'的那个<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>,因此余下的事情就只有明白这个Vue实例对象是如何管理这片区域的就可以了,这就是接下来的内容了。</p> <h2 id="articleHeader2">什么是Vue实例对象?</h2> <p>根据官方文档的说明:每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。</p> <p>你可以简单的理解,他就是一个普普通通的对象罢了,只不过这个对象被赋予了一些特殊的功能,让我们来了解一下他吧!</p> <p>【我们接下来都是在en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>.js里面创建的那个Vue对象上面进行实验的】</p> <p>一个Vue实例对象创建的方法如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var vm=new Vue({ //一堆配置 }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> vm=<span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <span class="hljs-type">Vue</span>({ <span class="hljs-comment">//一堆配置</span> }); </code></pre> <p>因此,接下来要说的就是一些常用的配置(不是全部,比较特殊的以后应该会说,毕竟开始就全部,我怕彼此心都太累了)。</p> <h2 id="articleHeader3">Vue实例对象基本配置</h2> <p>【1】el:选择器| <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>结点</p> <p>在我们的项目中,我们配置的是:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="el:'#root'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">el:</span><span class="hljs-string">'#root'</span></code></pre> <p>这是一个字符串,有点类似<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>选择器,它会使用查找到的结点作为管理区域(当然还有别的<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>选择器也可以)。</p> <p>除此之外,你还可以直接传递一个结点,比如现在我们修改一下代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="el: document.getElementById('root')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;">el: <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">'root'</span>)</code></pre> <p>这样也是可以了,你可以试试。</p> <p>【2】render:(createElement:()=&gt;VNode)=&gt;VNode</p> <p>上面的是ES6的<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>写法,举个栗子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="((x,y)=>x+y)(1,2)<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code>((<span class="hljs-name">x</span>,y)=&gt;x+y)(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>) </code></pre> <p>上面ES6的写法等同于下面ES5的写法:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="(function(x,y){ return x+y; })(1,2); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs clojure"><code>(<span class="hljs-name"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-name">x</span>,y){ <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> x+y; })(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>)<span class="hljs-comment">;</span> </code></pre> <p>简单的说就是:(x,y)=&gt;x+y就表示一个有二个参数x和y,返回x+y的函数,因此上面的函数用ES5的写法就是:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function(createElement){ //createElement是一个函数,返回类型为VNode //这个函数的返回类型也应该是VNode return VNode; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(createElement)</span></span>{ <span class="hljs-comment">//createElement是一个函数,返回类型为VNode</span> <span class="hljs-comment">//这个函数的返回类型也应该是VNode</span> <span class="hljs-keyword">return</span> VNode; } </code></pre> <p>备注:VNode是Vue编译生成的虚拟节点,想一下Jquery节点,还有Node节点,是不是味道很像。</p> <p>因此,我把项目中的render稍微改一下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="render: function (createElement) { return createElement(App); } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>render: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(createElement)</span> </span>{ <span class="hljs-keyword">return</span> createElement(App); } </code></pre> <p>是不是很清晰了,说白了,就是一个最后返回值是VNode的函数。</p> <p>因此看见节点这二个字,应该可以理解页面为什么显示的是App里面的模板了吧,如何路由调整为什么配置的是.vue文件大概也有点感觉了吧。</p> <p>【3】router:VueRouter</p> <p>这个比较容易理解,就是知道使用的路由配置是什么,由于项目中是:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="router:router" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">router:</span>router</code></pre> <p>看着很奇怪,我们稍微修改一下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//上面的import routerObj from './router';这一句要跟着修改一下 router: routerObj " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-regexp">//</span>上面的<span class="hljs-keyword">import</span> routerObj <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span>;这一句要跟着修改一下 router: routerObj </code></pre> <p>基本的就到这里,就三个,别的属性因为还关联很多东西,会一点点来说明。</p> <h2 id="articleHeader4">Vue对象生命周期</h2> <p>官方的图我就不放了,感觉意义不大,推荐入门了以后可以去看看,因此后面的文章可能会说。</p> <p>下面我们来先在entry.js里面修改一下代码,看看运行结果,下面是代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//根对象 var vm = new Vue({ //挂载点 el: document.getElementById('root'), //2.使用刚刚的路由配置 router: routerObj, //启动组件 render: function (createElement) { return createElement(App); }, //下面是Vue对象的几种状态 beforeCreate: function () { console.debug('Vue对象目前状态:beforeCreate'); }, created: function () { console.debug('Vue对象目前状态:created'); }, beforeMount: function () { console.debug('Vue对象目前状态:beforeMount'); }, mounted: function () { console.debug('Vue对象目前状态:mounted'); }, beforeUpdate: function () { console.debug('Vue对象目前状态:beforeUpdate'); }, updated: function () { console.debug('Vue对象目前状态:updated'); }, beforeDestroy: function () { console.debug('Vue对象目前状态:beforeDestroy'); }, destroyed: function () { console.debug('Vue对象目前状态:destroyed'); } }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//根对象</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-comment">//挂载点</span> el: <span class="hljs-built_in"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument</span>.getElementById(<span class="hljs-string">'root'</span>), <span class="hljs-comment">//2.使用刚刚的路由配置</span> router: routerObj, <span class="hljs-comment">//启动组件</span> render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">createElement</span>) </span>{ <span class="hljs-keyword">return</span> createElement(App); }, <span class="hljs-comment">//下面是Vue对象的几种状态</span> be<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>eCreate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:beforeCreate'</span>); }, <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:created'</span>); }, <span class="hljs-attr">beforeMount</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:beforeMount'</span>); }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:mounted'</span>); }, <span class="hljs-attr">beforeUpdate</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:beforeUpdate'</span>); }, <span class="hljs-attr">updated</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:updated'</span>); }, <span class="hljs-attr">beforeDestroy</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:beforeDestroy'</span>); }, <span class="hljs-attr">destroyed</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.debug(<span class="hljs-string">'Vue对象目前状态:destroyed'</span>); } }); </code></pre> <p>运行一下看看控制台。</p> <p>因此,就是说,Vue对象从创建前到最后死亡,在各个阶段状态改变的时候,都提供了一个钩子方法,你可以注册一下,如果你希望在特定状态改变的时候干点什么的话。</p> <p>到这里,基本上Vue对象实例应该比较清楚了吧?看看我们的代码,应该只有那几个.vue的文件里面的东西没有说清楚了(本文就是把前面写过的代码都说清楚,后面就可以一个新知识点接着一个的来丰富项目,因为都没有疑惑了,学习起来应该不会痛苦了吧!)。</p> <h1 id="articleHeader5">Vue组件实例</h1> <h2 id="articleHeader6">说明</h2> <p>Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种,比如你还可以通过Vue.component()的方法来创建,不过这些都以后吧,我们这里就只说明.vue文件这一种(不喜欢一下子说太多,而且仔细想想,不就是<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>吗)。</p> <p>【下面都是在PageTwo.vue里面进行修改,菜单名称修改为:Vue组件实例】</p> <p>.vue文件的基本模板如下(下面都会是ES5的写法,本人还是不太喜欢ES6或者TS,原谅我,反正本质一样):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<template></p> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> { //一些配置,和前面说的Vue实例类似 } </script></p> <style> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { <span class="hljs-comment">//一些配置,和前面说的Vue实例类似</span> } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>三个地方,分工明确:模板 + 控制 + 样式</p> <p>接下来我们说明配置中常用的选项(很多具体的就留到后面一点点品位,好吧,留的有点多):</p> <h2 id="articleHeader7">常用配置</h2> <p>【1】data</p> <p>先看看PageTwo.vue现在的代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<template></p> <section> <input type=&quot;text&quot; v-model=&quot;justDoIt&quot;></p> <div> 输入的数据:{{justDoIt}} </div> </section> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> { //一些配置 data() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { justDoIt: &quot;初始化数据&quot; }; } }; </script></p> <style> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">section</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"justDoIt"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> 输入的数据:{{justDoIt}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-comment">//一些配置</span> data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">justDoIt</span>: <span class="hljs-string">"初始化数据"</span> }; } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>模板中的代码应该不用说了吧,前面一篇文章说的很清楚了,直接看看data。</p> <p>其返回了一个键值对(还有别的写法,推荐你这样写,因为这里如果"初始化数据"这几个字是变量,这种写法形成了闭包,是安全的),在这里就是给当前组件对象是data里面添加了一个justDoIt的数据,然后上面或者别的地方才可以用,他就是干了这事情。</p> <p>【2】methods</p> <p>接着,我们添加一下methods属性:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="methods: { doIt() { alert(this.justDoIt); } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">methods:</span> { doIt() { <a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.justDoIt); } } </code></pre> <p>其实methods和data类似,只不过是用来添加的不是数据,而是方法,因此,你现在可以在模板里面添加下面代码来调用这个方法(记住,添加的全部代码必须由一个标签包裹):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="<input type=&quot;button&quot; value=&quot;DoIt&quot; v-on:click=&quot;doIt()&quot;><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"DoIt"</span> v-on:click=<span class="hljs-string">"doIt()"</span>&gt; </code></pre> <p>v-on:click就是类似原生的onClick,不过因为是vue的方法,你应该用他的。</p> <p>现在,你可以点击一下页面的按钮试一下,是不是很舒服。</p> <p>【3】watch</p> <p>这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合,比如你添加下面的代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="watch: { justDoIt: function(newval, oldval) { console.log(&quot;justDoIt改变了,新值为:&quot; + newval + &quot;,旧值为:&quot; + oldval); } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">watch</span>: { <span class="hljs-attribute">justDoIt</span>: <span class="hljs-built_in">function</span>(newval, oldval) { console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"justDoIt改变了,新值为:"</span> + newval + <span class="hljs-string">",旧值为:"</span> + oldval); } }</code></pre> <p>如何你运行一下,打开控制台,修改输入框的值的时候,是不是控制台时刻打印了这句话。</p> <p>【4】computed</p> <p>这个叫做计算属性,前面一篇文章说过了,不清楚的看看PageOne.vue,应该可以明白。</p> <p>简单的说就是,它用到的data里面的值改变的时候,自己会重新计算。</p> <h2 id="articleHeader8">生命周期</h2> <p>和Vue对象一样,也有类似的<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a>,你可以试试,这里就随便提一下。</p> <h1 id="articleHeader9">总结</h1> <p>说到这里,VUE应该是入门了,后面开始,就会针对一个个小点来说明,祝你好运!</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue2学习之旅四:Vue实例 + Vue组件实例

全部内容,希望文章能够帮你解决

Vue2学习之旅四:Vue实例 + Vue组件实例

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过