<p><code></p> <h1 id="articleHeader0">知识点一:MVVM模式</h1> <p>MVVM之前:</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=" 开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;"> 开发人员从后端获取需要的数据模型,然后要通过<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。</code></pre> <p>MVVM之后:</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=" DOM操作完全封装起来:Model发生了改变,View上自然就会表现出来。用户修改了View,Model中的数据也会跟着改变。 如图所示:" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code> DOM操作完全封装起来:Model发生了改变,View上自然就会表现出来。用户修改了View,Model中的数据也会跟着改变。 如图所示:</code></pre> <p>图片描述</p> <h1 id="articleHeader1">知识点二:Node和NPM</h1> <p>NPM:</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="NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。 步骤一:下载Node.js 完成后可以在控制台输入 node -v //查看版本命令 步骤二:查看npm 安装完成Node应该自带了NPM了,在控制台输入npm -v 命令查看: " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、<a href="http://www.js-code.com/tag/angularjs" title="浏览关于“AngularJS”的文章" target="_blank" class="tag_link">AngularJS</a>、<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Js都有。为了后面学习方便,我们先安装<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>及NPM工具。 步骤一:下载Node.js 完成后可以在控制台输入 node -v <span class="hljs-regexp">//</span>查看版本命令 步骤二:查看<span class="hljs-built_in">npm</span> 安装完成Node应该自带了NPM了,在控制台输入<span class="hljs-built_in">npm</span> -v 命令查看: </code></pre> <h1 id="articleHeader2">知识点三:<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>入门</h1> <h1 id="articleHeader3">1.安装vue</h1> <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="步骤一:进入指定的目录 步骤二:输入`npm init -y`命令进行初始化 步骤三:安装vue,输入命令`npm install vue --save` 发现多了一个node_modules目录" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>步骤一:进入指定的目录 步骤二:输入<span class="hljs-string">`npm init -y`</span>命令进行初始化 步骤三:安装vue,输入命令<span class="hljs-string">`npm install vue --save`</span> 发现多了一个node_modules目录</code></pre> <h1 id="articleHeader4">2.vue渲染</h1> <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;> <h2>{{name}} 非常帅</h2> </div> <p><script src=&quot;./node_modules/vue/dist/vue.js&quot;></script><br /> <script type=&quot;text/javascript&quot;> // 生成一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>实例 var app = new Vue({ el:&quot;#app&quot;, // el,即element。要渲染的的页面元素 data:{ // 数据 name:&quot;虎哥&quot; } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{name}} 非常帅<span class="hljs-tag">&lt;/<span class="hljs-name">h2</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">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">// 生成一个Vue实例</span> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, <span class="hljs-comment">// el,即element。要渲染的的页面元素</span> data:{ <span class="hljs-comment">// 数据</span> name:<span class="hljs-string">"虎哥"</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></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="1.首先通过 new Vue()来创建Vue实例 2.然后构造函数接收一个对象,对象中有一些属性: el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div。 data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code><span class="hljs-number">1.</span>首先通过 new <span class="hljs-type">Vue</span>()来创建<span class="hljs-type">Vue</span>实例 <span class="hljs-number">2.</span>然后构造函数接收一个对象,对象中有一些属性: el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div。 <span class="hljs-class"><span class="hljs-keyword">data</span>:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中。</span> </code></pre> <h1 id="articleHeader5">3.<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a></h1> <p>在上面进行修改:<br />&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> id="app"&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="<input type=&quot;text&quot; v-model=&quot;num&quot;></p> <h2> {{name}} 非常帅,<br /> 有{{num}}位女神为他着迷。<br /> </h2> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"num"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span> {{name}} 非常帅, 有{{num}}位女神为他着迷。 <span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></code></pre> <p>&lt;/<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>&gt;<br />对num进行绑定。</p> <h1 id="articleHeader6">4.事件绑定</h1> <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="<button v-on:click=&quot;num++&quot;>点我</button><br /> " 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">v-on:click</span>=<span class="hljs-string">"num++"</span>&gt;</span>点我<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> </code></pre> <p></code></p>

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