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

49次阅读

共计 4757 个字符，预计需要花费 12 分钟才能阅读完成。

本系列文章 md 笔记（已分享）次要探讨 vue 相干常识。Vue.js 是前端三大新框架：Angular.js、React.js、Vue.js 之一，Vue.js 目前的应用和关注水平在三大框架中略微胜出，并且它的热度还在递增。Vue.js 是一个笨重、高性能、可组件化的 MVVM 库，同时领有非常容易上手的 API。Vue.js 是一个构建数据驱动的 web 界面的渐进式框架，Vue.js 的指标是通过尽可能简略的 API 实现响应的数据绑定和组合的视图组件，外围是一个响应的数据绑定零碎。

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;

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()

作用:

定义函数新的形式
扭转 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 github

创立一个 django 工程, 例如 login. 创立实现之后, 再创立一个子利用, 例如 users. 最初再设置一下模板文件

在模板文件中创立一个 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')

<!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':'账号或明码谬误'})

正文完

vim

发表至： vim

2024-02-17

0

关于vim:oeasy教您玩转vim-10-插入新行

关于vim:oeasy教您玩转vim-4-深入帮助

关于vim:oeasy教您玩转vim-36-插入字符

关于vim:vim模式切换

关于css-modules:css-modules的导入方式差异

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

全套笔记和代码自取移步 gitee 仓库：gitee 仓库获取残缺文档和代码

感兴趣的小伙伴能够自取哦，欢送大家点赞转发~

共 2 章，10 子模块

Vue 根本应用

ES6 语法

ES6 语法介绍

变量申明

Javascript 对象的写法

ES6 的箭头函数

实例生命周期(理解)

各个生命周期函数的作用

axios 发送 ajax 申请

筹备工程

筹备 html 和 html 显示

导入 axios, 并发送 GET/POST 申请

后盾代码

Just My Socks（注册教程内含优惠码）

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

全套笔记和代码自取移步 gitee 仓库：gitee 仓库获取残缺文档和代码

感兴趣的小伙伴能够自取哦，欢送大家点赞转发~

共 2 章，10 子模块

Vue 根本应用

ES6 语法

ES6 语法介绍

变量申明

Javascript 对象的写法

ES6 的箭头函数

实例生命周期(理解)

各个生命周期函数的作用

axios 发送 ajax 申请

筹备工程

筹备 html 和 html 显示

导入 axios, 并发送 GET/POST 申请

后盾代码

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）