01.vue的简单实例

前段框架vue.js非常热门，每个vue应用都是通过创建vue函数创建新的vue实例开始，首先我们来创建一个简单的vue实例

　　多手动写写代码，你会发现真的很烦躁

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta charset="UTF-8">

　　<title>vue的简单实例</title>
　　<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

　　<div id="app">

　　　　{{message}}

　　　　<ul>

　　　　　　<li v-for="item in arr">

　　　　　　　　{{item}}

　　　　　　</li>

　　　　</ul>

　　</div>

</body>

<script type="text/javascript">

　　var vm = new vue({

　　　　el:"#app",

　　　　data:{

　　　　　　message: 'hello vue.js',

　　　　　　arr: ['我','爱','你']

　　　　}

　　})

</script>

vue使用{{}}来直接输出data中的数据，使用v-for可以循环数组

posted @ 2019-07-02 14:55  无敌小豆包  阅读(495)  评论(0)    收藏  举报