VUE
文章平均质量分 50
很困的00
这个作者很懒,什么都没留下…
展开
-
v-model和.sync
1.v-bind:属性,v-on:事件2.v-bind:属性,v-on:udpate:属性3.v-bind:属性.sync4.v-model原创 2021-05-24 19:56:40 · 562 阅读 · 2 评论 -
VUE-编程式路由导航
编程式路由导航是通过JS代码实现路由的跳转。一、路由的实现hash:通过改变路径的哈希值,来去实现历史记录的保存。一旦改变了哈希值,浏览器的历史记录就会记录下来这个改变,而且浏览器还能监视改变。一旦监视就知道当前哈希值是多少,有了哈希值就能知道包含的路径,有了路径找到对应的路由组件,找到路由组件就拿出来显示。getState/setState:和hash方式类似。有push和replace方式,这是浏览器要管理所有访问过的路径的状态二、$router(路由器)可实现路由的跳转,栈结构...原创 2021-04-03 20:09:19 · 1061 阅读 · 0 评论 -
VUE-向路由组件传递数据
方式 1: 路由路径携带参数(param/query)请求参数的方式:params是:query是?index: { path:'/home/messages',//另一种写法 component:Messages, children:[ { path:'/home/messages/MessageDetail/:id',//占位符,动态组件,param原创 2021-04-01 19:38:24 · 385 阅读 · 0 评论 -
VUE-路由vue-router
官方用来实现SPA的vue插件VueRouter():用于创建路由器的构建函数一、注册路由器(在main.js)原创 2021-04-01 14:13:49 · 88 阅读 · 0 评论 -
VUE-ajax请求
一、VUE-ajax请求在声明周期回调函数中发送请求:mounted(){}使用vue-resource库或者axios来发送ajax请求去获取数据安装vue-resource:npm install vue-resource --save安装:axios:npm install axios --save在main.js引入插件vue-resource:import VueResource from 'vue-resource'在main.js声明使用插件:Vue.use(VueResourc原创 2021-03-19 18:03:49 · 513 阅读 · 0 评论 -
VUE-组件间通信方式
一、vue组件间的通讯方式1.props2.vue的自定义事件自定义事件主要包括两个部分:(1)监听事件绑定监听事件的方式一:通过v-on绑定,@//给todoHeader 组件对象绑定addLists监听<todoHeader @addLists="addLists"/>绑定监听事件的方式二:通过$on(eventName,回调函数)//通过ref查找需要绑定的组件标签 <todoHeader ref="header"/>eventName是事件名原创 2021-03-19 17:28:17 · 110 阅读 · 0 评论 -
VUE计算属性computed的get和set / 过滤 /存储数据
一、computed计算属性get是其他的数据来获取computed里定义的那个数据,决定返回值。set是根据computed里定义的那个数据值来改变其他的数据。<input type="checkbox" v-model="checkAllBox"/>computed:{ checkAllBox:{ get(){ return this.listsSize===this.lists.length && this.listsSize>原创 2021-03-16 20:54:59 · 1614 阅读 · 0 评论 -
VUE-props-自定义事件
一、props组件间通信:通过标签属性子组件在接收父组件传递过来的值,需要声明接收属性,这个属性会成为子组件对象的属性。在父组件定义MyComponent时:<my-component name='tom' :age='3' :set-name='setName'></my-component>1.在子组件内声明接收属性// 方式一:只指定名称props: ['name', 'age', 'setName']// 方式二:指定名称和类型props: { n原创 2021-03-16 18:56:34 · 327 阅读 · 0 评论 -
VUE初始化
1.组件:局部功能界面,这个界面里要实现这个功能相关的所有资源都是组件的一个组成部分vue的模板文件:<template> <div> </div></template><script> export default{//向外默认暴露一个配置对象 }</script><style>...原创 2021-03-13 15:56:28 · 313 阅读 · 0 评论 -
VUE-指令-插件
一、指令1.常用内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个原创 2021-03-03 21:18:30 · 203 阅读 · 0 评论 -
VUE-生命周期-动画/过渡-过滤器
1. vue对象的生命周期1). 初始化显示* beforeCreate()* created()* beforeMount()* mounted(): 挂载2). 更新状态* beforeUpdate()* updated()3). 销毁vue实例: vm.$destory()* beforeDestory()* destoryed() <div id="demo"> <button @click='destoryVue'>销毁vue&l原创 2021-03-02 21:26:55 · 163 阅读 · 0 评论 -
VUE-event-事件修饰符-按键修饰符-表单输入绑定
1. 绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参: event 隐含属性对象: $event <button @click='btn3(123,$event)'>按钮3</button>//方法: btn3(msg,event){ console.log(msg ,event.target.innerHTML);//按钮3 }默认事件对象是event,当事件所对应的响应函数原创 2021-03-01 21:29:07 · 303 阅读 · 0 评论 -
VUE学习笔记-列表搜索,排序
一、列表搜索原创 2021-02-27 22:04:05 · 113 阅读 · 0 评论