Vue.js入门【2】Hello World

先通过代码来感受一下Vue的机制

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Hello World</title>
<!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> -->
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

运行效果：直接用浏览器双击打开即可看到效果

介绍

从上面的例子可以看出Vue使用自己带格式的标签来绑定页面中的JavaScript对象，从而实现JavaScript对象的成员数据和界面元素的显示同步。

百度云：示例代码下载只有两个文件

使用Vue需要包含Vue.js，或者压缩版的vue.min.js 。该文件既可以使用网络连接，也可以使用本地文件，这里我是把它下载下来之后作为本地资源直接使用的。

Vue列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Hello World</title>
<!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> -->
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="value in values">姓名：{{value.Name}}，年龄：{{value.Age}}</li>
    </ul>
</div>

<script>
var vue = new Vue({
  el: '#app',
  data: {
    values: [{ Name: "小明", Age: 20 }, { Name: "小刚", Age: 18 }, { Name: "小红", Age: 16 }]
  }
})
</script>
</body>
</html>

百度云：示例代码下载

开发工具

经过调查和朋友推荐，确定使用Sublime Text 百度云

调试

任何开发环境都必须要有非常强大的调试环境，才可以保证开发的效率。当我们用Vue开发的时候，由于主要的环境都在浏览器里面（前端），所以这里要借助谷歌浏览器强大的调试能力（按F12键进入调试环境）。主要是看谷歌浏览器调试环境下Console（控制台，出错信息和内存JavaScript对象的值）和Elements（DOM的结构），另外，当我们使用Vue的开发版的时候，会有详细的提示信息显示在谷歌浏览器的控制台页面中。基本上这三点应该就足够了。

我们把vue.min.js替换成vue.js（开发板）之后，故意在html里面写错信息，将绑定的{{value.Name}}中间多写一个点号，写成{{value..Name}}，可以看到谷歌浏览器的报错信息：

下一节我们将讨论稍微全面和复杂的例子，看看一个完整的SPA，实现一个单页面的增删改查功能

Vue开源地址：https://github.com/vuejs/vue

Vue中文帮助文档：https://vuefe.cn/v2/api/

一个比较详细的入门教程：http://www.cnblogs.com/landeanfen/p/6054654.html

Vue.js入门【2】Hello World

猜你喜欢