vue基础
关注
分享
扫一扫
vue的基础知识
笑道三千
我今年两岁半了，学编程还来不来得及？？？？
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue组件化的基本使用
一，创建好各个组件二，在根组件中使用：<template> <div > <my-addition></my-addition> </hr> <my-subtraction></my-subtraction> </div></template><script> //导入两个组件 import Addition from './components原创 2020-09-29 22:26:16 · 215 阅读 · 0 评论 -
对作用域插槽的理解：slot-scope
一，先来看看普通的组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 20%; marg原创 2020-09-20 23:49:15 · 1337 阅读 · 0 评论 -
vue动画
一，CSS动画1，显示的动画：当把元素用transition包裹起来的时候，vue会自动地分析其css样式，然后构建一个动画的流程注，这里命名为fade了，所以fade开头，默认v-开头。第一步：在开始的时候，增加两个class样式：fade-enter和fade-enter-active（一直存在直到结束）。第二步：第二帧时，去除fade-enter,增加另一个名为fade-enter-to的样式第三步：去除这里面所有的class样式当显示按钮触发时，增加v-enter和v-enter原创 2021-04-06 17:29:22 · 195 阅读 · 0 评论 -
v-for循环下动态绑定ref后undefine的解决方式
一，实现效果上面和下面是v-for渲染出来的，中间是写死ref渲染出来的：二，原因分析html的代码：<!-- 头部区域的样式 --><!-- 头部区域的样式 --><div class="styleHeader"> <div v-for="(item,index) in topStyle" :key="index" :class="[styleClass(topStyle,item.content)]" v-show="item.checked原创 2021-04-03 12:23:45 · 1329 阅读 · 3 评论 -
区分开发环境、测试环境、生产环境不同访问地址的配置系列--（一）常见的配置方法
一，根目录新建.env.test文件内容： NODE_ENV = 'ceshi'二，配置baseurl文件let baseUrl= ""; //这里是一个默认的url，可以没有switch (process.env.NODE_ENV) { case 'development': baseUrl = "http://localhost:8080/dcxt/shop/" //开发环境url break case 'test': // 需原创 2021-03-01 16:56:30 · 2398 阅读 · 0 评论 -
vue属性绑定加载图片不成功
参考链接：https://blog.csdn.net/cxx4220/article/details/103683518我的解决办法： <div class="cardBox"> <template v-for="(item,index) in renderList[current].menuList"> <div class="item" :key="index" @click="itemClick(item)">原创 2021-02-03 14:04:47 · 178 阅读 · 0 评论 -
vue获取子组件元素
一，vue的this.children和this.children和this.children和this.parentthis.$children中存放的是当前vue页面的所有子组件的数组集合。每一个子组件中的数据和函数都可以被访问到。例如：子组件：<template> <div> <h3>这是子组件的内容</h3> <button @click="change">按钮触发事件</button原创 2021-02-02 00:02:34 · 7919 阅读 · 0 评论 -
vue的父子组件属性绑定传值
一，可以通过对象，设定接收的属性类型和默认值二，可以在接收时默认参数，但是父组件在调用时，若是本组件变量则需要属性绑定，若是字符串内联写，则按普通的属性来父组件要传的是变量，则属性绑定：父组件要传的是字符串，则普通属性写法：三，多层子组件的事件可以不断$emit到最外层来...原创 2021-01-19 23:14:21 · 941 阅读 · 0 评论 -
vue-router的编程式导航
this.$router.push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面this.$router.replace跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面this.$router.go(n)向前或者向后跳转n个页面，n可为正整数或负整数一，组件中使用：因为router在入口文件中被挂载到vue上了，所以其他vue组件（实际上都是vue的实例），就需要通过this.$router来调用。二，模块中使用原创 2020-11-21 18:44:29 · 209 阅读 · 0 评论 -
vue组件相关知识点
1，子组件向父组件传值**父组件向子组件传值：父组件通过属性绑定向子组件传值，子组件通过props从父组件接受值。**而后在子组件中使用时就和本组件的数据没差别，直接使用就行先注册为子组件，然后使用时，父组件通过属性绑定向子组件传值，子组件通过props从父组件接受值。当然，也可以注册全局组件：可以看到，**vue里面有component方法，输入的参数一个是组件名字，另一个是定义的组件内容对象。返回值看起来是一个vue实例。**因为组件里面可以有自己的数据，方法，html结构：2，子组件原创 2020-10-17 16:44:33 · 245 阅读 · 0 评论 -
Vue-Router学习笔记-（黑马视频）
一，基本概念与原理也就是说，后端路由就是之前学习的写服务器端的代码：//post请求参数的获取app.post('/add',(req,res)=>{ //接收post请求参数, res.send(req.body)})//get请求参数的获取app.get('/index',(req,res)=>{ res.send(req.query)})也就是说后端渲染存在性能问题，只能支持页面全局渲染更新，于是引出了ajax技术，可以实现局部更新，但是ajax又实现不了历原创 2020-08-31 00:33:02 · 617 阅读 · 0 评论 -
vue.js动态组件：is特性
- 什么是动态组件：就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。- 动态切换：（:is后面的是对应的组件名，必须一致）在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可示例： <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"原创 2020-08-30 18:12:37 · 598 阅读 · 0 评论 -
vue学习笔记-节接口调用-async和await
一，基本使用其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。原本的： axios.get('adata',{ params:{ id:123, name:'zhangsan' } }).then(function(ret){ console.log(ret)原创 2020-08-30 15:36:38 · 2654 阅读 · 0 评论 -
vue学习笔记-接口调用-axios
一，概述二，基本用法：客户端代码：<script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> axios.get('http://localhost:3000/axios').then(function(ret){ console.log(ret.data) //存储在ret对象中，而服务器返回的数据是存原创 2020-08-29 15:27:49 · 361 阅读 · 0 评论 -
vue学习笔记-接口调用fetch用法
一，fetch概述二，fetch基本用法第一个then是fetch的一部分，返回一个promise对象，于是可以继续用then来处理返回的结果ret。这段代码是服务器的代码：//这是在创建服务器，通过express，创建名为app的服务器const express=require('express')const app=express()//为获取post参数const bodyParser=require('body-parser')//拦截所有的请求，对post请求做出处理，把参数原创 2020-08-29 10:52:01 · 2294 阅读 · 0 评论 -
vue学习笔记-promise
一，promise常用的api原创 2020-08-28 23:42:12 · 141 阅读 · 0 评论 -
vue组件化开发学习笔记-3-组件插槽
一，插槽的基础概念在之前使用组件的时候，就是直接使用这个自定义的标签，而没有在里面增加内容。例如：Vue.component('test-tom',{ data:function(){return {num:0}}, template:` <div> <div>TOM:{{num}}</div> </div> ` }) var vm= new Vue({ el:'#ap原创 2020-08-28 11:11:23 · 201 阅读 · 0 评论 -
vue组件化开发学习笔记-2-组件间的数据交互
一，父组件向子组件传值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 20%; mar原创 2020-08-27 15:26:54 · 372 阅读 · 0 评论 -
vue组件化开发学习笔记-1-组件化开发思想
一，由机械设计角度理解组件化思想就像是机械设计中，整机通常由各个部件构成，各个部件实现特定的功能。经过机械行业长期的发展，有些公司就开始将这些可以实现特定功能的机械模块进行标准化，比如功能模块单一的标准件：螺钉，螺母，轴承这些。功能结构复杂些的，比如滚珠丝杆，线性导轨，电缸，型材等。利用这些模块，进行排列组合，就可以实现不同功能的机器设备。这就是组件化思想。即将实现不同功能的代码封装成不同的组件，像搭积木一样编程组件化思想有四个特征：标准：也就是和机械中的标准化一样，只有标准化，才能带来更大程原创 2020-08-27 00:54:36 · 568 阅读 · 0 评论 -
vue学习笔记-17-图书管理小案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> table{ border-spacing: 0; } #ap.原创 2020-08-26 19:10:46 · 431 阅读 · 0 评论 -
vue学习笔记-16-vue的数组方法
vue页面上的数据和vm中的数据是实时一致的，而原生的数组方法无法实现这一点，所以vue中的数组方法经过了二次处理。然而用法还是和之前的一样。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> &l.原创 2020-08-26 13:53:36 · 816 阅读 · 0 评论 -
vue学习笔记-15-vue生命周期
对于每一个生命阶段，vue提供了一些特定的方法：这一阶段进行完毕，其对应的方法就会被执行。比如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/c.原创 2020-08-26 10:14:44 · 189 阅读 · 0 评论 -
vue学习笔记-14-过滤器
一，vue中过滤器的作用二，过滤器的基本使用; //设置过滤器、 Vue.filter('upper',function(val){ return val.charAt(0).toUpperCase()+val.slice(1) }) var vm=new Vue({ el: "#app", data:{ name:"hello" }, computed:{}, methods:{}, watch:{} })原创 2020-08-25 18:18:28 · 174 阅读 · 0 评论 -
vue学习笔记-13-侦听器
一，侦听器的引入之前就已经学到了，一旦vue实例对象中的数据发生了变化，页面上对应的数据也会随之发生变化，为了业务需要，常常需要对数据进行二次处理，为了保证数据实时变化，所以引入了侦听器的概念，对应的数据一旦发生变化。就会执行这里定义好的对应函数。二，一个小案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link .原创 2020-08-25 17:53:00 · 291 阅读 · 0 评论 -
vue学习笔记-12-计算属性
一，计算属性举个例子，如果要实现字符串的方向输出，需要这样写：<div>{{msg.split('').reverse().join('')}}</div>这样一来，模板里面的字符串就太复杂了，于是就想把它放到专门的地方处理，让html只起页面结构的作用。也就是：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title原创 2020-08-25 15:59:26 · 229 阅读 · 0 评论 -
vue学习笔记-11-自定义指令
之前学的指令可以满足我们大多数常规的操作，哪那些指令又被称作vue的内置指令。有些时候，又需要我们自定义一些指令。一，不带参数的自定义指令现在拿表单第一个元素自动获取焦点来举例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style>原创 2020-08-25 14:32:35 · 197 阅读 · 0 评论 -
vue学习笔记-10-常用特性之表单操作
var vm = new Vue({ el: '#app', data: { uname: 'lisi', gender: 2, hobby: ['2','3'], // occupation: 3 occupation: 0, desc: 'nihao' } });一，单行文本输入的处理<input type="text" v-model='un...原创 2020-08-24 22:33:00 · 185 阅读 · 0 评论 -
vue学习笔记-9-tab选项卡小案例
一，自己写的：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 400px; mar原创 2020-08-24 18:36:52 · 237 阅读 · 0 评论 -
vue学习笔记-8-循环结构
一，v-for遍历数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-h原创 2020-08-24 16:38:32 · 202 阅读 · 0 评论 -
vue学习笔记-7-分支结构
一 ，分支结构v-if对于分支结构，就是根据表达式的值来有条件地渲染元素。实例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%;原创 2020-08-24 14:32:30 · 341 阅读 · 0 评论 -
vue学习笔记-6-样式绑定
一，通过标识位来控制class的样式是否启用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto;原创 2020-08-24 12:50:38 · 254 阅读 · 0 评论 -
vue学习笔记-6-属性绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-height: 40px;.原创 2020-08-24 10:56:49 · 425 阅读 · 0 评论 -
vue学习笔记-5-vue小例子：加法计算器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-height: 40px;原创 2020-08-23 16:53:34 · 306 阅读 · 0 评论 -
vue学习笔记-4-事件绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; text-align: center.原创 2020-08-23 14:43:52 · 168 阅读 · 0 评论 -
vue学习笔记-3-双向数据绑定
双向数据绑定，实际上就是说，页面的内容发生了变化，会导致对应的vm.data中的数据变化。而vm.data中数据的变化，同样会导致页面内容的变化，这就是数据的双向绑定。换句话说，就是页面的显示数据和vm.data中的数据同步变化了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css.原创 2020-08-23 14:10:11 · 185 阅读 · 0 评论 -
vue学习笔记-2-模板语法中得指令
一：v-cloak指令的用法 1,先提供样式，放在style样式中，即属性选择器 [v-cloak]{ display:none } 2,在插值表达式所在的标签中添加v-cloak指令<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-clo原创 2020-08-22 23:44:30 · 170 阅读 · 0 评论 -
vue学习笔记-1-初步认识
一，vue的安装网址：https://doc.vue-js.com/v2/guide/installation.html二，hello word<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div>{{ms原创 2020-08-22 23:13:47 · 178 阅读 · 0 评论