<p><code></p> <p>以前看到多少天学习系列,我都深感烦躁,短短几天怎么可以精通,那是对于他们而言。但是,今天我要写一个快速入门,本人觉得还是有一点用处,因为,我不可能在一天之内精通某种东西,却可以在一两小时入门。</p> <p>回到vue本身,当初听说它只做view层。而向一般人隐藏了,其实它的view是带有model的。它的特点之一是<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>,但是它出现的频率太多,人们早就对它没那么惊喜了。如果你以前看过angular,过滤器,路由,指令这些一定不会陌生,在vue中它们都有。</p> <p>下面便是我的一次快速入门,虽然说是快速入门,并不叫<code>Javascript</code>快速入门,看之前还要有JS的基础,我是带着三个问题:</p> <ol> <li> <p>作用域</p> </li> <li> <p>自定义事件(event)和用户事件(methods)</p> </li> <li> <p>vue文件与普通引入的区别</p> </li> </ol> <h2 id="articleHeader0">1. 作用域</h2> <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="// 1.定义 var MyComponent = <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend({<br /> template: '</p> <div>A custom component!</div> <p>'<br /> })</p> <p>// 2.注册<br /> Vue.component('my-component', MyComponent)</p> <p>// 3.创建根实例<br /> new Vue({<br /> el: '#example'<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 1.定义</span> <span class="hljs-keyword">var</span> MyComponent = <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.extend({ <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;A custom component!&lt;/div&gt;'</span> }) <span class="hljs-comment">// 2.注册</span> Vue.component(<span class="hljs-string">'my-component'</span>, MyComponent) <span class="hljs-comment">// 3.创建根实例</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#example'</span> });</code></pre> <p>不小心就把组件的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>文档贴上来了,我们看代码说明:如果有看过angular的同事,应该会对<code>ng-app</code>不陌生。那是表明它以下的东西都会在angular以内,<code>ng-controller</code>则是这个controller内的变量可以访问。同理,我们看3那里,实例化一个vue对象,el指明了它的作用域。就在这个example的元素。我们可以修改一下,加一个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="new Vue({ el: '#example', data: { text: 'hello,vue; } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#example'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">'hello,vue; } });</span></code></pre> <p>不用猜也知道,这个text是可以绑定在example元素所在的范围内。下面,我们作死一下,试试在这个组件去访问<br />这个text属性。</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 MyComponent = <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend({<br /> template: '</p> <div>{{text}} A custom component!</div> <p>'<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">var</span> MyComponent = Vue.extend({ <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;{{text}} A custom component!&lt;/div&gt;'</span> })</code></pre> <p>然后,就可以发现这并不能显示出来。这时候应该怎么做呢?回到文档,这是一个很好的方案,当你快速入门的时候,<br />无论什么时候都要想起文档,找不到再去网络上。篇幅有限,并不能从零开始教到一百,而且我也是跟你一样入门级的。废话不说回到代码。这里的text不能访问是正确的,一个组件就是要能够复用,为了达到这个目的,才跟外面的分开。但是components写法真的有data这个选项,但是只接收一个function。这样做也是为了每个组件可以独立。</p> <p>组件实例的作用域是孤立的,可以使用 props 把数据传给子组件,这里就不多说了。</p> <h2 id="articleHeader1">2. 自定义事件(event)和用户事件(methods)</h2> <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="{ methods: { }, events: { } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">{ <span class="hljs-attr">methods</span>: { }, <span class="hljs-attr">events</span>: { } }</code></pre> <p>用户事件一般都放在methods,新手这时又看到了events,它们有什么区别呢?看标题。</p> <p>至于详细的,还是要看文档。事件无非就是监听和触发,与angular相似,它也有<code>on</code> <code>emit</code>这类似的实现。</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="绑定多个事件 <div v-on=&quot;click: a, keyup: b&quot;> <p>也可以这样写</p> <div v-on:click=&quot;a&quot; v-on:keyup=&quot;b&quot;> <p>然后还有缩写</p> <div @:click=&quot;a&quot; @:keyup=&quot;b&quot;>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html">绑定多个事件 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-on</span>=<span class="hljs-string">"click: a, keyup: b"</span>&gt;</span> 也可以这样写 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"a"</span> <span class="hljs-attr">v-on:keyup</span>=<span class="hljs-string">"b"</span>&gt;</span> 然后还有缩写 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> @<span class="hljs-attr">:click</span>=<span class="hljs-string">"a"</span> @<span class="hljs-attr">:keyup</span>=<span class="hljs-string">"b"</span>&gt;</span></code></pre> <h2 id="articleHeader2">3.vue文件与普通引入的区别</h2> <p>对于大型项目,可能会用vue文件这种方式来组织代码。这跟react就有点像了,样式,脚本,模板都在一个文件内。<br />这样很好管理,坏处就是初学者会晕,如果有好多的组件一起。<br /><span class="img-wrap"><img data-src="/img/remote/1460000006766355" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br />在这里注意一下,组件就是一个vue文件,然后都是通过require的方式进来(废话)。在普通引入脚本的方式,你可以这样创建组件和过滤器:</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="Vue.component('name', function(){ // ... }); Vue.filter('name', function(){ // ... });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">Vue.component(<span class="hljs-string">'name'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// ...</span> }); Vue.filter(<span class="hljs-string">'name'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// ...</span> });</code></pre> <p>如果换到了vue文件这种模式,你得明白这是一个大前提,这是适合大型项目使用的,所以写法也会变得规范。这时,你会有components,filters这种目录,再通过require进入到你所需要的地方。所有写法都是模块化你要记得导出这个方法,这一点要注意。</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="<script> import Hello from './components/Hello' // import Filter from './filter/filter' 伪代码 <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data: function() { return { text: 'hello' } }, filters: { // up: Filter.up 伪代码 up: function(val) { return val.toUpperCase(); } }, components: { Hello } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;script&gt; <span class="hljs-keyword">import</span> Hello <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/Hello'</span> <span class="hljs-comment">// import Filter from './filter/filter' 伪代码</span> <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">default</span> { <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">text</span>: <span class="hljs-string">'hello'</span> } }, <span class="hljs-attr">filters</span>: { <span class="hljs-comment">// up: Filter.up 伪代码</span> up: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) </span>{ <span class="hljs-keyword">return</span> val.toUpperCase(); } }, <span class="hljs-attr">components</span>: { Hello } } &lt;<span class="hljs-regexp">/script&gt;</span></code></pre> <h2 id="articleHeader3">写在最后</h2> <p>vue.js应该快迎来2.0。不知道还要不要再来一个快速入门,vue.js发展得挺快,东西也像react类似的全家:vue-router,vuex。对于入门来说其实还是有点累,从最初只要引入一个文件,到使用构建工具,再到一系列全家桶。前端开发已经变得没那么纯粹,或者最后还是看一个项目怎么这些工具吧。</p> <p></code></p>

本文固定链接:

vue.js快速入门

http://www.js-code.com/vue-js/vue-js_25466.html

80%的人都看过