Vue
关注
分享
扫一扫
小菜鸡_
这个作者很懒，什么都没留下…
展开
-
Spring——编程式事务控制
声明式事务控制（通过配置的方式控制事务）编程式事务控制（通过写代码的方式控制）原创 2020-08-08 18:47:46 · 174 阅读 · 0 评论 -
Vue深入了解组件（四）-插槽
直白的描述插槽就是：--------mycomment是我定义的一个组件<my-comment> //现在我想在myComment中嵌入一些HTML代码，比如文字啊、标签啊、甚至可以是其它的组件 //如果我们直接在这写的话，mycomment组件会扔掉开始标签和结束标签中间的所有内容</my-comment>插槽就是来解决上述问题的。举个例子：------...原创 2020-03-30 08:33:02 · 178 阅读 · 0 评论 -
Vue的.sync 修饰符
.sync修饰符的作用是父组件和子组件属性之间形成双向绑定，像v-model一样。但是v-model每个标签只能有一个，如果组件中有多个属性需要和父组件之间的属性建立双向绑定关系这就用到了.sync。本质上差不多。v-model：<!--v-model写法--><my-component type="text" v-model="value"><!--编译...原创 2020-03-26 16:41:44 · 2873 阅读 · 0 评论 -
原生事件绑定组件详解
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K...原创 2020-03-26 15:43:14 · 180 阅读 · 0 评论 -
Vue深入了解组件（三）-自定义事件
监听事件和prop属性名称方面不太一样，prop属性名若是驼峰命名，在组件调用赋值的时候需要改为key-base的样式，但是监听事件的不会，写啥是啥。------------------组件中的触发代码this.$emit('myEvent')------------------调用时的监听代码<!-- 没有效果 --><my-component v-on:my-eve...原创 2020-03-24 09:39:16 · 260 阅读 · 0 评论 -
Vue深入了解组件（二）-Props
Prop 的大小写组件里可以写驼峰命名法的名字,但是因为HTML是大小写不敏感的所以我们需要通过连接符来解决这个问题即，postTitle属性在标签上要写为post-titleVue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{...原创 2020-03-23 16:15:46 · 259 阅读 · 0 评论 -
深入学习组件（一）
vue强烈推荐的命名方式是全小写且使用连线符，例如：<my-component-name>组件的俩种命名方式：使用 kebab-case，纯小写+连线符，使用不在多做介绍MyComponentName首字母大写的方式，使用可以转为纯小写+连线符或直接使用名称组件的俩种注册方式：全局注册`Vue.component('my-component-name', { /...原创 2020-03-17 21:02:59 · 137 阅读 · 0 评论 -
Vue组件使用注意事项（针对有特殊子标签的标签）
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。//这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外...原创 2020-03-17 20:41:41 · 507 阅读 · 0 评论 -
Vue组件上正常使用v-model
组件上使用v-modelv-model的作用换算：<input v-model="searchText">等价于下面代码：<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">如果你在组件上直接使用v-model，其实它的作用是这样的：<cust...原创 2020-03-17 20:38:24 · 216 阅读 · 0 评论 -
Vue组件及上下级传值
Vue的data属性必须是个函数，否则当你复用组件时，组件之间是互相影响的，下面使用的是全局注册的方式// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button...原创 2020-03-17 20:17:58 · 597 阅读 · 0 评论 -
Vue使用中的问题总结
v-if没法使用函数组件中使用v-for不能放在根节点上template不能当组件的根节点is和:is是不同的，组件使用于table、ul、select等只允许特定子标签的标签中时，需要用is，不用的话，会被父标签踢出去且容易报错...原创 2020-03-16 13:07:09 · 143 阅读 · 0 评论 -
关于Vue表单绑值的修饰符
.lazyvue表单绑值时使用的是input事件而不是change事件，在相应标签使用.lazy可以修改事件为change<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >.number//这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值...原创 2020-03-14 17:00:58 · 118 阅读 · 0 评论 -
关于Vue值绑定的问题（静态和动态）
静态绑值对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：<!-- 当选中时，`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false --><inpu...原创 2020-03-14 16:55:54 · 827 阅读 · 0 评论 -
Vue表单输入绑定 v-model
<input>、<textarea> 及 <select> 元素上创建双向数据绑定使用v-model，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue实例的数据作为数据来源。这句话的意思就是说，你的表单...原创 2020-03-14 16:36:12 · 206 阅读 · 0 评论 -
Vue鼠标修饰符
.left.right.middle<!--点击鼠标左键触发事件：--><!--<div @click.left="divEvent">点击鼠标左键触发事件</div>--><!--点击鼠标右键触发事件：并阻止默认右键菜单--><!--<div @click.right="divEvent" oncontex...原创 2020-03-14 15:51:29 · 420 阅读 · 0 评论 -
Vue按键修饰符
按键修饰符的常用方式<!-- 只有按下Enter键的时候才会调用submit函数 --><input v-on:keyup.enter="submit">//把键盘上看得到的按键按 kebab-case的格式填上当修饰符用//有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。<...原创 2020-03-14 15:42:30 · 266 阅读 · 0 评论 -
Vue的事件修饰符
这里要提的是dom事件分为俩种响应一种是捕获，一种是冒泡，具体百度. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）. prevent：阻止默认事件的发生 ，默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，使用".prevent"修饰符可以阻止这些事件的发生。. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果...原创 2020-03-14 14:49:03 · 152 阅读 · 0 评论 -
Vue 事件处理
Vue对Dom事件的处理简单示例：<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p></div>--...原创 2020-03-14 14:28:43 · 191 阅读 · 0 评论 -
Vue和jquery.dataTable结合的实例
公司表格渲染用的jqueryTable，然而我想用vue做数据绑定，通过jqueryTable做css样式。所以有了下边的故事…首先说一下思路，发送ajax请求后台数据（数据格式是List的json串），我的目的就是写一个模板，这个模板可以根据json自动的绘制table并进行渲染。当然了大佬们都不建议jquery和vue一起用，所以…这篇文章很low首先附上完成代码，具体请看注释<...原创 2020-03-14 11:42:21 · 1577 阅读 · 1 评论 -
关于Vue的v-if和v-for共同使用的问题
Vue官方提供的风格指南是这么说的：永远不要把 v-if 和 v-for 同时用在同一个元素上。Vue给了俩种情况：为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。为了避免渲染本应该被隐藏的列表 (比如 ...原创 2020-03-12 20:51:46 · 215 阅读 · 0 评论 -
Vue关于数组/对象更新问题
变异方法 (mutation method)改变原有数组 push()，增加vue.items.push(x),返回索引号 pop()，删除，vue.items.pop(),返回了一个Object对象没搞明白是个啥 shift()，头部删除,同上 unshift()，头部添加，同上 splice()，应该是拼接app7.items.splice(1,0,{...原创 2020-03-12 20:28:45 · 373 阅读 · 0 评论 -
Vue v-for列表循环
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。v-for的关键词in可以用of来替代v-for循环数组<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li&g...原创 2020-03-12 19:29:57 · 1197 阅读 · 0 评论 -
Vue之v-if key v-show
v-if//if eles-if else必须连续使用，表达式为真时显示<div v-if="type === 'A'"> A</div><div v-else-if="type === 'B'"> B</div><div v-else-if="type === 'C'"> C</div><d...原创 2020-03-12 16:10:07 · 388 阅读 · 0 评论 -
Vue和Style
1.对象语法（内联）//color是属性值，activeColor是vue定义的属性<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>//vue data中的属性值data: { activeColor: 'red', fontSize: 30}2....原创 2020-03-12 15:49:31 · 182 阅读 · 0 评论 -
Vue操作Class
Vue对class的操作不会覆盖原标签带有的class属性，而是追加1. 对象语法内联定义//active为要添加的class,isActive值为真就会保留，为假active就没了<div v-bind:class="{ active: isActive }"></div>2.对象语法非内联定义//绑定属性classObject<div v-bind:...原创 2020-03-12 15:28:01 · 205 阅读 · 0 评论 -
Vue对象大体结构
Vue对象大体结构var app=new Vue({ el:'#app', //vue对象绑定的元素id data:{ //vue对象具备的属性 htmlContent:false, message: 'Hello', firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, //方法，利用的...原创 2020-03-11 17:01:21 · 885 阅读 · 0 评论