码迷,mamicode.com
首页 > 其他好文 > 详细

实现第一个vue应用

时间:2018-12-28 19:18:54      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:log   自己   保留   title   就是   传参数   com   51cto   数据   

1.vue的使用有多种方式:

    1. 直接下载使用,(vue官网是vuejs.org)。
  • 2.直接从cnd获取,引入到我们的服务器中使用。在项目组复制https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js 该链接,就能够获取到Vue。

我们前期使用的开发工具是在线编辑器。浏览器打开:https://jsfiddle.net
他分为4个部分,html,css, JavaScript,result。代码写好后,点击左上角的run,就可以将结果显示在resule部分。

html部分:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">; </script>
<div id="app">
<p></p>
</div>

hello

//我们想输出hello,有两种方式,直接利用html输出,或者通过vue进行输出。 JavaScript部分: (在这里创建vue实例,该实例就能够控制自己的模板, 即html代码。) new Vue(); //创建实例,为了实现功能,需要传参数给该实例的构造函数,即: new Vue({ }); Vue对象有几个保留属性: el: “字符串” //该属性定义了vue能控制的html片段。写法类似CSS写法。控制:指可以用Vue实例改变html内容。 例如:el:#app 代表能够控制ID是app的代码段。 el:.app 代表能够控制class=“app”的类代码段。 data:对象 //实例中需要的所有数据都存储在该保留属性中。 例如:data:{ title:"hello world!"} 我想将hello输出到页面上的p标签中。那么html的p标签中应该写成

{{title}}

就可以输出了。 添加后,页面加载时,title就会在data属性中找所有数据,在所有数据中找到title对应的数据。 div#app 输出div标签对,另外id设置为app。 最终的代码端为: html部分: ![](http://i2.51cto.com/images/blog/201812/28/70108e6121ed757ffbdda5e61a89ca6d.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) JavaScript部分: ![](http://i2.51cto.com/images/blog/201812/28/a7a4db328e71a7e9452a344b9a7f1bf3.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

实现第一个vue应用

标签:log   自己   保留   title   就是   传参数   com   51cto   数据   

原文地址:http://blog.51cto.com/13577938/2336590

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!