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

Vue-入门

时间:2017-07-20 23:58:43      阅读:431      评论:0      收藏:0      [点我收藏+]

标签:css   代码   png   ref   amp   网站   width   模式   blog   

一.Vue 目录结构 

  1.assets: 放置css、js、img等文件夹

  2.package.json:项目配置文件

  3.index.html:首页入口文件 

  4.example:html文件(例子)

  技术分享

二.下载Vue 2.0版本

  官方网站:http://vuejs.org/

    开发版本:包含完整的警告和调试模式

    生产版本:删除了警告,进行了压缩

三.编写代码

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js实例</title>
</head>
<body>
	<h1>vue2.0实例</h1>
	<hr>
	<h2>第一季,内部指令</h2>
	<ol>
		<li><a href="/example/helloworld.html">hello world实例</a>
	</ol>
</body>
</html>

helloworld.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>helloworld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:‘hello world‘
            }
        })
    </script>
</body>
</html>

  

Vue-入门

标签:css   代码   png   ref   amp   网站   width   模式   blog   

原文地址:http://www.cnblogs.com/xu951128/p/7215070.html

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