![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
「已注销」
漫漫长路修远兮,吾将上下而求索。
展开
-
Vue-Router基础知识
序:路由不只是网址的意思,也可能是一条路径!对应的路径找到对应的内容1.Vue Router是Vue.js官方的路由管理器,它和vue.js核心深度集成,让构建单页面应用变得轻松;网址:https://router.vuejs.org/zh;https://router.vuejs.org/zh/guide/。2.基本配置1)初始化工程项目:vue create lk-vue-router/npm install vue-router --save/npm run serve。...原创 2021-03-17 14:39:45 · 83 阅读 · 0 评论 -
Vuex基础
想不到我都学到这里了!!!!!!坚持就是胜利!我打算明天早点儿起床开始搞这个东西!不要气馁,坚持就是胜利!参考文档:https://vuex.vuejs.org/zh/。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入原创 2021-03-21 16:40:54 · 85 阅读 · 0 评论 -
Vue-ajax网络请求
ajax:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。常用的两个ajax:1)vue-resource:vue插件,非官方库,vue1.x使用广泛;2)axios:通用的ajax库,官方推荐,vue2.x使用广泛。https://www.npmjs.cn/NPM中文文档。https://www.npmjs.com/NPM英文文档。https://www.npmjs.com/search?q=axios关于axios的内容。3)ax原创 2021-03-23 20:51:27 · 132 阅读 · 0 评论 -
vue-router的history模式
vue-router默认hash模式,url使用#后面定位路由,对seo不利,设置history,就可以使用普通的url模式。history模式即普通url模式,这种模式充分利用history.pushState API来完成URL跳转而无需重新加载页面(只是修改URL的HASH并不是更新页面)。1.相关文档网址:https://router.vuejs.org/zh/guide/essentials/history-mode.html。2.在router.js文件里面添加:mode: 'history原创 2021-03-17 16:26:37 · 2438 阅读 · 0 评论 -
VUE动态路由配置
序router.js传递路由{path:'/mine/:name',name:'mine',component:Mine} //通过:传递一个参数,name是谁都可以!路由必须完全匹配!但是可以使用?问号进行查询!1.https://router.vuejs.org/zh/guide/advanced/data-fetching.html动态路由数据获取的参考文档网址。2.http://localhost:8080/#/mine/%E5%BC%A0%E4%B8%89?sex=%E7%94%B7&原创 2021-03-19 20:31:08 · 2487 阅读 · 0 评论 -
VUE嵌套路由
一级界面中可以通过嵌套路由配置二级界面切换…接续https://blog.csdn.net/weixin_45799003/article/details/114989498的内容和案例1.新建News.vue和Shops.vue两个组件,设置Home.vue为他俩的上一级组件,暨配置router.js中的内容如下。引入二级界面的组件:import News from "./views/News";import Shops from "./views/Shops";配置routes中的路由参数:e原创 2021-03-20 20:19:38 · 119 阅读 · 0 评论 -
VUE路由守卫
参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html序:通过路由守卫可以对每次刷新或者进入的路由界面进行权限验证,相当于VUE中的全局中间件。1.全局守卫:router.beforeEach注册一个全局前置守卫。注册登录主面板注册Login.vueDashBoard.vue...原创 2021-03-21 15:18:03 · 790 阅读 · 0 评论 -
VUE案例初识
vuex是渐进式框架,需要什么就添加什么。弹射装置安装:1)新建lk-vuex-demo1项目,项目里面open in terminal,终端打开:vue add vuex(可全部配置好)。有可能改变的文件内容包括:src/store.js,package-lock.json,package.json,src/main.js。本人使用的版本最终在src文件夹里面有一个store文件夹,然后里面有一个index.js文件与store.js类似。实现功能:counter计算器...原创 2021-03-22 19:03:42 · 60 阅读 · 0 评论 -
vuex-todolist(日程表失败案例)
序:接续前面日程表案例https://blog.csdn.net/weixin_45799003/article/details/114760856和https://blog.csdn.net/weixin_45799003/article/details/114823394。1.首先新建项目lk-vuex-todo,制作如下界面,文件内容参考上面链接的案例。2.vue add vuex添加配置VUEX组件,npm install,npm run serve打开。添加如下几个文件:新版的安装完vue原创 2021-03-23 17:56:02 · 116 阅读 · 0 评论 -
vue-router导航路由和出口路由
序:接续前面的基本配置内容1.src目录下新建views目录,新建About.vue和Home.vue。<template> <div> <h2>首页</h2> </div></template><script> export default { name: "Home" }</script><style scoped>原创 2021-03-17 15:51:54 · 2690 阅读 · 0 评论 -
VUE生态常用的UI组件库02
2.Element UI1),Mint UI网址http://mint-ui.github.io/#!/zh-cn,饿了么开源的基于vue的移动端UI组件库。原创 2021-03-17 10:55:10 · 164 阅读 · 0 评论 -
VUE生态常用的UI组件库01
1.vant轻量,可靠的移动端Vue组件库;有赞前端团队出品(微商产品公司的);https://github.com/youzan/vant,可以进入文档官方网站。(bootstrap?是什么?这个都没学过,将来可怎么办啊(๑˙ー˙๑)!)建议把精力放在业务层,因为都有现成的。...原创 2021-03-16 20:03:30 · 178 阅读 · 1 评论 -
VUE实名插槽的集成
接续TODOLIST实例下面是App.vue的template部分:<Footer> <input slot="isCheck" type="checkbox" v-model="isCheck"/> <span slot="finish">已完成{{finishedCount}}件/总计{{todos.length}}件</span> <button slot="delete" class="btn btn-warning"原创 2021-03-16 19:40:48 · 85 阅读 · 0 评论 -
VUE消息订阅(案例练习)
1.安装插件pubsub-js:npm install --save pubsub-js(在项目文件夹里面open in termimal)。2.引入类库App.vue和Item.vue:import PubSub from 'pubsub-js'。(TODOLIST案例接续)3.补充:https://www.npmjs.com/package/pubsub-js。(这个是参考文档!)4.父组件订阅,子组件发布。App.vue订阅,Item.vue发布消息。App.vue的操作:引入组件;订阅子组件原创 2021-03-15 16:48:34 · 173 阅读 · 0 评论 -
VUE自定义事件(练习)
以前面的TODOLIST为例1.父组件App.vue里面有一个header组件<Header ref="header"/>,方法:addTodo(todo){ this.todos.unshift(todo); },,一个钩子函数:mounted() { this.$refs.header.$on('addTodo',this.addTodo) },。2.子组件Header.vue的方法this.$emit('addTodo',todo);。解释:自定义事件就是父组件有一个ref标记进行监原创 2021-03-15 15:57:26 · 110 阅读 · 0 评论 -
VUE数据存储和深度监视(练习)
看起来有点儿弄不明白???的技术1.深度监视:为了发现对象内部的变化,可以在选项参数中指定deep:true,而监听数组的变动不需要这么做。方法使用:1)deep:其值是true或false,确认是否是深入监听。一般监听是不能监听到对象属性值的变化的,但是数组值是可以监听到的。2)handler:其值是一个回调函数,监听到变化时应该执行的函数。3)immediate:true或false,确认是否以当前的初始值执行handler函数(是否立即执行函数的意思?)。接上前面未完成的VUE-TODUL原创 2021-03-15 11:30:24 · 84 阅读 · 0 评论 -
VUE项目中断,如何重新进入呢?
方法一:1.进入项目文件夹内,比如项目名称lk-demo,找到“./lkdemo”文件夹,在这个文件夹内执行CMD!2.执行npm install,再执行npm run serve命令。方法二:1.用编程软件打开该项目,在当前文件夹,比如“lk-demo”下执行:open in terminal,即在终端打开,再依次执行:npm install和npm run serve命令。最后浏览器打开http://localhost:8080/就行了!...原创 2021-03-15 10:59:47 · 1932 阅读 · 1 评论 -
VUE-TODULIST(失败案例演示)
序:这是一个使用TODOLIST的反面教程!完全没明白怎么回事,繁琐而又闹心!//这个是APP.vue文件里面的!<template> <div class="todo-container"> <div class="todo-wrap"> <Header/> //这里有个列表,代表作的事情! <List :todos="todos"/> <Footer/原创 2021-03-13 20:53:23 · 145 阅读 · 0 评论 -
VUE通信组件介绍01
序:组件与组件之间有很多种通信模式!常用的有四种1.通信的基本原则:不要在子组件中直接修改父组件的状态数据;数据和处理数据的函数应该在同一模块内。(数据流是单向的)2.组件通信常用方式:props,属性;自定义事件,局限性与前者互补;消息订阅与发布;vuex。props方式在组件内声明所有的props(尽可能显示声明):1)只指定名称;2)指定名称和类型;3)指定名称、类型、必要性、默认值。//1)只指定名称<template> <div> &原创 2021-03-12 17:54:57 · 81 阅读 · 0 评论 -
VUE基础知识17
VUE组件的生命周期1.new Vue()------>Init Events&Lifecycle------>Init Injection&reactivity(注入和反应性)------>Has 'el' option?------>Has "template" option?(非工程),如果是工程化的,需要手动挂载when vm.$mount(el) is called(mounted:安装)------>Compile template into re原创 2021-03-12 11:16:02 · 128 阅读 · 0 评论 -
VUE基础知识16
动画与过渡<button @click="flag=!flag">切换</button><p></p><transition name="bounce">//fade就是方法名! <img v-if="flag" :src="pic" alt=""></transition>import pic from '@/assets/图片名.jpg' //导入图片,@自动到当前目录下面data(){ r原创 2021-03-11 20:17:02 · 83 阅读 · 0 评论 -
VUE基础知识15
过渡与动画Vue.js里面–进入/离开,v-enter,v-leave;6个类名。VUE通过操作css的trasition或animation可以给特定的目标元素添加、移除特定的class1.过渡的相关类名:xxx-enter/xxx-leave-to:指定隐藏时的样式;xxx-enter-active:指定显示的transiton;xxx-leave-active:指定隐藏的transition。2.操作步骤:在目标元素外包裹<transition name="xxx">;定义clas原创 2021-03-11 17:30:35 · 66 阅读 · 0 评论 -
VUE基础知识14
格式化日期序:github里面有个JS插件叫moment,document里面有使用方式1.下载,在项目文件里面右键单击选择open in terminial在终端打开;npm i moment--save,这样就在进行一个全局的安装了!2.进入项目文件的package.json里面,看到依赖dependencies,就会有一个关于moment的内容显示出来。在node_modules的moment文件夹的readme里面也有使用方式。<p>{{time}}</p><原创 2021-03-11 17:06:57 · 63 阅读 · 0 评论 -
VUE基础知识13
过滤器:对要显示的数据进行特定格式化后再显示;并没有改变原本的数据,而是产生新的对应的数据。定义过滤器:全局定义Vue.filter。Vue.filter('totalMonetFormat'.(value)=>{return'¥'+Number(value).toFixed(3);});新建组件:LkFilters.vue定义局部过滤器<p>¥:{{money}}.00</p><p>{{monery|moneyFormat()}</p>原创 2021-03-11 16:46:10 · 60 阅读 · 1 评论 -
VUE基础知识11
事件处理:1.事件绑定监听:1)v-on:xxx = "func"2)@xxx = "func"3)@xxx = "func(参数)"4)v-on:xxx = "函数名"2.参数默认事件形象:event;隐含属性对象:$event,在原生事件中,它是事件对象,在自定义事件中,它是传递过来的数据。3.事件修饰符vue.js里面搜v-on有很多修饰符,开发过程当中:.stop和.prevent最常用,前者用来停止事件冒泡event.stopPropagation(),后者用来阻止事件的默认行为原创 2021-03-11 16:21:57 · 59 阅读 · 0 评论 -
VUE基础知识10
自定义指令:1.自定义全局指令//在main.js里面操作,首先注册全局指令,Vue.directive(id:'upper-word',definition:(el,binding)=>{ el.textContext = binding.value.toUpperCase();});//全局定义,全局使用,在某个组件里面使用即可。<p v-upper-word = "word1"></p>data(){ return{ word1:'it li原创 2021-03-11 10:45:25 · 61 阅读 · 0 评论 -
VUE基础知识09
其他常用指令1.v-show v-if v-else v-else-if v-for(Array,Object,number,string,Iterable) v-on v-bind v-model2.v-text,v-html注入text和html3.v-pre跳过这个元素和它的子元素的编译过程,可以用来显示原始的mustache标签,跳过大量没有指令的节点会加快编译。4.v-cloak:防止闪现;和CSS规则如*[v-cloak]{display:none}一起使用时,这个指令可以原创 2021-03-10 20:51:32 · 51 阅读 · 0 评论 -
VUE基础知识08
列表渲染:3.过滤遍历4.排序遍历:两种方式,服务器和客户端。新建组件:ListRenderTwo.vue<div> <input type = "text" placeholder = "请输入姓名!" v-model = "searchName"> <ul> <li v-for="(p,index) in filterPersons" :key="personsKeys[index]"> {{index + 1}原创 2021-03-10 20:15:43 · 38 阅读 · 0 评论 -
VUE基础知识07
列表渲染1.数组遍历:可以绑定key,key是给每一个vnode(虚拟节点)的唯一id,可以依靠key,更准确、快速地拿到oldVnode中的对应node节点。2.遍历对象:官网vue.js可以查看用法。新建组件:ListRender.vueshortif组件可以帮助生成独一无二的id:右击项目打开终端,npm i shortid --save在当前工程里面安装三方类库,在package.json里面查看情况。//key保持独一无二性,可以有其他操作。<ul><li v-fo原创 2021-03-08 20:49:31 · 61 阅读 · 0 评论 -
vue基础知识06
条件渲染指令:1.v-if v-else v-else-if条件渲染,确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。(课程并没有说最后那个怎么使用,所以我也不太会用!)2.v-show元素被渲染,只是简单基于CSS进行切换。新建组件:IfAndShow.vue//template里面的内容,前述很多,不再重复书写。<div v-if = "flag">Let is go to school!</div><div v-else>Do not原创 2021-03-08 20:20:56 · 40 阅读 · 0 评论 -
VUE基础知识05
1.class和style概念:模板界面中(template),某些元素的样式是变化的,class/style用于动态绑定类和样式class/style绑定技术就是专门用来处理动态样式效果。class样式::class = 'aaa',其中aaa是取值,可以是字符串、对象、数组。style样式::style = "{backgroundColor:bgcolor,fontSize:fSize}"(这个觉得单词拼错了!),其中bgColor和fSize都是data属性!默认:<template&原创 2021-03-08 20:03:26 · 99 阅读 · 0 评论 -
VUE基础知识04
1.计算属性(computed)作用:减少模板中的计算逻辑、进行数据缓存、进行数据缓存、依赖固定的数据类型(响应式数据)。使用:在computed属性对象中定义计算属性的方法;在页面中使用{{方法名}}来显示计算的结果;通过getter/setter实现对属性数据的显示和监视。//新建一个VUE组件<template><div> <label><input type="text" placeholder="请输入姓氏" v-model="firstNa原创 2021-03-07 16:41:17 · 45 阅读 · 0 评论 -
VUE基础知识03
对标签注入属性是不行的,但是EJS可以!(不知道EJS是什么?)比如:<a href="{{site}}"></a>data(){return {site:'http://www.itlike.com'}双括号仅仅适用于标签与标签,这里如果进行需要强制数据绑定,href=''site'',<a v-bind:href="site">learn VUE</a>简写:<a :href="site">learn VUE</a>。可以原创 2021-03-07 15:41:45 · 79 阅读 · 0 评论 -
VUE基础知识02
模板语法:1.类似于Node中的EJS,可以让HTML页面动态化:大括号表达式、指令以v-开头的自定义标签属性。2.双大括号表达式:语法{{exp}};功能包括向页面输出数据、内部可以是变量 对象 调用表达式;但是,必须要有结果。<div>{{intro}}</div><div>{{intro.toUpperCase()}}</div>data(){ return { intro:'likeit!'} }数据注入,页原创 2021-03-07 15:21:10 · 49 阅读 · 0 评论 -
VUE的基础知识01
双向绑定仅仅是一种高级语法糖(语法糖是什么?好处嘛?)数据流传递还是单向的。组件的定义与使用vue文件的组成包括:模版页面、JS模块对象、样式。基本使用:引入组件、映射成标签、使用组件标签。1.新建组件:new components产生一个后缀名为.vue的文件,包括基本的<template><script><style scoped>组件首字母应该大写。export default{ name:"Template" }2.在App.vu.原创 2021-03-07 15:11:33 · 48 阅读 · 0 评论 -
理解VUE的MVVM
helloworld.Vue,一个组件就是一个小的MVVM。VIEW层<template> <div class=“hello”> <h1>{{msg}}</h1> <label><input type=“tex” v-model=“msg”></label> </div></template>VIEW MODEL层<script> expor原创 2021-03-07 14:33:09 · 98 阅读 · 0 评论 -
App.vue
类似于模板文件。描述一个组件:模板结构,脚本文件,样式文件。template必须只能有一个入口。script引入组件,注册组件,标签化使用。style scoped表示只应用与当前组件。原创 2021-03-06 20:20:38 · 657 阅读 · 0 评论 -
main.js
Vue.config.productionTip=false;阻止启动生产消息。new Vue({render:h=>h(App),}).$mount(’#app’) ;手动挂载。es5还有函数? render:function(createElement){return createElement(App)}es6 去掉了function后面 把createElement换成了h全局配置在main.js里面配置的。...原创 2021-03-06 20:12:30 · 329 阅读 · 0 评论 -
vue初始化02
开发项目的时候需要node_modules原创 2021-03-05 20:41:28 · 48 阅读 · 0 评论 -
vue初始化01
vue create lk-demo(按键盘上下键可以选择默认default还是手动manually,如果选择default,一路回车执行即可。lk-demo也可以换成其他的名字。)操作:当前文件夹执行cmd命令,vue create lk-demo,本人的电脑出现了这样的提示(your connection to the default npm registry seems to be slow.use https://registry.npm.taobao.org for faster instal.原创 2021-03-04 20:52:47 · 173 阅读 · 1 评论