共计 4757 个字符，预计需要花费 12 分钟才能阅读完成。
本系列文章 md 笔记（已分享）次要探讨 vue 相干常识。Vue.js 是前端三大新框架：Angular.js、React.js、Vue.js 之一，Vue.js 目前的应用和关注水平在三大框架中略微胜出，并且它的热度还在递增。Vue.js 是一个笨重、高性能、可组件化的 MVVM 库，同时领有非常容易上手的 API。Vue.js 是一个构建数据驱动的 web 界面的渐进式框架，Vue.js 的指标是通过尽可能简略的 API 实现响应的数据绑定和组合的视图组件，外围是一个响应的数据绑定零碎。
全套笔记和代码自取移步 gitee 仓库：gitee 仓库获取残缺文档和代码
感兴趣的小伙伴能够自取哦，欢送大家点赞转发~
共 2 章，10 子模块
Vue 根本应用
ES6 语法
ES6 规范入门
ES6 语法介绍
ES6 是 JavaScript 语言的新版本，它也能够叫做 ES2015，之前学习的 JavaScript 属于 ES5，ES6 在它的根底上减少了一些语法，ES6 是将来 JavaScript 的趋势，而且 vue 组件开发中会应用很多的 ES6 的语法，所以把握这些罕用的 ES6 语法是必须的。
变量申明
var:它是用来申明变量的。如果在办法中申明，则为局部变量；如果在全局中申明，则为全局变量。
var num=10变量肯定要在申明后应用，否则报错
let:ES6 新增了 let 命令，用来申明变量。它的用法相似于 var，然而所申明的变量，只在let 命令所在的代码块内无效。
{
let a = 10;
var b = 1;
}下面代码在代码块之中，别离用 let 和var申明了两个变量。而后在代码块之外调用这两个变量，后果 let 申明的变量报错，var申明的变量返回了正确的值。这表明，let申明的变量只在它所在的代码块无效。
for循环的计数器，就很适合应用let命令。
for (let i = 0; i < 10; i++) {}
计数器 i 只在 for 循环体内无效，在循环体外援用就会报错。const:const申明一个只读的常量。一旦申明，常量的值就不能扭转。
const PI = 3.1415;Javascript 对象的写法
ES5 的写法
var person = {
name:'itcast',
age:13,
say:function(){alert('hello')
}
}
person.say()还能够写
var person = {};
person.name='itheima';
person.age=13;
person.say = function (){alert('hello')}
person.say();ES6 的写法
须要留神的是, 实现简写, 有一个前提, 必须变量名属性名统一
// 定义变量
var name='itcast';
var age=13;
// 创建对象
var person = {
name,
age,
say:function(){alert('hello');
}
};
// 调用
person.say()ES6 的箭头函数
作用:
- 定义函数新的形式
- 扭转 this 的指向
定义函数新的形式
// 无参数, 无返回值
var say = ()=> {alert('我是无参数无返回值函数');
}
// 有参数, 无返回值
var eat = food => {alert('我喜爱吃'+food);
}
// 有参数, 有返回值
var total = (num1,num2) => {return num1+num2;}扭转 this 的指向
如果层级比拟深的时候, this 的指向就变成了 window, 这时候就能够通过箭头函数解决这个指向的问题
var person = {
name:'itcast',
age:13,
say:function(){alert('my name is' + this.name);
}
}
// 调用
person.say()实例生命周期(理解)
各个生命周期函数的作用
-
beforeCreate
- vm 对象实例化之前
-
created
- vm 对象实例化之后
-
beforeMount
- vm 将作用标签之前
-
mounted(重要机会初始化数据应用)
- vm 将作用标签之后
-
beforeUpdate
- 数据或者属性更新之前
-
updated
- 数据或者属性更新之后
axios 发送 ajax 申请
axios github
筹备工程
创立一个 django 工程, 例如 login. 创立实现之后, 再创立一个子利用, 例如 users. 最初再设置一下模板文件
筹备 html 和 html 显示
在模板文件中创立一个 axios.html, 内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span> <br>
<a href="javascript:;"> 登录 </a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
delimiters:["[[","]]"],
data: {message: 'Hello Vue!',},
})
</script>
</html>创立视图并加载模板的 html
#url 设置
from django.conf.urls import url
from users.views import ShowLoginView
urlpatterns = [url(r'^show/$',ShowLoginView.as_view()),
]
#视图
class ShowLoginView(View):
def get(self,request):
return render(request,'axios.html')导入 axios, 并发送 GET/POST 申请
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入 axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span> <br>
<span>[[message]]</span> <br>
<a @click="login" href="javascript:;"> 登录 -GET</a> <br>
<a @click="login2" href="javascript:;"> 登录 -GET2</a> <br>
<a @click="login3" href="javascript:;"> 登录 -POST</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
delimiters:["[[","]]"],
data: {message: 'Hello Vue!',},
methods:{login:function(){
let url = 'http://127.0.0.1:8000/login/?username=admin&password=123';
axios.get(url).then(response=>{if(response.data.code == '200'){this.message=response.data.info.username;}else if (response.data.code == '400') {this.message=response.data.msg;}
}).catch(error=>{console.log(error)
})
},
login2:function(){
let url = 'http://127.0.0.1:8000/login/';
axios.get(url,{
params:{
"username":"admin",
"password":"123"
}
}).then(response=>{if(response.data.code == '200'){this.message=response.data.info.username;}else if (response.data.code == '400') {this.message=response.data.msg;}
}).catch(error=>{console.log(error)
})
},
login3:function(){
let url = 'http://127.0.0.1:8000/login/';
axios.post(url,{
"username":"admin",
"password":"123"
}).then(response=>{if(response.data.code == '200'){this.message=response.data.info.username;}else if (response.data.code == '400') {this.message=response.data.msg;}
}).catch(error=>{console.log(error)
})
}
}
})
</script>
</html>1. 因为 Vue 的模板变量和 django 的模板变量分隔符抵触, 所以须要批改 Vue 的分隔符
delimiters:["[[","]]"]
2. 箭头函数解决这个指向的问题
后盾代码
#定义路由
from django.conf.urls import url
from users.views import ShowLoginView, LoginView
urlpatterns = [url(r'^show/$',ShowLoginView.as_view()),
url(r'^login/$',LoginView.as_view()),
]
#定义视图
class LoginView(View):
def get(self, request):
#获取参数
username = request.GET.get('username')
password = request.GET.get('password')
#验证参数并返回相应
if username == 'admin' and password == '123':
return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
else:
return JsonResponse({'code': 400,'msg':'账号或明码谬误'})
def post(self, request):
# 获取参数
data = json.loads(request.body.decode())
username = data.get('username')
password = data.get('password')
# 验证参数并返回相应
if username == 'admin' and password == '123':
return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
else:
return JsonResponse({'code': 400,'msg':'账号或明码谬误'})正文完