Vue入门
HTTP
HTTPS
这个不是前端能解决的事,需要找部署这个网站的同志去。需要一个域名还有这个域名的证书,配置到Tomcat或者Nginx容器上就可以了。
参考本文后面打包部署相关的部分。
安全
安全性,得从几个方面来理解,一个是网络系统安全,不能被外界随意就侵入破坏。 一个是用户在任何机器上使用时,都不能留下很关键的信息。一个是用户数据不能随意暴露。
内容安全策略CSP(Content-Security-Policy)解决XSS攻击
axios
axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use
HTML
JavaScript基础
Vue.js进阶【0】 恶补JavaScript的对象继承模型与this绑定
JavaScript进阶 【1】JavaScript模块化module的概念
JavaScript进阶 【2】浏览器缓存对象sessionStorage和localStorage
CSS样式基础
Vue进阶
Vue组件
Vue.js进阶【2-1】Vue Loader管理单文件组件file.vue
Vue.js进阶【7-0】Vue组件component使用props传递数据
Vue.js进阶【7-1】Vue组件component传递父组件的成员函数给子组件
Vuex
Vue-router
Vue.js进阶【2-3】vue-router 路由管理入门
Vue.js进阶【2-3-0】vue-router 传参页面传参
Vue.js进阶【2-实例】vue + vuex + vue-router 超简单实现:电商商品列表和详情页面
vue-cli
element-UI
Vue.js进阶【5-1-1】element-ui el-table el-table-column
Vue.js进阶【6】Vue官方示例vue-hackernews学习
打包部署
Nginx Vue前后端分离接口地址配置(区分开发模式和生产模式)https
echarts
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/syntax.html 最常用的一些功能用法
2 中文Guide和API:https://cn.vuejs.org/v2/guide/ 非常详细系统的介绍了Vue的全部概念和标准接口API
Vue开源地址:https://github.com/vuejs/vue
相关链接:
最强PostMan使用教程(2) - 在test suite中运行test case
最强PostMan使用教程(4)- 使用Postman的模拟服务模拟(mock)后端
Vue.js进阶【4-0】用vue-cli快速构建vue项目
先通过代码来感受一下Vue的机制:
将下面的代码拷贝到一个空的文本文件,另存为Hello.html文件。用谷歌浏览器打开即可。
<!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,实现一个单页面的增删改查功能