写代码啦
vue初体验
回复数(0) 浏览数(48)
{{topic.upvote_count || 0}} 编辑 回复

1.完整版与非完整版区别

完整版vue.js:同时包含编译器和运行时的版本,视图写在HTML里或者写在template选项。
非完整版vue.runtime.js:只包含运行时的版本,视图写在render函数里用h来创建标签。
编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。约占百分之四十代码体积。
运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

使用方法

  1. cdn引入
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. 直接下载并用 标签引入,Vue 会被注册为一个全局变量。<br>webpack引入和@vue/cli引入默认使用非完整版<br></li> <li>vue.js错用成vue.runtime.js,会无法将HTML编译成视图;<br>vue.runtime.js错用成vue.js,代码体积会变大,因为多了编译器。<br></li> </ol> <h1 id="2-template-render">2.template和render用法</h1> <p>Vue 推荐使用在绝大多数情况下使用 template 来创建 HTML。<br><code class="prettyprint"><br> //在vue文件中以template标签创建HTML<br> &lt;template&gt;<br> &lt;div id=&quot;app&quot;&gt;<br> &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot; /&gt;<br> &lt;HelloWorld msg=&quot;Welcome&quot; /&gt;<br> &lt;/div&gt;<br> &lt;/template&gt;<br> </code><br>然而在一些场景中,需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。<br><code class="prettyprint"><br> //在js中以render函数渲染元素<br> import App from &#39;./App.vue&#39;<br> new Vue({<br> render: h =&gt; h(App),<br> }).$mount(&#39;#app&#39;)<br> </code></p> <h1 id="3-codesandbox-io-vue">3.用 codesandbox.io 写 Vue 代码</h1> <ol> <li>进入<a href="https://codesandbox.io/">https://codesandbox.io/</a><br></li> <li>不要登陆,免费创建一个沙盒(登陆后将限制创建次数)<br></li> <li>选择vue模板<br></li> <li>接下来就到了展现技术的时候了<br></li> </ol>
{{topic.upvote_count || 0}}

1.完整版与非完整版区别

完整版vue.js:同时包含编译器和运行时的版本,视图写在HTML里或者写在template选项。
非完整版vue.runtime.js:只包含运行时的版本,视图写在render函数里用h来创建标签。
编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。约占百分之四十代码体积。
运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

使用方法

  1. cdn引入
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. 直接下载并用 标签引入,Vue 会被注册为一个全局变量。<br>webpack引入和@vue/cli引入默认使用非完整版<br></li> <li>vue.js错用成vue.runtime.js,会无法将HTML编译成视图;<br>vue.runtime.js错用成vue.js,代码体积会变大,因为多了编译器。<br></li> </ol> <h1 id="2-template-render">2.template和render用法</h1> <p>Vue 推荐使用在绝大多数情况下使用 template 来创建 HTML。<br><code class="prettyprint"><br> //在vue文件中以template标签创建HTML<br> &lt;template&gt;<br> &lt;div id=&quot;app&quot;&gt;<br> &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot; /&gt;<br> &lt;HelloWorld msg=&quot;Welcome&quot; /&gt;<br> &lt;/div&gt;<br> &lt;/template&gt;<br> </code><br>然而在一些场景中,需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。<br><code class="prettyprint"><br> //在js中以render函数渲染元素<br> import App from &#39;./App.vue&#39;<br> new Vue({<br> render: h =&gt; h(App),<br> }).$mount(&#39;#app&#39;)<br> </code></p> <h1 id="3-codesandbox-io-vue">3.用 codesandbox.io 写 Vue 代码</h1> <ol> <li>进入<a href="https://codesandbox.io/">https://codesandbox.io/</a><br></li> <li>不要登陆,免费创建一个沙盒(登陆后将限制创建次数)<br></li> <li>选择vue模板<br></li> <li>接下来就到了展现技术的时候了<br></li> </ol>
48
回复 编辑