随笔分类 - vue
vue从零开发
element Tree树形控件获取未全选父节点id和子节点id
摘要:element ui Tree树形控件获取未全选父节点和子节点id Tree树形控件选中状态 在做分配权限的时候如图选择了父节点的某些子节点,现在父节点是半选中状态,使用this.$refs.tree.getCheckedKeys()只能拿到当前的子节点,子节点全选才能拿到父节点,而后台需要我们把父
阅读全文
vue具名插槽
摘要:具名插槽 具有名字的插槽slot使用 中的 "name" 属性绑定元素 注意: 1,如果没有匹配到 则放到匿名的插槽中 2,具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序 <div id="app"> <!--这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 s
阅读全文
vue 匿名插槽
摘要:组件插槽:组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力 # 当组件渲染的时候,这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。 # 插槽内可以包含任何模板代码,包括 HTML 匿名插槽 <div id="app"> <!--这里的所有组件标签中嵌套的内容会替换掉slo
阅读全文
vue-兄弟组件传值
摘要:兄弟组件之间传值: 兄弟之间的传递数据需要借助于事件中心,通过事件中心传递数据提供事件中心 var hub = new Vue() 传递数据方,通过一个事件触发hub.on()方法名 销毁事件 通过hub
阅读全文
vue-父组件向子组件传递参数
摘要:父组件向子组件传递参数: 注意: - 父组件发送的形式是以属性的形式绑定值到子组件身上。 - 然后子组件用属性props接收 - 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式,字符串模板中没有这个限制 - 在需要动态的数据的时候 需要属性绑定的形式设置,静态值不需要绑定形式设置,
阅读全文
Vue-自定义过滤器
摘要:Vue.js 允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: <!-- 在双花括号中 --> {{ message | ca
阅读全文
计算属性 computed
摘要:计算属性 computed 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div i
阅读全文
Vue.directive(自定义指令)
摘要:Vue.directive指令(自定义指令) 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个改变d
阅读全文
Vue数组常用操作
摘要:Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 pop() 方法用于删除并返回数组的最后一个元素。 shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 spl
阅读全文
vue数组的增改和v-model的绑定使用Demo
摘要:效果图: 实现代码: <template> <div> <div class="all"> <p>综合小练习</p><br> 姓名:<input type="text" v-model="newPerson.name"><br> <p></p> 年龄:<input type="text" v-mod
阅读全文
vueDemo补充
摘要:<div id="app"> 手机:<input type="text" v-model="newProject.name" value="" name="phone"> 库存:<input type="text" value="0" v-model="newProject.num" name="n
阅读全文
vueDemo
摘要:实现代码 <div id="app"> 手机:<input type="text" v-model="newProject.name" value="" name="phone"> 库存:<input type="text" value="0" v-model="newProject.num" na
阅读全文
vue中输入框v-mode绑定
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
Vue.js 组件
摘要:组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 注册一个全局组件语法格式如下例子: <div id="app"> <runoob>
阅读全文
v-model 修饰符
摘要:.lazy 在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > .
阅读全文
Vue.js 表单(单选&复选框)
摘要:v-model 指令在表单控件元素上创建双向数据绑定。 复选框: <div id="app"> <p>单个复选框:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked
阅读全文
watch监听事件
摘要:Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器: <div id="app"> <p>当前数字:{{count}}</p> <button type="button" v-on:click="add()">+</button> <
阅读全文
router路由配置
摘要:vue项目中router路由配置 介绍 路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》 安装 本地环境安装路由插件vue-router: cnpm install vue-router --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安
阅读全文
循环使用 v-for 指令。
摘要:循环语句 循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: <div id="app"> <ol> <li v-for="site in
阅读全文