<p><code></p> <h4> <a href="https://github.com/sueRimn/Blog/blob/master/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/README.md" rel="nofollow noreferrer" target="_blank">Github</a>原文阅读</h4> <h2 id="articleHeader0">MVVM(Model-View-ViewModel)模型</h2> <p><span class="img-wrap"><img data-src="/img/remote/1460000018585077?w=771&amp;h=232" src="/img/remote/1460000018585077?w=771&amp;h=232" alt="" title="" style="cursor: pointer; display: inline;"></span><br /><code>MVVM</code>分为<code>Model</code>、<code>View</code>、<code>ViewModel</code>三部分。</p> <ul> <li> <code>Model</code>代表数据模型,定义数据和业务逻辑,访问数据层</li> <li> <code>View</code>代表视图,展示页面结构、布局和外观(UI)</li> <li> <code>ViewModel</code>代表视图模型,负责监听<code>Model</code>数据变化并更新视图,处理用户交互</li> </ul> <p><code>Model</code>和<code>View</code>是通过<code>ViewModel</code>,<code>Model</code>的数据变化会触发<code>View</code>的更新,<code>View</code>的交互操作也会使<code>Model</code>的数据发生改变。只需要针对数据进行维护操作,数据的自动同部不需要通过操作<code>dom</code>实现。</p> <h2 id="articleHeader1"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>指令</h2> <table> <thead> <tr> <th>指令</th> <th>作用</th> <th>期望数值类型</th> </tr> </thead> <tbody> <tr> <td>v-text</td> <td>更新元素文本内容</td> <td>string</td> </tr> <tr> <td>v-html</td> <td>更新元素的<code>inner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></code> </td> <td>string</td> </tr> <tr> <td>v-show</td> <td>条件渲染。根据表达式的真假值,控制元素的显示或隐藏</td> <td>any</td> </tr> <tr> <td>v-if</td> <td>条件渲染。根据表达式的值的真假条件选择是否渲染元素这个节点</td> <td>any</td> </tr> <tr> <td>v-else</td> <td>条件渲染。根据<code>v-if</code>的相反条件进行元素渲染</td> <td>any</td> </tr> <tr> <td>v-else-if</td> <td>条件渲染。做<code>v-if</code>的链式调用</td> <td>any</td> </tr> <tr> <td>v-for</td> <td>列表渲染。对数据进行遍历渲染,最好提供<code>key</code>值</td> <td><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a> / Object / number / string</td> </tr> <tr> <td>v-on</td> <td>事件处理。绑定事件监听器,事件类型由参数指定,表达式可以是方法名或内联语句。</td> <td>Function / Inline <a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>ment / Object</td> </tr> <tr> <td>v-bind</td> <td>动态绑定。动态绑定一个或多个特性,或一个组件<code>prop</code>到表达式</td> <td>any (with argument) / Object (without argument)</td> </tr> <tr> <td>v-model</td> <td>表单绑定。在表单或组件是上创建<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a></td> <td>随表单控件类型变化</td> </tr> <tr> <td>v-pre</td> <td>跳过该元素和它的子元素的编译过程</td> <td> </td> </tr> <tr> <td>v-cloak</td> <td>设置 <code>[v-cloak] { display: none }</code>可以在渲染时延后加载<code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code>实例,避免闪现</td> <td> </td> </tr> <tr> <td>v-once</td> <td>元素和组件只渲染一次,重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过</td> <td> </td> </tr> </tbody> </table> <h2 id="articleHeader2"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>响应式原理</h2> <p><span class="img-wrap"><img data-src="/img/remote/1460000018585078?w=1200&amp;h=750" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br /><code>Vue</code>实例化时,遍历访问<code>data</code>的所有属性,使用<code> Object.define<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>erty </code>将其属性全部转换为<code>getter/setter</code>进行依赖追踪以便修改属性时进行变更通知,每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 <code>setter</code> 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。</p> <h2 id="articleHeader3">Vue双向数据绑定</h2> <p>简单实现,有一个子组件输入框,一个按钮,父组件通过<code>props</code>传值给子组件,当按钮增加时,子组件通过<code>$emit</code>通知父组件修改相应的<code>props</code>值。<br /><span class="img-wrap"><img data-src="/img/bVbp8Zk?w=312&amp;h=129" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></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 id=&quot;app&quot;> <parent></parent> </div> <p> <script><br /> var childNode = {<br /> template:`</p> <div class = &quot;child&quot;> <div> <span>子组件数据</span><br /> <input v-model=&quot;childMsg&quot;><br /> <button @click=add>+1</button> </div> </p></div> <p> `,<br /> data(){<br /> return{<br /> childMsg:0<br /> }<br /> },<br /> methods: {<br /> add(){<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.childMsg++;<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('update:foo',<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.childMsg)<br /> }<br /> }<br /> };<br /> var parentNode = {<br /> template:`</p> <div class=&quot;parent&quot;> <div> <span>父组件数据:{{msg}}</span><br /> <child :foo.sync=&quot;msg&quot;></child> </div> </p></div> <p> `,<br /> components:{<br /> 'child':childNode<br /> },<br /> data(){<br /> return{<br /> 'msg':0<br /> }<br /> }<br /> };<br /> let vm = new Vue({<br /> el:'#app',<br /> components:{<br /> 'parent':parentNode<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript">&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id=<span class="hljs-string">"app"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">parent</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">parent</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; &lt;script&gt; var childNode = { template:` &lt;div class = "child"&gt; &lt;div&gt; &lt;span&gt;子组件数据&lt;/</span>span&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"childMsg"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">add</span>&gt;</span>+1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; `, data(){ return{ childMsg:0 } }, methods: { add(){ this.childMsg++; this.$emit('update:foo',this.childMsg) } } }; var parentNode = { template:` &lt;div class="parent"&gt; &lt;div&gt; &lt;span&gt;父组件数据:{{msg}}&lt;/</span>span&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">child</span> <span class="hljs-attr">:foo.sync</span>=<span class="hljs-string">"msg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; &lt;/</span>div&gt; <span class="hljs-string">`, components:{ 'child':childNode }, data(){ return{ 'msg':0 } } }; <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> vm = new Vue({ el:'#app', components:{ 'parent':parentNode } })</span></code></pre> <h2 id="articleHeader4">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></h2> <p><span class="img-wrap"><img data-src="/img/remote/1460000018585079?w=1200&amp;h=3039" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <table> <thead> <tr> <th>钩子</th> <th>调用</th> <th>类型</th> <th>是否在服务端渲染期间调用</th> </tr> </thead> <tbody> <tr> <td>beforeCreate</td> <td> <code>Vue</code>实例初始化之后,数据观察和事件配置之前</td> <td>Function</td> <td>Yes</td> </tr> <tr> <td>create</td> <td>实例创建完成(数据观察/属性和方法运算/事件回调)之后,挂载之前</td> <td>Function</td> <td>Yes</td> </tr> <tr> <td>beforeMount</td> <td>挂载开始之前,<code>render</code>函数首次调用</td> <td>Function</td> <td>Yes</td> </tr> <tr> <td>mounted</td> <td>实例挂载完成之后</td> <td>Function</td> <td>No</td> </tr> <tr> <td>beforeUpdate</td> <td> <code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code>被<code>patch</code>之前调用进行数据修改</td> <td>Function</td> <td>No</td> </tr> <tr> <td>updated</td> <td>组件 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 更新完成,避免在此期间更改状态</td> <td>Function</td> <td>No</td> </tr> <tr> <td>actived</td> <td>keep-alive 组件激活时</td> <td>Function</td> <td>No</td> </tr> <tr> <td>deactived</td> <td>keep-alive 组件停用时</td> <td>Function</td> <td>No</td> </tr> <tr> <td>beforeDestroy</td> <td>实例销毁之前</td> <td>Function</td> <td>No</td> </tr> <tr> <td>destroyed</td> <td>实例销毁</td> <td>Function</td> <td>No</td> </tr> <tr> <td>errorCaptured</td> <td>当任何一个来自后代组件的错误时被捕获时<br />收到三个参数:错误对象、发生错误的组件实例,和一个包含错误在何处被捕获信息的字符串<br />返回 false,以阻止该错误继续向上冒泡</td> <td>Function</td> <td>No</td> </tr> </tbody> </table> <h2 id="articleHeader5">Vue组件</h2> <p><span class="img-wrap"><img data-src="/img/remote/1460000018585080?w=1406&amp;h=544" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br />组件可以是页面中每一个区域板块,也可以是某一个复用业务逻辑,也可以是每一个单页面。</p> <h3 id="articleHeader6">组件的构成</h3> <p>就以上面的双向数据绑定实现为例:</p> <ul> <li>属性<code>props</code>:父组件使用<code>props</code>定义数据属性,向子组件传递数据</li> <li>自定义事件<code>event</code>:通过<code>$emit</code>触发自定义事件<code>event</code>向父组件发送消息</li> <li>插槽<code>slot</code>:<code>slot</code>进行组件内容分发,插入子组件内容</li> </ul> <h3 id="articleHeader7">组件通信</h3> <ul> <li>父子组件通信:父组件使用<code>props</code>向子组件通信,子组件使用<code>$emit</code>向父组件传递消息</li> <li>非父子组件通信:父组件可以使用<code>v-on</code>监听子组件的任何事件,子组件使用<code>$emit</code>传入事件,这样父组件就会收到事件并更新</li> <li>跨级组件通信:使用<code>Vuex</code>比较好管理</li> </ul> <h2 id="articleHeader8">Vue-router路由</h2> <p>Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:</p> <ul> <li>嵌套的路由/视图表</li> <li>模块化的、基于组件的路由配置</li> <li>路由参数、查询、通配符</li> <li>基于 Vue.js 过渡系统的视图过渡效果</li> <li>导航控制</li> <li>带有自动激活的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> class 的链接</li> <li><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5 历史模式或 hash 模式,在 IE9 中自动降级</li> <li>自定义的滚动条行为</li> </ul> <p>下面是一个简单路由的实现:<br /><span class="img-wrap"><img data-src="/img/bVbp8Zo?w=240&amp;h=176" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></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 id=&quot;app&quot; class=&quot;demo&quot;> <h1>Hello App!</h1> <p> <!-- 通过router-link导航 --><br /> <!-- 通过传入'to '属性指定链接--><br /> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签--><br /> <router-link to=&quot;/foo&quot;>go to Foo</router-link><br /> <router-link to=&quot;/bar&quot;>go to Bar</router-link> </p> <p> <!-- 路由出口 --><br /> <!-- 路由匹配到的组件将渲染在这里 --><br /> <router-view></router-view> </div> <p> <!-- 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter) 1. 定义 (路由) 组件。 2.定义路由 --><br /> <script><br /> //1. 定义 (路由) 组件。<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> Foo = {template:'</p> <div>foo</div> <p>'};<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> Bar = {template:'</p> <div>bar</div> <p>'};<br /> //2.定义路由<br /> //每个路由应该映射一个组件。其中component可以是通过Vue.extend()创建的组件构造器<br /> //或者只是一个组件配置对象<br /> const routes = [<br /> {path:'/foo',component:Foo},<br /> {path:'/bar',component:Bar}<br /> ]</p> <p> //3.创建router实例,然后传‘routes’配置<br /> const router = new VueRouter({<br /> routes//(缩写)相当于routes:routes<br /> })</p> <p> //4.创建和挂载根实例<br /> //要记得通过router配置参数注入路由,从而让整个应用都有路由功能</p> <p> const app = new Vue({<br /> router<br /> }).$mount('#app');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;div id=<span class="hljs-string">"app"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"demo"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello App!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> &lt;p&gt; &lt;!-- 通过router-link导航 --&gt; &lt;!-- 通过传入'to '属性指定链接--&gt; &lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&lt;a&gt;` 标签--&gt; &lt;router-link to="/foo"&gt;go to Foo&lt;/router-link&gt; &lt;router-link to="/bar"&gt;go to Bar&lt;/router-link&gt; &lt;/p&gt; &lt;!-- 路由出口 --&gt; &lt;!-- 路由匹配到的组件将渲染在这里 --&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;/div&gt; &lt;!-- 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter) 1. 定义 (路由) 组件。 2.定义路由 --&gt; &lt;script&gt; //1. 定义 (路由) 组件。 <a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> Foo = {template:'&lt;div&gt;foo&lt;/div&gt;'}; const Bar = {template:'&lt;div&gt;bar&lt;/div&gt;'}; //2.定义路由 //每个路由应该映射一个组件。其中component可以是通过Vue.extend()创建的组件构造器 //或者只是一个组件配置对象 const routes = [ {path:'/foo',component:Foo}, {path:'/bar',component:Bar} ] //3.创建router实例,然后传‘routes’配置 const router = new VueRouter({ routes//(缩写)相当于routes:routes }) //4.创建和挂载根实例 //要记得通过router配置参数注入路由,从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app');</code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26714.html