网站接入协议及接入商资质,深圳住房和建设局网站公开招标,软文写作网站,品牌建设的路径文章目录 Vue#xff08;前端框架#xff09;data基本语法v-bind#xff08;属性#xff09;v-if#xff08;条件#xff09;v-formethods事件v-model表单绑定todolist#xff08;添加删除展示内容#xff0c;含上下移动#xff09;es6语法生命周期函数axios发送ajax请… 文章目录 Vue前端框架data基本语法v-bind属性v-if条件v-formethods事件v-model表单绑定todolist添加删除展示内容含上下移动es6语法生命周期函数axios发送ajax请求 v-on事件 常见的事件:click: 点击一次; 当鼠标点击触发事件dblclick: 双击当鼠标双击触发事件focus: 获取焦点 当得到了光标触发事件blur: 失去焦点; 当失去了光标触发事件mouseover:鼠标移至 鼠标移至某标签上方触发事件mouserout:鼠标移出 鼠标移出某标签上方触发事件keyup:键盘按下 键盘按下触发事件Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点. 响应式数据绑定指的是vue.js会自动对页面中的某些数据的变化做出响应.(v-model指令可以实现数据的双向绑定) 组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了
选项参数说明el提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标dataVue实例的数据对象。Vue将会递归将data的属性转换为getter/setter从而让data的属性能够响应数据变化methodsVue实例的方法集合可以在Vue直接调用或将方法绑定到DOM元素的事件上computedVue实例的计算属性集合watch观察Vue实例变化的一个表达式或计算属性函数components包含Vue实例可用组件的哈希表filters包含Vue实例可用过滤器的哈希表template定义字符串模板作为Vue实例的标识使用
过滤器 示例 使用过滤器实现将英文单词转换为首字母大写显示。
HTML代码
div idappdiv classbanner{{ text | tranformFilter }}/div
/divJavaScript代码
filters: {tranformFilter: function (val) {var strs val.split( );var result ;for (var i 0; i strs.length; i) {result strs[i].charAt(0).toUpperCase() strs[i].substring(1) ;}return result;}}结合django框架
Vue前端框架
文档链接https://v2.cn.vuejs.org/v2/guide Vue.js是前端三大框架之一Angular.js、React.js、Vue.js Vue.js是一个轻巧、高性能、可组件化的MVVM库同时拥有非常容易上手的API Vue.js是一个构建数据驱动的Web界面的库 Vue.js是一套构建用户界面的渐进式框架 通俗的说 Vue,js是一个构建数据驱动的 web 界面的渐进式框架 Vue.is 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 核心是一个响应的数据绑定系统 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
!-- 1.导入Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
body!-- 2.定义一个标签需要给一个标签添加id --
div idapp
/div/body!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {message: Hello Vue!}})/script/html# 开发版本包含有帮助的命令行警告script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script# 生产版本优化了尺寸和速度script srchttps://cdn.jsdelivr.net/npm/vue/script在django里面使用可能出错需要使用delimiters和[[]]
div idapp{{ message }}
/divscript typetext/javascriptvar app new Vue({el: #app,delimiters:[[[,]]],data: {message:hello}})/script
/htmldata基本语法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
body
div idapp{{ message }}
/div
/bodyscript typetext/javascriptvar app new Vue({el: #app,data: {message: Hello Vue!}})/script
/html如果有乱码问题在前面添加meta charsetUTF-8 如果有多个参数data里面用逗号分隔
body
div idapp{{ message }}{{ hello }}
/div
/bodyscript typetext/javascriptvar app new Vue({el: #app,data: {message: Hello Vue!hello: abc}})/script
/htmlv-bind属性
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
body
div idapp{{ message }}bra v-bind:hrefurlbaidu/abrspan v-bind:titleshowmessage鼠标放这显示时间/span
/div
/bodyscript typetext/javascriptvar app new Vue({el: #app,data: {message: Hello Vue!,url: https://www.baidu.com,showmessage: 当前时间new Date().toLocaleDateString()}})/script
/html简写可以直接加个将前面的v-bind省略
div idapp{{ message }}bra :hrefurlbaidu/abrspan :titleshowmessage鼠标放这显示时间/span
/divv-if条件
v-if v-else-if v-else v-show v-if和v-show区别如果都设置为true没有区别如果为false则源码中v-if没有代码v-show中是将源码的style“diaplay:none”即隐藏不显示源码还在 v-show用法和v-if大致一样但是它不支持v-else,它和vif的区别是它制作元素样式的显示和隐藏元素一直是存在 注意在vue中使用v-show 原来的css代码不能设置display属性,会导致冲突
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
!-- 1.导入Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
body!-- 2.定义一个标签需要给一个标签添加id --
div idapp{{ message }}hra href# v-ifisLogin已登录/ahra href# v-ifnotisLogin请登录/ahr
!-- if else两行要挨着中间还可以加v-else-if语句--a href# v-iflevel 1等级为1/aa href# v-else-iflevel 2等级为2/aa href# v-else等级不为1/ahrspan v-ifseenv-if/spanhrspan v-showseenv-show/span
/div
/body!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {message: Hello Vue!,isLogin:true,notisLogin:false,level:1,seen:false}})/script
/htmlv-for
!-- 1.导入Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptbody
!-- 2.定义一个标签需要给一个标签添加id --
div idappulli v-for(item,index) in items{{ index1 }} {{ item }}/li/ul
/div
/body!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {items:[1,2,3,4]}})/script字典格式
li v-for(item,key) in object{{ key }} {{ item }}/liscript typetext/javascriptvar app new Vue({el: #app,data: {object:{title:aaa,author:bbb}}})/scriptli v-foritem in items{{ item.title }} {{ item.author }}/lidata: {items:[{title:aaa,author:qqq},{title:bbb,author:www}]}methods事件
点击按钮弹出对话框
body
div idappbutton v-on:clicklogin按钮/button
/div
/body!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {message:hello},methods:{login:function (){alert(ok)}}})/script简写方式
button clicklogin按钮/button弹框内容1
body
div idappbutton v-on:clickadd(counter)点击1/button
/div
/bodyscript typetext/javascriptvar app new Vue({el: #app,data: {counter:1,total:0},methods:{add:function(num){this.total numalert(this.total)}}})/script内容文本1
body
!-- 2.定义一个标签需要给一个标签添加id --
div idapp{{ counter }}button v-on:clickcounter 1点击1/button
/div
/body
!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {counter:1}})/scriptv-model表单绑定
注册的时候v-model可以获取输入的数据
data里面多选需要使用列表[]
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
!-- 1.导入Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
body
!-- 2.定义一个标签需要给一个标签添加id --
div idapptabletrtd用户名/tdtdinput typetext nameusername v-modelusername/td/trtrtd密码/tdtdinput typepassword namepassword1 v-modelpassword1/td/trtrtd确认密码/tdtdinput typepassword namepassword2 v-modelpassword2/td/trtrtd性别/tdtd男input typeradio namesex valueboy v-modelsex女input typeradio namesex valuegirl v-modelsex/td/trtrtd爱好/tdtd足球input typecheckbox namelike value足球 v-modellike篮球input typecheckbox namelike value篮球 v-modellike/td/tr/tablebutton v-on:clickregister注册/button
/div
/body
!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {username:,password1:,password2:,sex:,like:[]},methods:{register:function (){alert(OK)}}})/script
/htmltodolist添加删除展示内容含上下移动
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
!-- 1.导入Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
body
!-- 2.定义一个标签需要给一个标签添加id --
div idappinput typetext nametodoitem v-modelnewitem button v-on:clickadd添加/buttonhrulli v-for(item,index) in items{{ item }}a hrefjavascript:; v-on:clickdel(index)删除/aa hrefjavascript:; v-on:clickup(index)上移/aa hrefjavascript:; v-on:clickdown(index)下移/a/li/ul
/div
/body
!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {items:[python,html,mysql],newitem:},methods:{add:function (){this.items.push(this.newitem);this.newitem ;},del:function (index){this.items.splice(index, 1);},up:function (index){// 1.获取当前元素currentthis.items[index];// 2.先把当前元素删除this.items.splice(index,1);// 3.再加回来this.items.splice(index-1,0,current);},down:function (index){// 1.获取当前元素currentthis.items[index];// 2.先把当前元素删除this.items.splice(index,1);// 3.再加回来this.items.splice(index1,0,current);}}})/script
/htmles6语法 ES6是JavaScript语言的新版本它也可以叫做ES2015之前学习的JavaScript属于ES5ES6在它的基础上增加了一些语法ES6是未来JavaScript的趋势而且vue组件开发中会使用很多的ES6的语法所以掌控这些常用的ES6语法是必须的· ES6新增了let命令它的用法类似于var但是所声明的变量只在let命令所在的代码快内有效
{let a10;var b1;
}for循环就适合使用let
for (let i0; i10;i){}还新增了const语法const声明一个只读的常量。一旦声明常量的值就不能改变 ES5的对象写法
var person{name:itcast,age:12,say:function(){alert(hello)}
}这样的也可以在ES6中使用ES6中还可以这样写
var nameitcast;
var age12;
var person{name,age,say:function(){alert(hello)}
}箭头函数 之前的函数这样的
var aaa function say(){alert(aaa);}
aaa()ES6使用箭头函数
var say (){alert(aaa);
}
say()# 带参数
var say (sum1,sum2){return sum1sum2;
}
say(1,2)var person{name:itcast,age:12,say:function(){alert(this.name)}
}生命周期函数
生命周期函数没有在html中但是运行的时候会自动运行
!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,data: {items:[python,html,mysql],newitem:},methods:{beforeCreate:function (){console.log(beforeCreate);},create:function (){console.log(create);},beforeMounted:function (){console.log(beforeMounted);},mounted:function (){console.log(mounted);},beforedestory:function (){console.log(beforedestory);},destory:function (){console.log(destory);},}})/scriptbeforeCreate
create
beforeMounted
mounted
# 当调用destory的时候会有后的结果
beforedestory
destoryaxios发送ajax请求
链接https://github.com/axios/axios
使用如下代码引入
script srchttps://unpkg.com/axios1.1.2/dist/axios.min.js/script在html中写入如下代码
GET请求 urls.py
from django.urls import path
from book.views import LoginView,ReceiveViewurlpatterns [path(login/, LoginView.as_view()),path(rece/, ReceiveView.as_view())
]views.py
from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from django.views import View
from django.contrib.auth.mixins import LoginRequiredMixin
import datetime
import jsonclass LoginView(View):def get(self, request):return render(request, index.html)# return HttpResponse(get)def post(self, request):return HttpResponse(post)class ReceiveView(View):def get(self, request):data request.GETusername data.get(username)password data.get(password)return JsonResponse({data:{username:username,password:password}})def post(self, request):data json.loads(request.body.decode())username data.get(username)password data.get(password)return JsonResponse({data: {username: username, password: password}})index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
!-- 1.导入Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://unpkg.com/axios1.1.2/dist/axios.min.js/script
/head
body
!-- 2.定义一个标签需要给一个标签添加id --
div idapp[[ message ]]button clicklogin登入/button
/div
/body
!-- 创建Vue实例 --script typetext/javascriptvar app new Vue({el: #app,delimiters:[[[,]]],data: {message:hello},methods:{login:function (){var url http://127.0.0.1:8000/rece/?usernameitcastpassword1234;axios.get(url).then((response){console.log(response)}).catch((error){console.log(error)})}}})/script
/htmlPOST请求和上面相比修改login函数 login:function (){var url http://127.0.0.1:8000/rece/;axios.post(url,{username:itcast,password:1234}).then((response){console.log(response)}).catch((error){console.log(error)})}settings.py注释这行代码
MIDDLEWARE [django.middleware.security.SecurityMiddleware,django.contrib.sessions.middleware.SessionMiddleware,django.middleware.common.CommonMiddleware,# django.middleware.csrf.CsrfViewMiddleware,django.contrib.auth.middleware.AuthenticationMiddleware,django.contrib.messages.middleware.MessageMiddleware,django.middleware.clickjacking.XFrameOptionsMiddleware,
]
