vue
学习vue期间的笔记
小 影
这个作者很懒,什么都没留下…
展开
-
节点连接系统总结
需求:1、创建100个节点,每个节点的权值内容为-1~1之间的随机数,保留四位小数2、创建100个点,每个点的横纵坐标随机,点可以为负但不可重复。每个节点对应一个点。3、将节点根据权值排序,首尾相连得到一个权值对,用N表示. 得到50对权值对,表示为“<N(3,4),N(5.6)>”.前后为两个权值的点的坐标4、用散点图将每个节点在图中表示出来,点击某个节点对N后相应的两个点连接起来5、最后生成N的txt文件6、提供一个文件点击可直接运行1、创建文件夹因为第六条的限制,所以n原创 2021-10-04 11:06:27 · 571 阅读 · 0 评论 -
我对vue生命周期的理解
1、什么是声明周期?指vue中从生到死的特定阶段调用的方法生命周期钩子 = 生命周期事件 = 生命周期函数2、声明周期分类方便记忆的话,分为四类,创建前后,载入前后,更新前后,销毁前后可以分为三个时间段:创建期间beforeCreate:在实例初始化之后,数据观测(data observer) 和event/watcher 事件配置之前被调用。(整个页面创建之前调用此函数)created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer),原创 2021-05-11 16:59:23 · 166 阅读 · 1 评论 -
vue脚手架创建项目
https://www.cnblogs.com/ming1025/p/9887247.html转载 2021-04-22 16:57:58 · 57 阅读 · 0 评论 -
vue中axios的使用
写上一个项目的时候,我们就用到了axios,但是我当时没怎么学,不知道从哪下手,这个时候我小伙伴又把咋用的给我整理好了,那我就老老实实的当个废物,他怎么说我怎么用。最后能用,但是不理解为什么这样用,正好学vue中的axios时又重新学了一遍。axios的使用直接拿代码来讲吧axios.defaults.baseURL = 'http://123.207.32.32:8000'axios.defaults.timeout = 5000axios({ url: '/home/multidata',原创 2021-01-29 22:06:38 · 2594 阅读 · 0 评论 -
Component template should contain exactly one root element.
vue组件化开发遇到的问题,问题描述:(Emitted value instead of an instance of Error) Error compiling template: <MainHeader/> <MainSearch/> - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-原创 2021-01-26 22:10:55 · 224 阅读 · 0 评论 -
vue-router
1,安装可以在脚手架创建项目时直接创建vue-router,当时没创建的话,npm install vue-router -g也可以下载2,配置路径先引入,再挂载,在配置,配置是根据键值对来配置import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)import login from '../components/content/login/LoginCenter';import register from '原创 2021-01-25 21:09:58 · 156 阅读 · 1 评论 -
11-组件化插槽的使用
使用组件,里面的内容不是一成不变的,需要修改的部分用插槽代替01-插槽的基本使用插槽的默认值button如果有多个值,同时放入到组件进行替换时,一起作为替换元素<body> <div id="app"> <cpn>1</cpn> <cpn>2</cpn> </div> <script src="../js/vue.js"></script>原创 2021-01-23 10:19:30 · 79 阅读 · 0 评论 -
10-组件化开发
前九个学完,勉强入点门,接下来学vue中非常重要的部分:组件化开发01-组件化的基本使用创建组件构造器对象–>注册组件–>使用组件<body> <div id="app"> <!-- 3,使用组件 --> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> &l原创 2021-01-23 10:13:11 · 71 阅读 · 0 评论 -
09-v-model的使用
01-v-model的基本使用主要是使用他的双向绑定功能<body> <div id="app"> <!-- 实现双向绑定,修改input值也会影响message的值 --> <input type="text" v-model="message" /> <p>{{message}}</p> </div> <script src="../js/vue.js原创 2021-01-16 15:18:28 · 127 阅读 · 0 评论 -
08-购物车案例
对前面知识总结归纳,做个综合性的案例注意保留后两位小数,前面的¥符号html:<body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称<原创 2021-01-16 15:14:22 · 135 阅读 · 0 评论 -
07-循环遍历
01-v-for遍历数组遍历时需要和不需要下标的情况<body> <div id="app"> <!--1.在遍历的过程中,没有使用索引值(下标值)--> <ul> <li v-for="item in names">{{item}}</li> </ul> <!--2.在遍历的过程中,获取索引值--> <ul>原创 2021-01-16 10:27:30 · 179 阅读 · 0 评论 -
06-条件判断
01-v-if和v-else利用if,else if 和else来判断要显示的内容以及一些要判断的地方<body> <div id="app"> <!-- v-if后写布尔值,为true时显示对应内容 --> <h2 v-if="isSHow">这是让我显示的时候</h2> <h2 v-else>这是不让我显示的时候</h2> <button @click="原创 2021-01-16 10:20:14 · 72 阅读 · 0 评论 -
05-事件监听
01-v-on的基本使用普通写法与语法糖写法<body> <div id="app"> <h2>{{counter}}</h2> <!-- 普通写法 --> <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> &l原创 2021-01-13 11:03:23 · 96 阅读 · 1 评论 -
04-计算属性
01-计算属性的基本使用四种方法实现变量相加<body> <div id="app"> <!-- 直接并排写两个 --> <h2>{{begin}}{{end}}</h2> <!-- 加法 --> <h2>{{begin+end}}</h2> <!-- 函数 --> <h2>{{getLast()}}&原创 2021-01-11 10:04:27 · 77 阅读 · 0 评论 -
03-动态绑定属性
01–v-bind的使用需要改变元素里面的属性值,例如href,src,style等,就用v-bind渲染过去。写法如下<body> <div id="app"> <!-- 正常写法 --> <img v-bind:src="imgUrl" alt="" /> <a v-bind:href="aHref">百度一下</a> <!-- 语法糖写法 -->原创 2021-01-10 09:21:04 · 116 阅读 · 0 评论 -
02-插值
01-mustache<body> <div id="app"> <h2>{{a}} {{b}}</h2> <h2>{{a+" "+b}}</h2> <h2>{{a+"?"+b}}</h2> <h2>{{num *2}}</h2> </div> <script src="../js/vue.js"&原创 2021-01-09 20:03:07 · 83 阅读 · 0 评论 -
01-Vuejs初体验
01-helloVuejsvue的官网:https://cn.vuejs.org/引入vueCDN引入<!--开发环境版本,包含了有帮助的命令行警告--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本,优化了尺寸和速度--><script src="https://cdn. jsdelivr.net/ npm/vue">&l原创 2021-01-09 15:30:49 · 101 阅读 · 0 评论