乐趣区

关于vim:Vue前端vue使用笔记0基础到高手第2篇Vue进阶知识点介绍附代码已分享

作者：

jiezi

在

本系列文章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':'账号或明码谬误'})

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章