Vue学习笔记（1）：基本指令

发表于 更新于 分类于 阅读次数：

vue 指令的说明和用法

数据&方法

实例化 Vue 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Vue({
  el: '#app',
  data: {
    name: 'Wyatex',
    job: '程序员',
  },
  methods: {
    world: () => console.log('The World!'),
    add: (x, y) => x + y,
    myJob: function () {
      return this.job
    },
  },
})

el: element 需要获取的元素，一定是 html 中的根容器元素
data: 用于数据的存储
methods: 用于存放方法

在 html 中：

1
2
3
4
5
6
7
8
9
<body>
  <div id="app">
    <h1>My name is {{name}}</h1>
    {{world()}}
    <p>{{add(1,2)}}</p>
    <p>my job is {{myJob()}}</p>
  </div>
  <script src="xx.js"></script>
</body>

v-text

和上面的{{xxx}}用法差不多

1
2
3
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

属性绑定 v-bind

在 vue 实例化里的 data 里添加：url: "http://baidu.com"
在 html 的 app 容器里添加<a v-bind:href="url">百度</a>
这样就可以把 data 里的数据绑定到 html 里

html 标签绑定

在 data 里存放标签：tag: "<a href="http://baidu.com">百度</a>"
然后在 html 里用另一个标签然后使用 v-html 绑定：<div v-html="tag"></div>

官方提示：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

事件

重新开始初始化 vue 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Vue({
  el: '#app',
  data: {
    age: '21',
  },
  methods: {
    sub: function (a) {
      this.age -= a
    },
    addTen: function () {
      this.age -= 10
    },
  },
})
1
2
3
4
5
6
7
<div id="app">
  <h1>My age is {{age}}</h1>
  <button v-on:click="age++">涨一岁</button>
  <button v-on:click="ageTen">涨十岁</button>
  <button v-on:click="sub(1)">减一岁</button>
  <button v-on:dblclick="sub(10)">双击减十岁</button>
</div>

在 v-on 中调用的方法可以不用加括号，但是在数据绑定就必须要使用括号才能正确调用方法

还有一些其他的事件

1
2
3
<div id="app">
  <div id="block" v-on:mousemove="getXY">{{x}},{{y}}</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
  el: '#app',
  data: {
    x: 0,
    y: 0,
  },
  methods: {
    getXY: function (e) {
      this.x = e.offsetX
      this.y = e.offsetY
    },
  },
})

v-on 可以简写成@，比如@click、@mousemove

事件修饰符

停止事件的一种方法：

1
2
3
4
5
<div id="app">
  <div id="block" v-on:mousemove="getXY">
    {{x}},{{y}} - <span @mousemove="stopUpdate">Stop Updata</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
  el: '#app',
  data: {
    x: 0,
    y: 0,
  },
  methods: {
    getXY: function (e) {
      this.x = e.offsetX
      this.y = e.offsetY
    },
    stopUpdate: (e) => {
      e.stopPropagation()
    },
  },
})

但是可以用更方便的 stop 修饰符：

1
2
3
4
5
<div id="app">
  <div id="block" v-on:mousemove="getXY">
    {{x}},{{y}} - <span @mousemove.stop="">Stop Updata</span>
  </div>
</div>

还有比如 once 修饰符，也就是调用的方法只能调用一次，第二次以后的方法都不会再调用方法

官方介绍：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

prevent 可以阻止默认事件，比如可以在 a 标签中使用v-on:click.prevent=""可以阻止跳转

2.3.0 新增：
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

1
2
3
4
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

键盘事件和修饰符

键盘事件

keyup：在松开键盘时会调用方法

1
<input v-on:keyup="inputting" />

这样每次输入一个字符或者按下其他键时会调用 inputting 方法

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

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

当然还有 keydown，就是按下键盘时触发
keypress 就是按住时不断触发

键盘修饰符

vue 支持的一些修饰符：

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

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

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

2.1.0 新增

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

  • .ctrl
  • .alt
  • .shift
  • .meta
1
2
3
4
5
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear" />

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

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

双向数据绑定

ref

通过 ref 属性可以将标签绑定到 vm.$refs 里

1
2
3
<label>姓名：</label>
<input ref="name" type="text" v-on:keyup="print" />
<p>My name is {{name}}</p>
1
2
3
4
// ...
print: function() {
    this.name = this.$refs.name.value
}

v-model

也可以去掉 v-on 使用 v-model 来进行绑定

1
2
<input v-model="name" type="text" />
<p>My name is {{name}}</p>

动态绑定 css 样式 v-bind

绑定 css 的方法是v-bind:class="xxx:true/false"
比如

1
<div v-bind:class="{red:true, blue:false}"></div>

那么这样整个 div 就会绑定到 red 类
如果需要动态的话就可以绑定一些方法：

1
<div v-bind:class="{red:changeColor}" v-on="changeColor = !changeColor"></div>

假如 div 默认蓝色，也就是 changeColor 默认是 false，点击后 div 后 div 就能加上 red 的类。

v-if

官方介绍：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是