课程网站建设情况,网站备案 关闭,广州通app下载,wordpress 图片相对路径本系列文章md笔记#xff08;已分享#xff09;主要讨论vue相关知识。Vue.js是前端三大新框架#xff1a;Angular.js、React.js、Vue.js之一#xff0c;Vue.js目前的使用和关注程度在三大框架中稍微胜出#xff0c;并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件…
本系列文章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属于ES5ES6在它的基础上增加了一些语法ES6是未来JavaScript的趋势而且vue组件开发中会使用很多的ES6的语法所以掌握这些常用的ES6语法是必须的。
变量声明
**var:**它是用来声明变量的。如果在方法中声明则为局部变量如果在全局中声明则为全局变量。
var num10变量一定要在声明后使用否则报错 **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.nameitheima;
person.age13;
person.say function (){alert(hello)}
person.say();ES6的写法
需要注意的是, 实现简写,有一个前提,必须变量名属性名一致
//定义变量
var nameitcast;
var age13;
//创建对象
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 num1num2;
}改变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
headmeta charsetutf-8title/title!-- 开发环境版本 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
/head
body
div idappspan{{ message }}/span bra hrefjavascript:;登录/a br
/div
/body
script typetext/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 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
headmeta charsetutf-8title/title!-- 开发环境版本 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script!-- 导入axios --script srchttps://unpkg.com/axios/dist/axios.min.js/script
/head
body
div idappspan{{ message }}/span brspan[[ message ]]/span bra clicklogin hrefjavascript:;登录-GET/a bra clicklogin2 hrefjavascript:;登录-GET2/a bra clicklogin3 hrefjavascript:;登录-POST/a br
/div
/body
script typetext/javascript
var app new Vue({el: #app,delimiters:[[[,]]],data: {message: Hello Vue!,},methods:{login:function(){let url http://127.0.0.1:8000/login/?usernameadminpassword123;axios.get(url).then(response{if(response.data.code 200){this.messageresponse.data.info.username;}else if (response.data.code 400) {this.messageresponse.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.messageresponse.data.info.username;}else if (response.data.code 400) {this.messageresponse.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.messageresponse.data.info.username;}else if (response.data.code 400) {this.messageresponse.data.msg;}}).catch(error{console.log(error)})}}
})
/script
/html1.因为Vue的模板变量和django的模板变量分隔符冲突,所以需要修改Vue的分隔符delimiters:[[[,]]]
2.箭头函数解决这个指向的问题
后台代码 #定义路由from django.conf.urls import url
from 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:账号或密码错误})
