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

Vue2.0一——入门简介、MVVM、安装、组件、模块化

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h4><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>简介</h4> <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的作者是世界华人的骄傲——尤雨溪,初衷是感到angular的api设计很繁琐 学习曲线很陡峭 于是就自己开始造轮子 逐渐的14年的时候开源了vue前端开发库 通过简洁的api提供高效的数据绑定和灵活的组件系统 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>的作者是世界华人的骄傲——尤雨溪,初衷是感到angular的api设计很繁琐 学习曲线很陡峭 于是就自己开始造轮子 逐渐的14年的时候开源了vue前端开发库 通过简洁的api提供高效的数据绑定和灵活的组件系统 </code></pre> <h4>MVVM数据绑定</h4> <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>="本质是通过数据绑定链接的view和model 让数据的变化自动映射为试图的更新<br /> 在数据绑定的api设计上借鉴了angular的指令机制</p> <p><!-- 指令 --><br /> <span v-text=&quot;msg&quot;></span><br /> <!-- 插值 --><br /> <span>{{msg}}</span><br /> <!-- 双向绑定 --><br /> <input v-model=&quot;msg&quot;> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>本质是通过数据绑定链接的view和model 让数据的变化自动映射为试图的更新 在数据绑定的api设计上借鉴了angular的指令机制 <span class="hljs-comment">&lt;!-- 指令 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a></span>=<span class="hljs-string">"msg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-comment">&lt;!-- 插值 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-comment">&lt;!-- <a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="浏览关于“双向绑定”的文章" target="_blank" class="tag_link">双向绑定</a> --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>put</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"msg"</span>&gt;</span> </code></pre> <p>与<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>不同的是,<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>里并没有繁杂的module、controller、scope、factory、service等概念,一切都是以“ViewModel 实例”为基本单位</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>="<!-- 模板 --></p> <div id=&quot;app&quot;> {{msg}} </div> <p>// 创建一个 ViewModel 实例<br /> var vm = new Vue({<br /> // 选择目标元素<br /> el: '#app',<br /> // 提供初始数据<br /> data:'hello'<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-comment">&lt;!-- 模板 --&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> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> {{msg}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> // 创建一个 ViewModel 实例 <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> vm = <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a> Vue({ // 选择目标元素 el: '#app', // 提供初始数据 data:'hello' })</code></pre> <h4>安装 环境搭建</h4> <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)不使用脚手架 1. cnpm i vue -S 2. 单页面应用删除一些不需要的 减chunks 压缩 3. 在app,js里 引入 import Vue from 'vue' cosole.log(Vue) 测试 npm run dev 4.在index.html里创建div#root 5.渲染 注册 页面初步渲染 6.import Vue from './Vue/dist/Vue.js' 7.webpack别名配置 webpack.config.js resolve:{ alias:{ 'vue$': 'vue/dist/vue.js' } } 改app.js中import Vue from 'vue' (2)使用脚手架搭建 (推荐,毕竟成熟 省的自己写bug) 1、安装包工具: yarn替换npm的工具 2、装yarn: mac:brew install yarn 3、全局装vue-cli: yarn install vue-cli 4、初始化vue项目: $:vue init webpack lagou 一直回车 vue-router Y ESlint No Kama N e2e N $:tree $:yarn install (yarn 的淘宝镜像) $: yarn config set registry https://registry.npm.taobao.org 5、安装依赖 $: yarn install $:cnpm i 6、运行 $: npm run dev index.js中的30行 port:4000 false cnpm i mint-ui -S cnpm i axios -S cnpm i sass-loader node-sass -D " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>(<span class="hljs-number">1</span>)不使用脚手架 <span class="hljs-number">1.</span> cnpm i vue -S <span class="hljs-number">2.</span> 单页面应用删除一些不需要的 减chunks 压缩 <span class="hljs-number">3.</span> 在app,js里 引入 <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> cosole.log(Vue) 测试 <span class="hljs-built_in">npm</span> run dev <span class="hljs-number">4.</span>在index.html里创建div<span class="hljs-comment">#root</span> <span class="hljs-number">5.</span>渲染 注册 页面初步渲染 <span class="hljs-number">6.</span><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'./Vue/dist/Vue.js'</span> <span class="hljs-number">7.</span>webpack别名配置 webpack.config.js resolve:{ alias:{ <span class="hljs-string">'vue$'</span>: <span class="hljs-string">'vue/dist/vue.js'</span> } } 改app.js中<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> (<span class="hljs-number">2</span>)使用脚手架搭建 (推荐,毕竟成熟 省的自己写bug) <span class="hljs-number">1</span>、安装包工具: yarn替换<span class="hljs-built_in">npm</span>的工具 <span class="hljs-number">2</span>、装yarn: mac:brew inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> yarn <span class="hljs-number">3</span>、全局装vue-cli: yarn install vue-cli <span class="hljs-number">4</span>、初始化vue项目: $:vue init webpack lagou 一直回车 vue-router Y ESl<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a> No Kama N e2e N $:tree $:yarn install (yarn 的淘宝镜像) $: yarn config set regis<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a> https:<span class="hljs-regexp">//</span>registry.<span class="hljs-built_in">npm</span>.taobao.org <span class="hljs-number">5</span>、安装依赖 $: yarn install $:cnpm i <span class="hljs-number">6</span>、运行 $: <span class="hljs-built_in">npm</span> run dev index.js中的<span class="hljs-number">30</span>行 port:<span class="hljs-number">4000</span> <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> cnpm i mint-ui -S cnpm i ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a> -S cnpm i sass-loader <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>-sass -D </code></pre> <h4>组件</h4> <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=" 在大型的应用中,为了分工、复用和可维护性,我们不可避免地需要将应用抽象为多个相对独立的模块。 在较为传统的开发模式中,我们只有在考虑复用时才会将某一部分做成组件; 但实际上,应用类 UI 完全可以看作是全部由组件树构成的 组件可以扩展 HTML 元素,封装可重用的代码。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code> 在大型的应用中,为了分工、复用和可维护性,我们不可避免地需要将应用抽象为多个相对独立的模块。 在较为传统的开发模式中,我们只有在考虑复用时才会将某一部分做成组件; 但实际上,应用类 UI 完全可以看作是全部由组件树构成的 组件可以扩展 <a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> 元素,封装可重用的代码。 </code></pre> <p>1、全局注册组件</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=" Vue.component('my-component', {<br /> // 模板<br /> template: '</p> <div>{{msg}} {{<a href="http://www.js-code.com/tag/private" title="private" target="_blank">private</a>Msg}}</div> <p>',<br /> // 接受参数<br /> props: {<br /> msg: Str<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g </p> <p> },<br /> // 私有数据,需要在函数中返回以避免多个实例共享一个对象<br /> data: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {<br /> <a href="http://www.js-code.com/tag/private" title="private" target="_blank">private</a>Msg: 'component!'<br /> }<br /> }<br /> })</p> <p> <my-component msg=&quot;hello&quot;></my-component><br /> 渲染结果:</p> <div>hello component!</div> <p> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code> Vue.component(<span class="hljs-string">'my-component'</span>, { <span class="hljs-comment">// 模板</span> template: <span class="hljs-string">'&lt;div&gt;{{msg}} {{<a href="http://www.js-code.com/tag/private" title="浏览关于“private”的文章" target="_blank" class="tag_link">private</a>Msg}}&lt;/div&gt;'</span>, <span class="hljs-comment">// 接受参数</span> props: { <span class="hljs-attr">msg</span>: <span class="hljs-built_in"><a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a></span>&lt;br&gt; }, <span class="hljs-comment">// 私有数据,需要在函数中返回以避免多个实例共享一个对象</span> data: <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { <span class="hljs-attr">privateMsg</span>: <span class="hljs-string">'component!'</span> } } }) &lt;my-component msg=<span class="hljs-string">"hello"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span> 渲染结果: <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>hello component!<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </span></code></pre> <p>2、模板组件</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="abc.vue文件中 <template></p> <div class=&quot;my-component&quot;> <h2>Hello from {{msg}}</h2> <p> <other-component></other-component> </div> <p> </template></p> <p> <script> // 遵循 CommonJS 模块格式 <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> otherComponent = require('./other-component') 或<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> otherComponent from './otherComponent' // 导出组件定义 module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s = { data: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { msg: 'vue-loader' } }, components: { 'other-component': otherComponent } } </script> </p> <style> .my-component h2 { color: red; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>abc.vue文件中 <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-component"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Hello from {{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">other-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">other-component</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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-comment">// 遵循 CommonJS 模块格式</span> <span class="hljs-keyword">var</span> otherComponent = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./other-component'</span>) 或<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a> <span class="hljs-keyword">import</span> otherComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./otherComponent'</span> <span class="hljs-comment">// 导出组件定义</span> <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <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">msg</span>: <span class="hljs-string">'vue-loader'</span> } }, <span class="hljs-attr">components</span>: { <span class="hljs-string">'other-component'</span>: otherComponent } } </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="css"> <span class="hljs-selector-class">.my-component</span> <span class="hljs-selector-tag">h2</span> { <span class="hljs-attribute">color</span>: red; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <h4>模块化管理 =&gt; <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> &amp; commenjs</h4> <p>es6 &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="暴露对象的两种方式 a. name.js: const Name = {} export { Name } app.js import { Name } from './name' b. name.js const Name = {} export default Name app.js import name form './name' 注意:一个模块只能有一个default c.如果是两个 const Name = {} const Age = {} export { Name, Age as default} app.js import Age,{Name} form './name' " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code>暴露对象的两种方式 a. <span class="hljs-keyword"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>.js: <a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> <span class="hljs-keyword">Name</span> = {} export { <span class="hljs-keyword">Name</span> } app.js <span class="hljs-keyword">import</span> { <span class="hljs-keyword">Name</span> } from <span class="hljs-string">'./name'</span> b. <span class="hljs-keyword">name</span>.js const <span class="hljs-keyword">Name</span> = {} export <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-keyword">Name</span> app.js <span class="hljs-keyword">import</span> <span class="hljs-keyword">name</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a></span> <span class="hljs-string">'./name'</span> 注意:一个模块只能有一个<span class="hljs-keyword">default</span> c.如果是两个 const <span class="hljs-keyword">Name</span> = {} const Age = {} export { <span class="hljs-keyword">Name</span>, Age as <span class="hljs-keyword">default</span>} app.js <span class="hljs-keyword">import</span> Age,{<span class="hljs-keyword">Name</span>} <span class="hljs-keyword"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m</span> <span class="hljs-string">'./name'</span> </code></pre> <p>commenjs &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="定义模块: var Name = {} module.exports = Name 引用模块: var name = require ('./name') 如果没有webpack浏览器不能执行 没有require方法 注:webpack是如何将commenjs运行在浏览器中的? 分析app.js打包后的js ( bind只绑定 不执行 call apply 会执行) 注:commenjs 与 AMD: commenjs相比requirejs规范AMD是静态的,commenjs是同步的, 但是commenjs规范是运行在node环境下的 没有nodejs就不能运行, 需要在浏览器端实现,实现工具就是webpack, webpack会将commenjs规范翻译成浏览器可以编译的语言, 借助webpack打包完运行即可,速度快 AMD是异步的需要一些模块加载完才能调用 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>定义模块: <span class="hljs-keyword">var</span> Name = {} <span class="hljs-built_in">module</span>.exports = Name 引用模块: <span class="hljs-keyword">var</span> name = <span class="hljs-built_in">require</span> (<span class="hljs-string">'./name'</span>) 如果没有webpack浏览器不能执行 没有<span class="hljs-built_in">require</span>方法 注:webpack是如何将commenjs运行在浏览器中的? 分析app.js打包后的js ( bind只绑定 不执行 call apply 会执行) 注:commenjs 与 AMD: commenjs相比requirejs规范AMD是静态的,commenjs是同步的, 但是commenjs规范是运行在node环境下的 没有nodejs就不能运行, 需要在浏览器端实现,实现工具就是webpack, webpack会将commenjs规范翻译成浏览器可以编译的语言, 借助webpack打包完运行即可,速度快 AMD是异步的需要一些模块加载完才能调用 </code></pre> <p></code></p>

总结

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

Vue2.0一——入门简介、MVVM、安装、组件、模块化

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

Vue2.0一——入门简介、MVVM、安装、组件、模块化

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

80%的人都看过