持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
0 前言
预备知识：HTML,CSS,JavaScript,AJAX
1 Vue基础
JavaScript框架; 简化Dom操作; 响应式数据驱动
1.1 创建Vue程序步骤
- 导入开发版本的Vue.js
- 创建Vue实例对象, 设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:" 你好 小黑! "
}
})
</script>
</body>
</html>
1.2 el挂载点
- el是用来设置Vue实例挂载（管理）的元素
- Vue会管理el选项命中的元素及其内部的后代元素
- 可以使用其他的选择器,但是建议使用ID选择器
- 可以使用其他的双标签,不能使用HTML和BODY
1.3 data数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
2 本地应用
2.1 Vue指令
Vue指令指的是,以v-开头的一组特殊语法
- 内容绑定,事件绑定
v-text
v-html
v-on
- 显示切换,属性绑定
v-show
v-if
v-bind
- 列表循环,表单元素绑定
v-for
v-model
- 其他
v-show
v-if
v-bind
3 网络应用
axios+vue
Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。 axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
- axios回调函数中的this已经改变,无法访问到data中数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地应用的最大区别就是改变了数据来源
