vue学习笔记（一）

1.vue是一种渐进式JavaScript框架。

2.引用vue
第一种方法：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
第二种方法：<script src="https://cdn.jsdelivr.net/npm/vue"></script>

指令

样式绑定
1.v-bind：class
设置一个对象，动态切换class

<div v-bind:class="{active:isActive}"></div>

如果需切换多个class，代码如下

<div class="static"
v-bind:class="{active:isActive,'text-danger':hasError}"></div>

数组语法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

2.v-bind:style
设置

v-bind指令
1.v-bind:class=“{‘data1’：data1}”
class发生变化

2.v-bind:title=“….”
鼠标移动到对象上时显示title

3.v-bind:style=”……”
style属性发生变化

总结： v-bind后面加属性，style，title，value等等。属性值从Vue中获取

v-html指令

v-model指令
（1）在表单控件上实现数据双向绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>

  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>
</body>
</html>

（2）在复选框中有多个元素，数据绑定在同一个数组。
（3）单选框：v-model中获取的值是value值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    picked : ''
  }
})
</script>
</body>
</html>

（4）修饰符：
- .lazy同步数据在change事件中
- .number
- .trim自动过滤用户输入的首尾空格

v-on事件处理
1.支持的事件：click，mouseover，mouseleave等。
2.事件修饰符：.stop .prevent .capture .self .once等
例如：

<!--阻止单击事件冒泡-->
<a v-on:click.stop="doThis"></a>
<!--提交事件不再重载页面-->
<form v-on:submit.pevent="onSubmit"></form>
<!--修饰符可以串联-->
<a v-on:click.stop.prevent="doThat"></a>
<!--只有修饰符-->
<form v-on:submit.prevent></a>
<!--事件捕获模式-->
<div v-on:click.capture="doThis"></div>
<!--事件在本身触发时触发回调-->
<div v-on:click.self="doThat"></div>
<!--只执行一次-->
<div v-on:click.once="doThis"></div>

3.按键修饰符：.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta

<!--按键事件-->
<input v-on:keyup.enter="submit">
<!--缩写方法-->
<input @keyup.enter="submit"

vue学习笔记（一）

指令

猜你喜欢