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

Vue框架

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>title: <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>框架介绍与ES6ES7语法</p> <h1 id="articleHeader0">分类</h1> <p>categories: <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></p> <h1 id="articleHeader1">标签</h1> <p>tags: ["库与框架区别","MVVM与MVC","指令","基本代码",方法,配置对象,过滤器,生命周期,ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>请求,全局组件,"ES6","ES7"]</p> <h1 id="articleHeader2">时间</h1> <p>date: 2018-05-22 12:10:18</p> <p>前端框架<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a></p> <p>框架与库的区别</p> <p>小而巧为库,大而全为框架</p> <ul> <li> <p>库</p> <ul> <li>提供小功能, 项目入侵小(上了之后可以改),上了船可以再下船</li> </ul> </li> <li> <p>框架</p> <ul> <li>提供比较全的功能, 项目入侵大(上了之后不可改),上了贼船了很难再下船了</li> </ul> </li> </ul> <p>介绍MVVM与MVC</p> <ul> <li> <p>MVC 是后端开发思想,分为三个部分</p> <ul> <li>Model:(数据层)负责数据库操作</li> <li>View:(视图层)所有前端页面</li> <li>Controller:(业务逻辑层) 处理对应业务逻辑</li> </ul> </li> <li> <p>MVVM 前端页面的分层开发思想,把一个完整的页面分成了三部分</p> <ul> <li> <p>Model(页面中需要的数据),这里所指的是:data部分</p> <ul> <li>通过ajax取数据,将来渲染到View中</li> </ul> </li> <li>View(页面中的<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>结果),这里所指的是:容器</li> <li>ViewModel(中间的调度者)。这里所指的是:vm</li> </ul> </li> </ul> <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="/** * 容器就是 MVVM 中的 View * * 实例对象就是 MVVM 中的 VM, 被称为调度者 * * data就是 MVVM 中的 Model */ 1. 导入Vue包 <script src = &quot;vue-2.5.15.js&quot;></script></p> <p>2. 添加一个容器, 将来被Vue控制</p> <div id = &quot;box&quot;>{{msg}}</div> <p>3. 创建Vue的实例对象<br /> const vm = new Vue({<br /> // 3.1 el传入的是选择器, 页面要控制的元素<br /> el: &quot;#box&quot;,<br /> data: {<br /> // 3.2 用data渲染数据<br /> msg: &quot;Hello Vue&quot;,<br /> flag: true<br /> },<br /> // 可以绑定事件处理函数<br /> methods: {</p> <p> },<br /> })</p> <p>/**<br /> * VM的实例对象, 会监听data中每一项的数据变化, 只要一变化, VM就会重新把el指定区域所有的指<br /> * 令重新解析一遍<br /> * data中的数据, 在每个methods方法中都共享<br /> *<br /> */</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs dart"><code><span class="hljs-comment"><span class="markdown">/** <span class="hljs-bullet">* </span>容器就是 MVVM 中的 View <span class="hljs-bullet">* </span><span class="hljs-bullet">* </span>实例对象就是 MVVM 中的 VM, 被称为调度者 <span class="hljs-bullet">* </span><span class="hljs-bullet">* </span>data就是 MVVM 中的 Model */</span></span> <span class="hljs-number">1.</span> 导入Vue包 &lt;script src = <span class="hljs-string">"vue-2.5.15.js"</span>&gt;&lt;/script&gt; <span class="hljs-number">2.</span> 添加一个容器, 将来被Vue控制 &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id = <span class="hljs-string">"box"</span>&gt;{{msg}}&lt;/div&gt; <span class="hljs-number">3.</span> 创建Vue的实例对象 <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-comment">// 3.1 el传入的是选择器, 页面要控制的元素</span> el: <span class="hljs-string">"#box"</span>, data: { <span class="hljs-comment">// 3.2 用data渲染数据</span> msg: <span class="hljs-string">"Hello Vue"</span>, flag: <span class="hljs-keyword">true</span> }, <span class="hljs-comment">// 可以绑定事件处理函数</span> methods: { }, }) <span class="hljs-comment"><span class="markdown">/** <span class="hljs-bullet">* </span>VM的实例对象, 会监听data中每一项的数据变化, 只要一变化, VM就会重新把el指定区域所有的指 <span class="hljs-bullet">* </span>令重新解析一遍 <span class="hljs-bullet">* </span>data中的数据, 在每个methods方法中都共享 <span class="hljs-bullet">* </span>*/</span></span> </code></pre> <p>Vue指令</p> <p>表达式就是指令,如果想让指令生效必须放到el的容器里,他有控制<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>的能力,v-系列插入属性节点,插值表达式插入内容区域</p> <p>插值表达式</p> <ul> <li>插入表达式</li> <li>可以写字符串属性,也可以进行字符串拼接,可以写简单的代码三元表达式,不要过分就行</li> <li>只能写在内容区域 <p>&lt;p&gt;{{msg}}&lt;/p&gt;</p> </li> </ul> <p>v-cloak</p> <ul> <li>解决插件表达式闪烁</li> <li>在网络慢的情况下会使用</li> <li> <p>在外层的元素添加 v-cloak ,而且需要在style样式表中添加一个属性</p> <p>&lt;style&gt;</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="[v-cloak] { display: none; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-attr">[v-cloak]</span> { <span class="hljs-attribute">display</span>: none; }</code></pre> <p>&lt;style&gt;<br />&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> id="box" v-cloak&gt;&lt;/<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>&gt;</p> </li> </ul> <p>v-text</p> <ul> <li>与插值表达式一样都可以向元素插入数据</li> <li>会把之前的内容清空并覆盖</li> <li>可以进行字符串拼接与三元表达式</li> <li>它没有闪烁问题</li> <li>不能渲染标签 <p>&lt;h1 v-text = "msg"&gt;&lt;/h1&gt;<br />&lt;h1 v-text = "msg + '拼接字符串'"&gt;&lt;/h1&gt;</p> </li> </ul> <p>v-html</p> <ul> <li> <p>渲染标签</p> <p>&lt;div v-html = "msg"&gt;&lt;/div&gt;<br />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="msg: &quot; <h1>文本</h1> <p>&quot;" 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">msg:</span> <span class="hljs-string">"&lt;h1&gt;文本&lt;/h1&gt;"</span></code></pre> <p>}</p> </li> </ul> <p>v-bind</p> <ul> <li>属性绑定</li> <li>可以进行字符串拼接,三元表达式</li> <li> <p>可以单向数据绑定 model =&gt; view</p> <p>&lt;!-- 完整版 --&gt;<br />&lt;img v-bind:src = "images"/&gt;<br />&lt;!-- 简写版 --&gt;<br />&lt;img :src = "images"/&gt;<br />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="images: &quot;./img/01.png&quot;" 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">images:</span> <span class="hljs-string">"./img/01.png"</span></code></pre> <p>}</p> </li> </ul> <p>v-on</p> <ul> <li>绑定事件</li> <li> <p>定义事件名时可以进行传参操作,添加()即可</p> <p>&lt;!-- 示例 --&gt;<br />&lt;button v-on:事件名称 = "btn"&gt;&lt;/button&gt;<br />&lt;!-- ()进行传参 --&gt;<br />&lt;button v-on:click = "btn(111)"&gt;&lt;/button&gt;<br />&lt;!-- 原始版 --&gt;<br />&lt;button v-on:click = "btn"&gt;&lt;/button&gt;<br />&lt;!-- 简化版 --&gt;<br />&lt;button @:click = "btn"&gt;&lt;/button&gt;<br />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="// 原始版 btn: function(str){ console.log(str); }, // 简化版 btn(str){ console.log(str); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// 原始版</span> btn: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">str</span>)</span>{ <span class="hljs-built_in">console</span>.log(str); }, <span class="hljs-comment">// 简化版</span> btn(str){ <span class="hljs-built_in">console</span>.log(str); }</code></pre> <p>}</p> </li> </ul> <p>v-model</p> <ul> <li>双向数据绑定</li> <li>输入框输入值,msg会自动同步</li> <li>只能与表单元素进行使用,才能实现数据绑定(input,select,textarea...),只要能和用户交互就可以实现数据绑定</li> <li> <p>data &lt;----&gt; 页面</p> <p>&lt;input type = "type" v-model = "msg"/&gt;</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="msg: &quot;双向数据绑定&quot;" 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">msg:</span> <span class="hljs-string">"双向数据绑定"</span></code></pre> <p>}</p> </li> </ul> <p>v-for与:key</p> <p>v-for(遍历的item项, 索引) in <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a> :key="item.id"</p> <ul> <li>可以遍历<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a></li> <li> <p>尽量使用v-for时,要添加:key,取值:number与string</p> <p>&lt;!-- 正式版 --&gt;<br />&lt;li v-for = "(item, i) in arr" :key="item.id"&gt;</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=" <p>索引: {{i}}, 值: {{item}}</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>索引: {{i}}, 值: {{item}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre> <p>&lt;/li&gt;<br />&lt;!-- 简写版 --&gt;<br />&lt;li v-for="item in arr" :key="item.id"&gt;{{item}}&lt;/li&gt;</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="arr: [&quot;张三&quot;, &quot;李四&quot;, &quot;王五&quot;]" 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">arr:</span> [<span class="hljs-string">"张三"</span>, <span class="hljs-string">"李四"</span>, <span class="hljs-string">"王五"</span>]</code></pre> <p>}</p> </li> </ul> <p>v-if与v-show</p> <ul> <li>语法: v-if=""</li> <li>作用:显示与隐藏</li> <li>区别: v-if通过动态创建移除进行显示隐藏,此方法比较消耗CPU</li> <li>区别: v-show通过none与black进行显示与隐藏,此方法有初始渲染消耗</li> <li> <p>应用场景: 切换次数多使用 v-show,切换次数少使用 v-if</p> <p>&lt;!-- v-if 语法 --&gt;<br />&lt;button @click="flag=!=flag"&gt;&lt;/button&gt;<br />&lt;h1 v-if="flag"&gt;显示与隐藏&lt;/h1&gt;</p> <p>&lt;!-- v-show 语法 --&gt;<br />&lt;button @click="flag"&gt;&lt;/button&gt;<br />&lt;h1 v-show="flag"&gt;显示与隐藏&lt;/h1&gt;</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="flag: true" 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">flag:</span> <span class="hljs-literal">true</span></code></pre> <p>}</p> </li> </ul> <p>v-if与v-else</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="<button @click=&quot;flag=!flag&quot;></button></p> <h1 v-if=&quot;flag&quot;>显示</h1> <h1 v-else>隐藏</h1> <p>data {<br /> flag: true<br /> }</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"flag=!flag"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"flag"</span>&gt;</span>显示<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-else</span>&gt;</span>隐藏<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> data { flag: true } </code></pre> <p>绑定class样式</p> <ul> <li> <p>绑定具体类名</p> <p>.a{color: red;}<br />.b{font-size: 18px;}</p> <p>/<em> 固定版 </em>/<br />&lt;h1 :class="['a', 'b']"&gt;&lt;/h1&gt;<br />/<em> 动态版 </em>/<br />&lt;h1 :class="[flag ? a : b]"&gt;&lt;/h1&gt;<br />&lt;button @click="flag=!flag"&gt;切换&lt;/button&gt;<br />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="flag: true" 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">flag:</span> <span class="hljs-literal">true</span></code></pre> <p>}</p> </li> </ul> <p>方法</p> <p>方法-Vue.$set()</p> <ul> <li>语法: Vue.$set(为那个对象挂属性, 新属性名称, 新属性值)</li> <li> <p>应用场景: 如果想在data动态一个值,就需要此方法</p> <p>{{user.name}}</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="user: {name: &quot;zs&quot;}" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">user</span>: {<span class="hljs-attribute">name</span>: <span class="hljs-string">"zs"</span>}</code></pre> <p>}<br />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="add(){ this.$set(this.user, &quot;age&quot;, 18) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>add(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$<span class="hljs-keyword">set</span>(<span class="hljs-keyword">this</span>.user, <span class="hljs-string">"age"</span>, <span class="hljs-number">18</span>) }</code></pre> <p>}</p> </li> </ul> <p>方法-Vue.$mount()</p> <ul> <li> <p>如果el与$mount同时使用了, el优先级最高</p> <p><a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> vm = new 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="data:{}, methods: {}" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code><span class="hljs-class"><span class="hljs-keyword">data</span>:{},</span> <span class="hljs-title">methods</span>: {}</code></pre> <p>})</p> <p>vm.$mount("#box");</p> </li> </ul> <p>配置对象</p> <p>渲染模板template</p> <ul> <li>此属性是渲染模板,templat属性接受的值为字符串</li> <li> <p>此优先级比el高,会把el的覆盖并替换</p> <p>&lt;h3&gt;{{msg}}&lt;/h3&gt;</p> <p><a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> vm = new 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="el: &quot;#box&quot;, template: &quot; <h1>{{msg}}</h1> <p>&quot;,<br /> data: {<br /> msg: &quot;Vue&quot;<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">el:</span> <span class="hljs-string">"#box"</span>, <span class="hljs-string">template:</span> <span class="hljs-string">"&lt;h1&gt;{{msg}}&lt;/h1&gt;"</span>, <span class="hljs-string">data:</span> { <span class="hljs-symbol"> msg:</span> <span class="hljs-string">"Vue"</span> }</code></pre> <p>})</p> </li> </ul> <p>过滤器</p> <p>输出数据时,需要对数据进行格式上的处理,并将结果呈现到页面上,使用Vue提供的过滤器</p> <ul> <li>语法:待处理数据 | dateFormat,| 术语:管道符</li> <li>如果在插值表达式中,结果为过滤器处理后的</li> <li>只能用在插值表达式与v-bind中</li> <li> <p>可以连续设置过滤器</p> <p>&lt;p&gt;{{str | dateFormat}}&lt;/p&gt;<br />&lt;!-- 调用传参 --&gt;<br />&lt;p&gt;{{str | dateFormat()}}&lt;/p&gt;<br />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="str: &quot;2018-01-25T02:02.045z&quot;" 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">str:</span> <span class="hljs-string">"2018-01-25T02:02.045z"</span></code></pre> <p>}</p> </li> </ul> <p>创建全局过滤器</p> <ul> <li>Vue.filter("过滤器名称", 处理函数);</li> <li>处理函数的第一形参,名称是约定好的originVal, 第一个参数为管道符左侧的值</li> <li>处理函数的第二形参,为调用过滤器的参数</li> <li>处理完毕后需要使用return出去</li> <li> <p>需要在全局创建</p> <p>Vue.filter("dateFormat", (originVal)=&gt;{</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="const dt = new Date(originVal) const y = dt.getFullYear(); return y;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> dt = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(originVal) <span class="hljs-keyword">const</span> y = dt.getFullYear(); <span class="hljs-keyword">return</span> y;</code></pre> <p>})</p> </li> </ul> <p>创建私有过滤器</p> <ul> <li>私有过滤器名称为filters,可以创建多个过滤器</li> <li> <p>只能被当前所属的实例所控制的区域使用</p> <p><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> vm = new 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="el: &quot;&quot;, filters: { 过滤器名称: ()=>{</p> <p> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>el: <span class="hljs-string">""</span>, filters: { 过滤器名称: <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{ } }</code></pre> <p>})</p> </li> </ul> <p>实例生命周期</p> <p>每一个vm实例,在创建、运行、销毁的三个阶段,都会依次触发事件,这些事件就是生命周期函数</p> <p><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> <p>生命周期函数分类</p> <ul> <li> <p>创建期间的生命周期函数(一辈子只执行一次)</p> <ul> <li>beforeCreate: ()=&gt;{}</li> <li>created: ()=&gt;{}</li> <li>beforeMount: ()=&gt;{}</li> <li>mounted: ()=&gt;{}</li> </ul> </li> <li> <p>运行期间的生命周期函数</p> <ul> <li>beforeUpdate: ()=&gt;{} 数据新的,页面老的</li> <li>updated: ()=&gt;{} 页面和数据都是最新的</li> </ul> </li> <li> <p>销毁期间的生命周期函数</p> <ul> <li>beforeDestroy: ()=&gt;{} 销毁之前 但是可以正常工作</li> <li>destroyed: ()=&gt;{} 销毁之后 无法正常工作了</li> </ul> </li> </ul> <p>生命周期函数介绍</p> <ol> <li> <p>beforeCreate: ()=&gt;{} 比方科瑞特</p> <ol> <li>这个时候data与methods还没有初始化</li> </ol> </li> <li> <p>created: ()=&gt;{} 科瑞唉特d</p> <ol> <li>这个时候data与methods已经初始化完毕</li> <li>如果要获取首屏数据就在此方法进行ajax请求</li> </ol> </li> <li> <p>beforeMount: ()=&gt;{} 比方忙特</p> <ol> <li>当执行到beforeMount 就进行入了创建阶段的第三个生命周期函数,将内存的HMTL结构渲染到页面,但并未开始渲染</li> </ol> </li> <li> <p>mounted: ()=&gt;{} 忙提特</p> <ol> <li>这个阶段正在把内存中渲染好的<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>结构替换到页面中,覆盖到el区域中</li> <li>初始化JS插件,在此时比较合适,类似(轮播图插件,区域滚动之类的)</li> </ol> </li> <li> <p>beforeUpdate: ()=&gt;{}</p> <ol> <li>这个阶段就标识data数据发生了变化,data数据最新的,但用户界面还是老的</li> </ol> </li> <li> <p>updated: ()=&gt;{}</p> <ol> <li>此时页面已经刷新。此时data和页面都是最新的</li> </ol> </li> <li> <p>beforeDestroy: ()=&gt;{}</p> <ol> <li>此时vm实例即将被销毁,但是可以使用vm</li> </ol> </li> <li> <p>destroyed: ()=&gt;{}</p> <ol> <li>此时vm已经销毁了,无法正常工作了</li> </ol> </li> </ol> <p>使用ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>发起ajax请求</p> <p>axios只能发起get与post请求,无法发起jsonp请求,如果涉及到jsonp可以在后端设置<a href="http://www.js-code.com/tag/cors" title="CORS" target="_blank">CORS</a>跨域资源共享</p> <p>请求方式</p> <ul> <li> <p>axios</p> <ul> <li>只支持 get 与 post</li> <li>无法发起jsonp请求</li> <li>如果涉及到了jsonp请求,让后端小伙伴设置一个<a href="http://www.js-code.com/tag/cors" title="CORS" target="_blank">CORS</a>跨域资源共享</li> </ul> </li> <li> <p>vue-resource</p> <ul> <li>可以发起jsonp请求,官方不推荐,作者不更新了</li> </ul> </li> </ul> <p>语法</p> <p>在引入axios包时,全局就多了一个axios成员</p> <p>get请求</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="// 返回值是 promise 实例对象 let result = axios.get(&quot;地址?请求参数&quot;); // 通过 then 指定回调, 就可以拿到服务器返回的数据 result.then((myresult)=>{<br /> // 返回数据就在 myresult.data 身上<br /> console.log(myresult);<br /> })</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// 返回值是 promise 实例对象</span> <span class="hljs-keyword">let</span> result = axios.get(<span class="hljs-string">"地址?请求参数"</span>); <span class="hljs-comment">// 通过 then 指定回调, 就可以拿到服务器返回的数据</span> result.then(<span class="hljs-function">(<span class="hljs-params">myresult</span>)=&gt;</span>{ <span class="hljs-comment">// 返回数据就在 myresult.data 身上</span> <span class="hljs-built_in">console</span>.log(myresult); }) </code></pre> <p>Vue中使用get请求</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="<button @click=&quot;btn&quot;></button></p> <p>// 需要在全局下设置<br /> Vue.prototype.$http = axios;</p> <p>methods: {<br /> btn(){<br /> //1. 调用axios发起get请求, 返回值是实例对象, 调用实例对象的<br /> axios.get(&quot;地址&quot;).then((result)=>{<br /> result.data<br /> });</p> <p> //2.<br /> this.$http.get(&quot;地址&quot;).then((result)=>{<br /> result.data<br /> })<br /> }<br /> }</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>&lt;button <span class="hljs-meta">@click</span>=<span class="hljs-string">"btn"</span>&gt;&lt;/button&gt; <span class="hljs-comment">// 需要在全局下设置</span> Vue.prototype.$http = axios; methods: { btn(){ <span class="hljs-comment">//1. 调用axios发起get请求, 返回值是实例对象, 调用实例对象的</span> axios.<span class="hljs-keyword">get</span>(<span class="hljs-string">"地址"</span>).then((result)=&gt;{ result.<span class="hljs-keyword">data</span> }); <span class="hljs-comment">//2. </span> <span class="hljs-keyword">this</span>.$http.<span class="hljs-keyword">get</span>(<span class="hljs-string">"地址"</span>).then((result)=&gt;{ result.<span class="hljs-keyword">data</span> }) } } </code></pre> <p>post请求</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="axios.post(&quot;地址&quot;, {name: &quot;zs&quot;, age: 18}).then(()=>{</p> <p>})</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>axios.post(<span class="hljs-string">"地址"</span>, {name: <span class="hljs-string">"zs"</span>, age: <span class="hljs-number">18</span>}).<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{ }) </code></pre> <p>axios高级用法</p> <p>全局配置请求<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</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="// 全局配置 axios 请求 API 接口时候的根路径 axios.defaults.baseURL = &quot;http://www.liulongbin.top:3005&quot;; Vue.prototype.$http = axios; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-comment">// 全局配置 axios 请求 <a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a> 接口时候的根路径</span> axios.defaults.baseURL = <span class="hljs-string">"http://www.liulongbin.top:3005"</span>; Vue.prototype.$http = axios; </code></pre> <p>拦截器实现loading效果</p> <ul> <li> <p>拦截器分两部分</p> <ul> <li> <p>请求开始时候的拦截器</p> <ul> <li></li> </ul> </li> <li> <p>请求完毕以后的拦截器</p> <ul> <li>只要有请求被完成, 则会触发 response 拦截器,</li> </ul> </li> </ul> </li> <li>需要在实例 created 生命周期函数内 注册 request 与 response 拦截器</li> </ul> <p>动画</p> <p>只能实现简单的动画,内容需要 transition 标签才能实现过渡动画,动画需要在style标签内设置</p> <ol> <li> <p>动画分为两部分</p> <ol> <li>入场动画,不可见(flag=false) -- 可见(flag=true)</li> <li>出场动画,可见(flag=true) -- 不可见(flag=false)</li> </ol> </li> <li> <p>入场时候</p> <ol> <li>v-enter 入场前的样式</li> <li>v-enter-to 入场完成以后的样式,一般不使用</li> <li>v-enter-active 入场的时间段</li> </ol> </li> <li> <p>离场时候</p> <ol> <li>v-leave 离场前的样式</li> <li>v-leave-to 离场完成以后的样式</li> <li>v-leave-active 离场的时间段</li> </ol> </li> </ol> <ul> <li>过渡动画不一定和 v-if 与 v-show 使用</li> <li>列表过渡不需要配合</li> <li>单个元素过渡需要 v-if 与 v-show 来配合使用</li> </ul> <p>第三库动画库</p> <p>单个元素使用</p> <ol> <li>将需要过渡动画用 transition 包裹起来</li> <li> <p>给 transition 添加入场与离场动画</p> <ol> <li>enter-active-class="" 入场时候的类名</li> <li>leave-active-class="" 离场时候的类名</li> </ol> </li> </ol> <p>多个元素使用</p> <ol> <li>多个元素需要过渡动画,需要用 transition-group 进行包裹</li> <li>需要在 style 定义两组类,Vue提供的过渡动画</li> </ol> <p>计算属性</p> <ul> <li> <p>如果计算属性所指向的 function 中, data上的数据发生了变化,则会重新计算属性重新求值</p> <p>computed: {</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="funllname: function(){}" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code style="word-break: break-word; white-space: initial;">funllname: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{}</code></pre> <p>}</p> </li> </ul> <p>Vue配置webpack</p> <p>安装传统的安装webpack,在导入Vue组件的时候会出现报错,因为默认导入时阉割版的Vue,开发时需要手动进行指定正常版的Vue,并导入进去</p> <ol> <li>运行 cnpm i vue -S 把 vue 安装到项目依赖</li> <li> <p>在 index.js 中使用 import 导入 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="import Vue from 'vue'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span></code></pre> </li> <li> <p>在 index.html 中创建将来要被 vm 实例控制的 div:</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 就是 Vue实例 要控制的区域 --></p> <div id=&quot;#app&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-comment">&lt;!-- 将来,这个 div 就是 Vue实例 要控制的区域 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"#app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> </li> <li> <p>在 index.js 中创建 vm 实例,并使用 el 指定要控制的区域,使用 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="const vm = new Vue({ el: '#app', // 要控制的区域 data: { msg: 'ok' // 要渲染的数据 } }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> vm = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, <span class="hljs-comment">// 要控制的区域</span> data: { msg: <span class="hljs-string">'ok'</span> <span class="hljs-comment">// 要渲染的数据</span> } }) </code></pre> </li> </ol> <p>关于基于webpack的vue项目报错</p> <ol> <li>因为使用 import 导入的 vue 模块,导入的并不是功能最全的 vue 包;而是删减版的;</li> <li>删减版的 vue 包中功能很少,目的是为了减小vue 包的体积,因为文件越小,网络请求越快!</li> <li> <p>如何让 import 导入最全的 vue 包呢?</p> <ul> <li>打开 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules 目录,找到 vue 包所在的文件夹</li> <li>打开文件夹中的 package.json,找到 module 节点</li> <li>把 module 节点所对应的 dist/vue.runtime.esm.js 路径,修改为 dist/vue.min.js 即可</li> </ul> </li> <li>暂时 import 最全的 vue 包;等开发项目的时候,一定要使用 删减版的 包;</li> </ol> <p>组件</p> <p>模块化和组件化概念</p> <ol> <li> <p>模块化:以代码角度思考, 把可复用的代码,抽离为单独的模块</p> <ol> <li></li> </ol> </li> <li> <p>组件化:以UI角度思考, 把可复用的UI结构,抽离为单独的模块</p> <ol> <li>方便了UI结构的重用</li> <li>随着项目开发的深入,组件手里的组件会越来越多</li> <li>可以直接使用第三方组件库</li> <li>让程序猿跟专注于代码逻辑</li> </ol> </li> </ol> <p>定义组件</p> <p></code></p>

总结

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

Vue框架

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

Vue框架

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

80%的人都看过