本系列文章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 urlfrom users.views import ShowLoginViewurlpatterns = [ 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 urlfrom users.views import ShowLoginView, LoginViewurlpatterns = [ 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':'账号或明码谬误'})