Vue-入门

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-入门相关的知识,希望对你有一定的参考价值。

一.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-入门的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家