![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue笔记
文章平均质量分 63
是吃货不是贝爷
加油吧~
展开
-
Vue--Vuex
Vuex是将需要共享的数据(状态)放到Vuex内,其他不需要共享的可以放在组件内,从而达到共享的目的。在需要对数据(状态)进行共享,使其具有修改功能时候,全局事件总线与Vuex的实现是不一样的。全局事件总线需要给组件设置绑定和$emit,在很多很多组件的时候会比较乱。原创 2022-10-24 13:07:13 · 145 阅读 · 0 评论 -
Vue--插槽slot
默认插槽很简单,只需要在App中将组件写为双标签格式,并在标签内写入需要插入的标签或者内容,然后再组件中需要插入的位置写上slot标签,slot标签内可以写无插入默认显示的内容,当然不写也是可以的。当类似结构的组件需要插入不同元素的时候,可以使用插槽。原创 2022-10-22 09:24:19 · 247 阅读 · 0 评论 -
Vue--github案例--搜索
除了注册相应的组件外,需要引入bootstrap,但是bootstrap中用到不需要用的字体,这时候如果用放在src/assets/css中并import则vue会严格检查并报错,所以这时候要么把字体也下下来,要么可以放在public中,即public/css/bootstrap.css,因为没用到字体,就放在public中。在public下的index.html中用link引入,因为所有组件最后都放入了index里的app内。这其中还涉及到第一次访问,加载文字,以及错误信息。原创 2022-10-21 14:12:14 · 169 阅读 · 0 评论 -
Vue--axios
注意:public为代理服务器的根路径,如果里面的文件对应了请求的数据,那么直接将public内的该文件内的数据返回,不会请求,并且这种方法只能配置一个代理服务器。API文档:https://cli.vuejs.org/zh/config/#devserver-proxy。这里服务器端口号是5000,本地是8080,如果直接运行就会报错,因为跨域了。App中的请求应该发给代理服务器,因此应该是8080端口。只需要在vue.config.js中粘贴相应的代码即可。这里用vue-cli学习成本低点。原创 2022-10-20 18:07:12 · 267 阅读 · 0 评论 -
Vue--动画效果与过度效果
transition标签不会呈现在浏览器元素选项上,将相应动画效果的内容放置在transition标签内,并且设置相应class的样式,可以实现动画效果。原创 2022-10-17 20:57:36 · 269 阅读 · 0 评论 -
Vue--$nextTick
无原创 2022-10-15 20:25:44 · 272 阅读 · 0 评论 -
Vue--消息的订阅与发布
笔记原创 2022-10-13 11:21:03 · 212 阅读 · 0 评论 -
Vue--全局事件总线
无原创 2022-10-04 16:18:32 · 165 阅读 · 0 评论 -
Vue--组件自定义事件
无原创 2022-10-02 17:33:26 · 366 阅读 · 0 评论 -
Vue-Todolist案例
无原创 2022-08-05 22:38:22 · 103 阅读 · 0 评论 -
Vue--列表
v-forv-forv-forv-for事实上跟for循环的逻辑类似,遍历数组、对象、字符串、固定数值,遍历所给的参数也是不一样的数组=(obj, index)对象=(value, key)字符串=(char, index)固定数值(number, index)<div id="testBox"> <ul> <!--这里in变成of也可以--> <!--遍历数组--> <li v原创 2022-05-24 00:30:42 · 3319 阅读 · 0 评论 -
Vue--v-show和v-if
条件渲染目录v-show和v-ifv-show和v-ifv-show与v-if的区别就是,v-show如果值为false的时候只是添加了一个样式display:none,而v-if直接标签都没有,相比来说show的话一般应用在需要频繁切换的场合,if一般在一次性场合使用(实际开发过程中,v-if用的比较多),这是因为,v-show只是修改了display,而v-if是不断的在dom里面增加以及删除节点。当然不管是哪个,都可以修改为true或者false来决定是显示还是隐藏。<div id="原创 2022-05-23 13:44:26 · 323 阅读 · 0 评论 -
Vue--绑定(v-bind)
绑定目录绑定class绑定style(待更新)绑定class基本的样式.notChange { width: 150px; height: 150px; margin: 20px; display: inline-block; background-color: red;}.classOne { color: aqua;}.classTwo { border-radius: 20px;}.classThree { font-s原创 2022-05-22 12:50:54 · 360 阅读 · 1 评论 -
Vue--watch(监视属性)
监视属性目录天气案例注意:监视属性(watch)天气案例要求:点击按钮后改变天气,并且后台输出的也改变。先自己做一下,用的很简单的methods<div id="btnDemo"> <h1>今天天气很{{weather}}</h1><br> <button @click="changeWeather()">切换天气</button></div><script type="text/ja原创 2022-05-19 10:18:20 · 760 阅读 · 0 评论 -
Vue--computed(计算属性)
computed目录姓名案例计算属性例子简写形式姓名案例这个可以用插值语法做,代码如下<div id="btnDemo"> <label for="lastName">姓:</label> <input id="lastName" type="text" v-model="lastName"><br> <label for="firstName">名:</label> <inp原创 2022-05-18 12:23:37 · 365 阅读 · 0 评论 -
Vue--事件(v-on)
事件目录v-on计数器练习事件修饰符常用其他拓展键盘事件Vue常见的按键别名系统修饰键代码v-on事件的基本使用:1.v-on:xxx或@xxx,绑定事件,xxx是事件名(如v-on:click以及@click)2.事件需要配置在methods对象中,并且相应的函数在vm里,而且this也就是vm。3.methods里面的函数不能用箭头函数(前面也有讲过,箭头函数没有this),这样this就会向上找到windows4.@click=“demo($event, xx)”其中$event为点击原创 2022-05-18 10:16:24 · 1091 阅读 · 0 评论 -
Vue--数据代理
文章目录Object.definePropertyObject.definePropertylet obj = { name: '野原新之助', age: 6}Object.defineProperty(obj, 'gender', { value: '男', //默认不可枚举,要想可以枚举,就可以加enumerable: true //默认不可修改,要想可以修改,就可以加writable: true //默认不可删除,要想可以修改,就可以加configurable: tru原创 2022-05-14 21:50:12 · 259 阅读 · 0 评论 -
将vue部署到tomcat上
首先,终端输入npm run build(注意看package.json,如果build 后面有prod就是npm run build:prod)原创 2021-10-17 12:57:23 · 123 阅读 · 0 评论 -
2021.7.12笔记 vue入门
1<div id="app">{{message}}</div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: 'hah !', } })</script>2<div id="app"> <ul> <li v-for="原创 2021-07-12 18:07:35 · 187 阅读 · 0 评论