WEB前端
文章平均质量分 69
WEB前端
小旺不正经
阿里云专家博主、51CTO专家博主
展开
-
Vue+Django 旅游网项目 景点详情模块前端实现
景点详情模块搜索页面初步实现和跳转在views文件夹下新建 Search.vue<template><!-- 搜索页面 --> <div class="page-search"> <!-- 标题 --> <van-nav-bar title="搜索景点" /> <!-- 搜索框 --> <van-search v-model="value"原创 2021-12-05 15:11:50 · 1290 阅读 · 0 评论 -
Vue路由的使用
路由路由的使用安装cnpm install vue-router -S1.设置路由规则const routes = [ //页面1 { path:'/foo', component: Foo }, //页面2 { path:'/about', component: About },]2.配置路由规则import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = n原创 2021-11-27 14:44:50 · 659 阅读 · 0 评论 -
Vue+Django 旅游网项目 首页后端实现
Vue+Django 旅游网项目 首页后端实现轮播图配置数据库DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'trip', 'USER': 'root', 'PASSWORD': '123456', 'HOST': '127.0.0.1', 'PORT': 3306, }}创建应用s原创 2021-11-26 09:26:06 · 2582 阅读 · 4 评论 -
Vue+Django 旅游网项目 首页前端实现
Vue+Django 旅游网项目 首页前端实现结构公共的样式src/assets/common.less公共的js(工具函数、接口地址、配置文件)接口地址配置src/utils/apis.js常量配置src/utils/constants.js工具函数src/utils/filters.js创建Vue项目创建完成启动项目导入静态文件新建一个style文件夹用于存储样式文件新建utils文件夹创建apis.js创建 constan原创 2021-11-25 09:32:23 · 2482 阅读 · 4 评论 -
axios入门
axios入门Axios 是一个基于promise网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。Promise一种异步编程解决方案处理回调then函数的使用new Promise((resolve,reject原创 2021-11-24 15:23:47 · 788 阅读 · 0 评论 -
Vue组件通信
Vue组件通信更多文章看查看专栏几种实现思路参数传递全局共享浏览器的存储Vuex父组件到子组件传递方式:为子组件定义props属性父组件<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld v-bind:username="username"/> <HelloWorld v-原创 2021-11-23 09:35:14 · 439 阅读 · 1 评论 -
Vue组件化
Vue组件化面向组件编程把一个页面按照模块拆分成N个小块注意:演示环境为 Vue脚手架搭建的项目上进行演示创建局部组件语法格式:Vue.component('my-component-name',{// ...options...})例子:注册一个组件 组件名为my-component-name组件内容为<h3>第一个局部组件</h3><template> <div class="home"> <img alt="原创 2021-11-22 12:42:34 · 1850 阅读 · 7 评论 -
Vue响应接口
Vue响应接口Vue可以添加数据动态响应接口。可以使用$watch属性来实现数据的监听注意:$watch必须添加在Vue实例之外才能实现正确的响应例子:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head>原创 2021-11-16 08:48:57 · 594 阅读 · 0 评论 -
Vue指令快速上手
Vue指令快速上手模板语法显示普通文本<span>消息内容:{{ msg }}</span>JavaScript表达式{{ msg.split('').reverse().join('') }}{{ result >0 ? 'YES':'NO' }}演示:<template> <div class="hello"> <h1>第一个全局组件</h1> <ul> <li原创 2021-11-15 09:03:57 · 1296 阅读 · 0 评论 -
Vue自定义指令
Vue自定义指令自定义指令注册一个全局指令v-focus,该指令的功能是在页面加载时元素获得焦点<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> <div id="a原创 2021-11-14 09:31:01 · 444 阅读 · 2 评论 -
Vue程序解释
Vue程序解释src/mian.js 程序的入口文件src/App.vue Vue根组件 可以通过render参数从组件渲染public/index.html 模板文件new Vue({// 路由的配置 router,// Vuex 状态管理 store, render: h => h(App)}).$mount('#app')router为路由components 为组件...原创 2021-11-13 18:59:47 · 420 阅读 · 0 评论 -
Vue项目创建+项目结构分析
Vue项目创建+项目结构分析Vue CLI 快速上手环境要求 Node.js安装 命令行输入cnpm install -g @vue/cli输入vue检查安装创建Vue项目命令行创建vue create hello可以选默认 也可以选手动设置(这里选手动)上下键移动 空格键打勾 选择好后回车选择版本是否用history模式显示路由地址(这里演示选择否)选择css预处理模式静态语法检查与格式化保存时是否检查语法配置文件选择创建完成根据提示启动服务图原创 2021-11-13 15:58:10 · 1028 阅读 · 0 评论 -
MVVM架构
MVVM架构Model:JavaScript Object JavaScript对象View: DOMView Midel: DOM操作View:浏览器中所看到的html内容Model:对应vue中data的内容原创 2021-11-13 14:18:45 · 1688 阅读 · 0 评论 -
Vue组件
Vue组件组件(component)是Vue.js最强大的功能之一,可以扩展HTML元素,封装可重用的代码。全局组件Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,而不是一个具体的组件实例。Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。使用Vue.component()注册组件时,需要提供2个参数,第1个参数是组件的标签,第2个参数是组件构造器。Vue.component()方法内部会原创 2021-11-13 09:22:41 · 672 阅读 · 1 评论 -
Vue监听和计算属性
Vue监听和计算属性watch监听属性这个属性用来监视某个数据的变化,并触发相应的回调函数执行。基本用法添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行。回调函数有2个参数:newVal,数据发生改变后的值。oldVal,数据发生改变前的值。计数器<!DOCTYPE html><html> <head> <meta charset="utf-8原创 2021-11-12 09:23:46 · 1242 阅读 · 0 评论 -
Vue事件处理
Vue事件处理v-on在v-on后面可以绑定点击click事件实现计数器:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./js/vue.js"></script> </head> <body> <div id="app">原创 2021-11-09 14:08:44 · 641 阅读 · 0 评论 -
Vue-样式绑定
绑定class属性v-bind:class="{样式名称:变量}"<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style type="text/css"&原创 2021-08-06 19:58:57 · 377 阅读 · 3 评论 -
Vue-Vant实现轮播图
参考文档:VantBanner.vue仿接口<template> <!-- 首页的轮播图 --> <div class="home-banner-box"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="item in bannerList" :key="item.原创 2021-07-17 16:48:03 · 8889 阅读 · 5 评论 -
Vue之VantUI库
什么是VantUI开源免费、轻量、可靠的移动端Vue组件库基础组件按钮、图标、布局、提示信息等表单组件日历、复选框、时间选择、输入框、评分等反馈组件弹出框、加载、下拉菜单、消息提示、下拉刷新、滚动加载等展示组件进度条、倒计时、分割线、列表等导航组件宫格、索引、导航栏、分页等业务组件地址编辑、联系人、优惠券、提交订单等VabtUI官方链接使用Vant安装项目目录手动按需导入组件import Button from 'vant/lib/butto原创 2021-07-15 19:56:08 · 5822 阅读 · 0 评论 -
跨域问题解决详解 Vue Django
什么是跨域出于安全考虑,浏览器要求你的网站不能执行/访问其他网站的资源跨域的影响浏览器本地存储无法使用DOM对象、JS对象无法获取AJAX无法使用利用HTML标签的特性script、a、iframe、img、link等Vue.js中解决跨域问题根目录添加配置文件vue.config.jstarget 目标地址changeOrigin 变更请求头中设置的hostpathRewrite URL重写规则vue.config.js为:module.exports = { d原创 2021-07-15 17:23:59 · 371 阅读 · 1 评论 -
Vue秘笈-----数据绑定
文本修改Vue.js里面的数据绑定,可以理解为属性内容的显示,属性内容在Vue.js中data里面定义,通过数据绑定形式显示在页面上。data里面定义的属性可以理解为变量。数据绑定最常见的形式就是使用{{属性名}}的文本插值,这里“属性名”左边和右边是双大括号。{{…}}中填写的就是我们在Vue.js中data里定义的属性名。<!DOCTYPE html><html> <head> <script src="vue.js"></scri原创 2021-07-10 20:33:06 · 366 阅读 · 4 评论 -
CSS笔记
层叠样式表页面的表现外部样式表<head><link rel="stylesheet" href="hase.css"></head>内部样式表<head><style>body{background-color:red;}p{margin-left:20px;}</style></head&g...原创 2020-02-12 10:11:36 · 227 阅读 · 0 评论 -
白帽子教你如何更好的进攻web安全
了解计算机常识如果你是毫无基础的同学,在进入web安全的学习之前,最重要的前提就是具备以下基本的计算机常识。1.了解操作系统:目前有哪些操作系统和版本;这几种操作系统的优缺点;你现在使用过哪几种操作系统?2.了解计算机系统的环境变量:什么是环境变量;设置环境变量有什么作用;Windows机器如何查看、设置环境变量;熟悉常用工具软件1.了解一些常用的软件(不知道的记得上...原创 2020-02-06 11:54:06 · 352 阅读 · 0 评论 -
HTML学习笔记
web标准构成结构、表现、行为、HTML、CSS、JavaScript、<html></html>HTML标签<head></head>文档的头部<title></title>文档的标题<body></body>文档的主体排版标签<h1></h1>标题标签&l...原创 2020-02-04 14:24:39 · 267 阅读 · 0 评论 -
PS切图 笔记
PS切图切图 设计稿中切出网页素材给网页提供图片素材使用PS工具编辑>首选项>单位与标尺-像素需要用到的面板工具 选项 信息 图层 历史记录使用背景图图片合并方案浏览器兼容...原创 2020-02-03 14:18:30 · 543 阅读 · 0 评论