Vue.js进阶文章列表

<!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是一个简单、易用、功能强大的前端框架，在架构上先进于jQuery，但是实现的还是jQuery实现的功能（其实我们就是做个网页，用什么框架都是干这些事情，只是用法不同而已）。

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>

Vue的构造函数：

Vue的构造函数接受一个对象，这个对象的成员都将成为Vue对象的成员（详细参考官方API介绍）。这一点比较关键，是后面this操作的基础。

开发工具

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

调试

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

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

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

C++程序员Carea

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js进阶文章列表

1 官方中文帮助文档：https://vue.docschina.org/v2/guide/ 非常简要的一个介绍，里面如果想了解更多细节会有到 2 的连接1.1 官方入门视频（建议你多看几遍）：https://vue.docschina.org/v2/guide/index.html#1.2 官方教程：模板语法https://vue.docschina.org/v2/guide/sy...
复制链接

扫一扫