先通过代码来感受一下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