vue基础(一)

302 阅读5分钟

vue指令

v-text和v-html  相比于innerHTML 和innerText 

都是想dom里面插入文本,若不赋值就是获取节点的值。

区别,v-html可以带标签可以渲染出来,但v-text不行。

v-bind 简写: 单向传递 支持很多。

v-model 双向数据绑定 只支持表单元素

v-on 绑定事件 简写@

事件修饰符 

@click.stop="del(tiem.id)"  支持链式操作

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身(比如不是子元素)触发时触发回调

.once 事件只触发一次。

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

通过Vue.config.keyCodes.名称 = 按键值来自定义按键修饰符的别名。

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

.ctrl  .alt  .shift  .meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

鼠标按钮修饰符  2.2.0 新增

.left    .right   .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 即使 Alt+ctrl 或 Shift+ctrl 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

vue中的样式

:class="[]" {}

内联样式::style="{color:'red'}"

绑定样式

123

v-for 和 key

这是第{{ i }}个p标签 key不写会有黄色警告。

v-for=“item in items”

前面是自定义的用来点attitude items是数组 不点直接{{item}}只把键值对中的值全部循环出来

 在 v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。

(item, index) in items  index是索引
 items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]

你也可以用 v-for 来遍历一个对象的 property。

v-for="(value, name, index) in object"
object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

 在