朝颜陌 vue基础----组件通信（props,$emit,$attrs,$listeners）一、父传子，子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据。 2>在子组件中通过props声明希望用到的数据 1 <body>2 <div id="app">3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>4 </div>5 <script src="./node_modules/vue/dist/vue.js"></script>6 <script>7 let vm =...
距离开始学Vue已经过去一个多月了，总想把学到的东西柔和在一起，做点东西出来，于是有了这个Todolist小应用。主要功能就是把一天要做的事情记录下来，还实现了：标记完成事件删除已完成事件各种排序仅显示未完成的项目本地保存截图看这里用时一周，14次commits,把心中的构想基本实现了。详情请看：这里整个过程下来，收获还是很多的，1.对mvvm有了进一步的理解，2.对css布局有了更多的了解。3.更进一步理解了Vue的事件和组件机制。...
Failed to resolve argument 1 of type ‘java.util.List‘org.springframework.web.bind.MissingServletRequestParameterException: Required List parameter ‘categories‘ is not present at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(RequestParamMethodArgumentResolver.java:204) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE] at org.springframework.web.meth...
在初步学习了vue之后，我们可以使用vue的基础知识来实现一个todolist列表，主要功能是通过一个输入框来输入，然后将输入的内容同步的显示在页面上，当点击其中的一项时，出现一条下划线。首先列出在实现功能的过程中需要使用的一些vue语法。1.因为要实现双向绑定，所以需要使用v-model。2.涉及到循环渲染列表，需要使用v-for。3.要实现点击事件，所以在列表上要通过v-on绑定点击事件。4.点击时要在列表上添加或者会删除类名，从而控...
报错截图如下 1.解决过程： 一开始只在vscode终端看到了最先面的报错信息，如下图： 看不出个所以然 网络搜索一番后，有如下类似问题的解决方案npm cache clean --force手动删除node-module文件夹npm inpm run dev 结果还是不行，着急之际，滚动了一下鼠标 看到了完整的报错信息 发现是端口号不对 把3000选中改成了3001 还是同样的报错 正无奈 发现原来是端口号跟 --hot之间少了一个空格。。。。。。。 鬼...
工程结构 启动工程npm run devTodoList.vue<!--模板--><template><div><div><input class="item" v-model="inputValue"/><button @click="submit">提交</button><ul><todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="mydelete"></todo-item></ul></div></div></template><script> import TodoItem from ‘./components/TodoItem‘// 此处用来写逻辑,必须空出一行去写export defaul...
Vue指令1、v-once指令 单独使用，限制的标签内容一旦赋值，便不可被动更改（如果是输入框，可以主动修改）<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title></title> </head> <body><div id="app"><input type="text" v-model="msg"><input type="text" v-model="msg"v-once> #因为是输入框，一旦赋值，只可主动更改<p>{{msg}}</p><p v-once>{{msg}}</p> #一旦赋值，便不可更改</div> </body> <script sr...
> 1%,last 2 versions,not ie <= 8,safari >= 7设置浏览器的兼容对于部分配置参数做一些解释:" >1%" :代表着全球超过1%人使用的浏览器“last 2 versions” : 表示所有浏览器兼容到最后两个版本“not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）“safari >=7”:表示safari浏览器版本大于等于7原文：https://www.cnblogs.com/zhaohui-116/p/12806895.html
建立playlist.vue 组件，在player.vue 组件中引用，点击迷你播放器的播放列表按钮由下至上弹出这个层，所以在player.vue 播放器组件中引用在playlist.vue 组件中首先设置对外的方法可以控制该组件的显示隐藏，通过mapGetters 获取歌单数据播放列表功能操作： 当前播放歌曲显示正确的icon 点击当前歌曲播放该歌曲，对应相应的icon ，列表滚动到最上面 删除当前单条播放歌曲，（判断当前歌曲是否为正在播放的歌曲，重置数组...
app.vue<template><div id="app"><input type="text" v-model=‘todo‘ /><button @click="doAdd()">+增加</button><br><hr><br><ul><li v-for="(item,key) in list">{{item}} ---- <button @click="removeData(key)">删除</button></li></ul></div></template><script>export default { data () { return {todo:‘‘ ,list:[]}},methods:{doAdd(){//1、获取文本框输入的值 2、把文本框的值push到list里面this.list.push(...
<div id="todo-list-example"><form v-on:submit.prevent="addNewTodo"><label for="new-todo">Add a todo</label><inputv-model="newTodoText"id="new-todo"placeholder="E.g. Feed the cat"><button>Add</button></form><ul><liis="todo-item"v-for="(todo, index) in todos"v-bind:key="todo.id"v-bind:title="todo.title"v-on:remove="todos.splice(index, 1)"></li></ul></div>在刚开始看这个例子的时候，看到 <form v-on:sub...
在rsc文件夹下新建model文件夹，再新建storage.jsstorage.js代码： 1var storage={2 set(key,value){3 localStorage.setItem(key,JSON.stringify(value));4 5 },6 get(key){7return JSON.parse(localStorage.getItem(key)); 8 9 }, 10 remove(key){ 11 localStorage.removeItem(key); 12 } 13} 14 export default storage;下面是app.vue 1 <template>2 <div id="app">3 4 <input type=‘...
vuex 概述vuex 是实现组件全局状态(数据) 管理的一种机制, 可以方便的实现组件之间的共享优点 :能够在 vuex 中集中管理共享的数据, 易于开发和后期维护能够高效地实现组件之间的数据共享 , 提高开发效率存储在 vuex 中的数据都是响应式的 , 能够实时保持数据与页面的同步什么样的数据适合存储到 vuex 中一般情况下 , 只有组件之间共享的数据 , 才有必要存储到 vuex 中 ; 对于组件中私有数据 , 依旧存在组件自身的 data 中即可vuex ...
项目效果：https://cinderellastory.github.io/todolist/dist/index.html#/ 项目链接：https://github.com/CinderellaStory/todolist vue逆袭群，希望能够帮助到大家！群号：659182980原文：https://www.cnblogs.com/CinderellaStory/p/9819666.html
1<!-- 根组件 --> 2<!-- vue的模板内，所有内容要被一个根节点包含起来 --> 3<template> 4<div id="app"> 5<input type="text" v-model="todo"> 6<button @click="addData()">+增加</button> 7<div v-for="(item,key) in list"> {{item}} -- <button @click="deleteData(key)">删除</button></div> 8</div> 9</template>10<script>11export default { 12 name: ‘app‘, 1314 data () { // data是业务逻辑里面定义的数据...