vue学习笔记（一）
1.vue是一种渐进式JavaScript框架。
2.引用vue
第一种方法：
第二种方法：
指令
样式绑定
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>数组语法
<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）在表单控件上实现数据双向绑定
<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值
<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">Runooblabel>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Googlelabel>
<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"