本系列文章md筆記（已分享）主要討論vue相關(guān)知識(shí)。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和關(guān)注程度在三大框架中稍微勝出，并且它的熱度還在遞增。Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架，Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。
全套筆記和代碼自取移步gitee倉(cāng)庫(kù)： gitee倉(cāng)庫(kù)獲取完整文檔和代碼
共 2 章，10 子模塊
Vue基本使用
ES6語(yǔ)法
ES6標(biāo)準(zhǔn)入門(mén)
ES6語(yǔ)法介紹
ES6是JavaScript語(yǔ)言的新版本，它也可以叫做ES2015，之前學(xué)習(xí)的JavaScript屬于ES5，ES6在它的基礎(chǔ)上增加了一些語(yǔ)法，ES6是未來(lái)JavaScript的趨勢(shì)，而且vue組件開(kāi)發(fā)中會(huì)使用很多的ES6的語(yǔ)法，所以掌握這些常用的ES6語(yǔ)法是必須的。
變量聲明
var:它是用來(lái)聲明變量的。如果在方法中聲明，則為局部變量；如果在全局中聲明，則為全局變量。
var num=10
變量一定要在聲明后使用，否則報(bào)錯(cuò)
let:ES6新增了let命令，用來(lái)聲明變量。它的用法類(lèi)似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。
{
let a = 10;
var b = 1;
}
上面代碼在代碼塊之中，分別用let和var聲明了兩個(gè)變量。然后在代碼塊之外調(diào)用這兩個(gè)變量，結(jié)果let聲明的變量報(bào)錯(cuò)，var聲明的變量返回了正確的值。這表明，let聲明的變量只在它所在的代碼塊有效。
for循環(huán)的計(jì)數(shù)器，就很合適使用let命令。
for (let i = 0; i < 10; i++) {}
計(jì)數(shù)器i只在for循環(huán)體內(nèi)有效，在循環(huán)體外引用就會(huì)報(bào)錯(cuò)。
const:const聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能改變。
const PI = 3.1415;
Javascript對(duì)象的寫(xiě)法
ES5的寫(xiě)法
var person = {
name:'itcast',
age:13,
say:function(){
alert('hello')
}
}
person.say()
還可以寫(xiě)
var person = {};
person.name='itheima';
person.age=13;
person.say = function (){alert('hello')}
person.say();
ES6的寫(xiě)法
需要注意的是, 實(shí)現(xiàn)簡(jiǎn)寫(xiě),有一個(gè)前提,必須變量名屬性名一致
//定義變量
var name='itcast';
var age=13;
//創(chuàng)建對(duì)象
var person = {
name,
age,
say:function(){
alert('hello');
}
};
//調(diào)用
person.say()
ES6的箭頭函數(shù)
作用:
- 定義函數(shù)新的方式
- 改變this的指向
定義函數(shù)新的方式
//無(wú)參數(shù),無(wú)返回值
var say = ()=> {
alert('我是無(wú)參數(shù)無(wú)返回值函數(shù)');
}
//有參數(shù),無(wú)返回值
var eat = food => {
alert('我喜歡吃'+food);
}
//有參數(shù),有返回值
var total = (num1,num2) => {
return num1+num2;
}
改變this的指向
如果層級(jí)比較深的時(shí)候, this的指向就變成了window, 這時(shí)候就可以通過(guò)箭頭函數(shù)解決這個(gè)指向的問(wèn)題
var person = {
name:'itcast',
age:13,
say:function(){
alert('my name is ' + this.name);
}
}
//調(diào)用
person.say()
實(shí)例生命周期(了解)
各個(gè)生命周期函數(shù)的作用
-
beforeCreate
- vm對(duì)象實(shí)例化之前
-
created
- vm對(duì)象實(shí)例化之后
-
beforeMount
- vm將作用標(biāo)簽之前
-
mounted(重要時(shí)機(jī)初始化數(shù)據(jù)使用)
- vm將作用標(biāo)簽之后
-
beforeUpdate
- 數(shù)據(jù)或者屬性更新之前
-
updated
- 數(shù)據(jù)或者屬性更新之后
axios發(fā)送ajax請(qǐng)求
axios github
準(zhǔn)備工程
創(chuàng)建一個(gè)django工程,例如 login.創(chuàng)建完成之后,再創(chuàng)建一個(gè)子應(yīng)用,例如users.最后再設(shè)置一下模板文件
準(zhǔn)備html和html顯示
在模板文件中創(chuàng)建一個(gè)axios.html,內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 開(kāi)發(fā)環(huán)境版本 -->
<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>
創(chuàng)建視圖并加載模板的html
#url設(shè)置
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')
導(dǎo)入axios,并發(fā)送GET/POST請(qǐng)求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 開(kāi)發(fā)環(huán)境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 導(dǎo)入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.因?yàn)閂ue的模板變量和django的模板變量分隔符沖突,所以需要修改Vue的分隔符delimiters:["[[","]]"]文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-825156.html
2.箭頭函數(shù)解決這個(gè)指向的問(wèn)題文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-825156.html
后臺(tái)代碼
#定義路由
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):
#獲取參數(shù)
username = request.GET.get('username')
password = request.GET.get('password')
#驗(yàn)證參數(shù)并返回相應(yīng)
if username == 'admin' and password == '123':
return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
else:
return JsonResponse({'code': 400,'msg':'賬號(hào)或密碼錯(cuò)誤'})
def post(self, request):
# 獲取參數(shù)
data = json.loads(request.body.decode())
username = data.get('username')
password = data.get('password')
# 驗(yàn)證參數(shù)并返回相應(yīng)
if username == 'admin' and password == '123':
return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
else:
return JsonResponse({'code': 400,'msg':'賬號(hào)或密碼錯(cuò)誤'})
到了這里，關(guān)于【Vue前端】vue使用筆記0基礎(chǔ)到高手第2篇：Vue進(jìn)階知識(shí)點(diǎn)介紹（附代碼，已分享）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
