vue日常必背
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
{{ message }}
div>
body>
<script src="js/vue.js">script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
script>
html> v-model 指令在表单元素上创建双向数据绑定。将message绑定到文本框，当更改文本框的值时，{{ message }}中的内容也会被更新。
<div id="app">
<p>{{ message }}p>
<input type="text" v-model="message"/>
div> v-if 是条件渲染指令，它根据表达式的真假来删除和插入元素，v-if="expression"
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
if="yes">Yes
v-show 也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
show="no">no
no:false 输出 "display:none">nov-else 指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。v-for 指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
v-for="item in items"
items是一个数组，item是当前被遍历的数组元素。
<tr v-for="person in people">
<td>{{ person.name }}td>
<td>{{ person.age }}td>
<td>{{ person.sex }}td>
tr>
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}]
}v-bind 指令可以缩写为一个冒号
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}a>
v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}a>v-bind:class 来动态地切换 class
上述语法意味着，active 这个 class 的存在与否，取决于 isActive 这个 data 属性的 truthy 值
v-bind:class 传入一个数组，来与 class 列表对应
<div v-bind:class="[activeClass, errorClass]">div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
会被渲染为：<div class="active text-danger">div>
v-bind:style 的对象语法是非常简单直接的 - 看起来非常像 CSS，其实它是一个 JavaScript 对象。
CSS 属性名称可以使用驼峰式(camelCase)或串联式(kebab-case)（使用串联式需要加引号）
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject">div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
} 所以 Vue 为如下所述的情况提供了一种方式：“这两个元素是完全独立的 - 请不要复用它们”。那就是为它们添加一个具有不同值的 key 属性
<template v-if="loginType === 'username'">
<label>用户名label>
<input placeholder="请输入用户名" key="username-input">
template>
<template v-else>
<label>邮箱label>
<input placeholder="请输入邮箱" key="email-input">
template>
<label> 元素仍然被有效地复用，因为它们没有 key 属性。
v-on指令可以缩写为@符号
<button @click="deletePerson($index)">Deletebutton>
v-on 指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">
有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。
Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。
<button v-on:click="greet">Greetbutton>
<button v-on:click="say('Hi')">Hibutton>
// 在 `methods` 对象中定义方法
methods: {
greet: function() {
// // 方法内 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}