![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE基础语法
weixin_52135717
这个作者很懒,什么都没留下…
展开
-
只在关闭浏览器时清除localStorage的方法
只在关闭浏览器时清除localStorage的方法 window.onbeforeunload = function () { if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) { var storage = window.localStorage; //方法原创 2020-12-07 16:34:36 · 3123 阅读 · 0 评论 -
axios VUE跨域问题
1.创建vue.config.js文件2.写入代码module.exports = { devServer: { open: true, proxy: { '/index.php': { target: 'http://www.userup.com',//要代理的本地api地址,也可以换成线上测试地址 changeOrigin: true//允许跨域原创 2020-12-02 20:56:07 · 101 阅读 · 0 评论 -
22-动态路由
22-动态路由动态路由和静态路由的区别其实差不多,首先创建user.vue 然后用export default 导出。在计算函数那里的是获取当前活跃的路由状态<template> <div> <h2>用户界面</h2> <p>用户相关信息</p> <h2>{{userid}}</h2> </div></template><script> ex原创 2020-11-24 11:56:13 · 95 阅读 · 1 评论 -
21-router-link的补充(转换成其他,如按钮)
21-router-link的补充(转换成其他,如按钮)<template> <div id="app"> <router-link to="/home" tag="button">首页</router-link><br /> <router-link to="/about" tag="div">关于</router-link> <router-view></router-view&原创 2020-11-23 17:04:27 · 636 阅读 · 0 评论 -
20-前端路由相关配置
20-前端路由相关配置第一步在router创建路由index.js文件,并且进行路由的配置//配置相关路由的信息import VueRouter from 'vue-router'import Vue from 'vue'import Home from '../components/Home.vue'import About from '../components/About.vue'//1.通过vue.use(插件),安装插件Vue.use(VueRouter)//2.创建路由对象原创 2020-11-23 15:34:26 · 291 阅读 · 0 评论 -
19-作用域插槽的使用
19-作用域插槽的使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/vue.min.js"></script> <body> <div id="app"> <cpn></cpn> &原创 2020-11-19 16:54:17 · 57 阅读 · 0 评论 -
18-具名插槽
18-具名插槽<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/vue.min.js"></script> <body> <div id="app"> <cpn> <span slot='l原创 2020-11-19 16:32:49 · 97 阅读 · 0 评论 -
17-插槽的基本使用 slot
17-插槽的基本使用 slot<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app"> <cpn> <s原创 2020-11-19 16:16:00 · 55 阅读 · 0 评论 -
16-父访问子组件
16-父访问子组件父访问子组价有两种方法,一是children 另一种是refs,但是我们在平常开发中,使用最多的是refs,但是我们在平常开发中,使用最多的是refs,但是我们在平常开发中,使用最多的是refs,因为refs使用方便,则refs使用方便,则refs使用方便,则children的最大用处就是访问全体的子组件.为什么没有子访问父呢?因为子直接访问父,会出现很多问题,一般我们会直接使用子传父。<!DOCTYPE html><html> <head>原创 2020-11-19 15:33:12 · 92 阅读 · 2 评论 -
15-子传父(自定义组件,this.$emit(方法,需要传递的参数))
15-子传父(自定义组件)<!DOCTYPE html><html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 使用V-ON调用方法 --&g原创 2020-11-18 16:17:23 · 291 阅读 · 0 评论 -
14-父子组件通讯,父传子(props)
14-父子组件通讯,父传子(props)<!DOCTYPE html><html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn :cmovies原创 2020-11-17 17:37:45 · 175 阅读 · 0 评论 -
13-组件中使用文本插值
13-组件中使用文本插值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn>原创 2020-11-17 15:15:29 · 110 阅读 · 0 评论 -
12-组件分离式写法(配合语法糖)
12-组件分离式写法(配合语法糖)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn原创 2020-11-17 14:39:20 · 84 阅读 · 0 评论 -
11-父子组件注册
11-父子组件注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app1"> <cpn2></cpn2>原创 2020-11-17 11:54:51 · 96 阅读 · 0 评论 -
10-VUE局部组件全局组件的语法糖简易方式
10-VUE局部组件全局组件的语法糖简易方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn1>&l原创 2020-11-17 11:04:35 · 85 阅读 · 0 评论 -
9-VUE局部组件的注册
9-VUE局部组件的注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn&g原创 2020-11-17 11:03:06 · 62 阅读 · 0 评论 -
8-VUE全局组件的注册
8-VUE全局组件的注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <!-- 3、使用组件 -->原创 2020-11-17 11:02:08 · 43 阅读 · 0 评论 -
7-VUE基础项目练习(购物车)
VUE基础项目练习(购物车)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app"> <div v-if="books.le原创 2020-11-16 17:09:09 · 234 阅读 · 0 评论 -
VUE初阶段学习基础指令5——条件渲染V-IF 和 V-SHOW的使用
VUE初阶段学习基础指令5——条件渲染V-IF 和 V-SHOW的使用<div id="app"> <h1 v-if="order === 0">标题0 v-if</h1> <h1 v-else-if ="order===1">标题1 v-else-if</h1> <h1 v-else-if="order===2">标题2 v-else</h1> <h1 v-else-if="order===3"&g原创 2020-11-16 17:05:23 · 53 阅读 · 0 评论 -
VUE初阶段学习基础指令4——双向绑定
VUE初阶段学习基础指令4——双向绑定<div id="app"> <input type="text" v-model="shige" /><br /> {{shige}}<br /> <input id="ca" type="checkbox" value="唱歌" v-model="aihao"> <label for="ca">唱歌</label> <input id="cb"原创 2020-11-16 17:05:31 · 39 阅读 · 0 评论 -
VUE初阶段学习基础指令3——事件绑定
VUE初阶段学习基础指令3——事件绑定<div id="app"> <div v-bind:id="id1" v-bind:style="{width:width,height:height,background:color}" v-html="age"></div> <div></div> <div></div> <button @click="changestyle">按钮</butt原创 2020-11-16 17:05:40 · 43 阅读 · 0 评论 -
VUE初阶段学习基础指令2——属性绑定
VUE初阶段学习基础指令2——属性绑定<div id="app"> <button v-bind:class="setclass" v-bind:title="text">按钮</button> <!-- 用于设置DOM的节点属性 --> </div> <script> var app = new Vue({ el:"#app", data(){ return{ setclass:"chass原创 2020-11-16 17:05:58 · 55 阅读 · 0 评论 -
VUE初阶段学习基础指令1——插值文本绑定
VUE初阶段学习基础指令1——插值文本绑定 <div id="app"> <div v-html="textt"></div> </div> <script> var app = new Vue({ el:'#app', data (){ return{ textt:"dsadasda" } } }) </script> ![在这里插入图片描述](https://原创 2020-11-16 17:05:49 · 53 阅读 · 0 评论