一、 .vue
1..vue中data（）{return{}；}必须以返回值的形式给出
2.属性绑定(绑定返回值/data/methods:的返回值)
：width/rowspan/style="返回值"
3. class类绑定(绑定css)
：class="css"
4.主键绑定
：key
二、var与let
1.通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
//计数器i只在for循环体内有效，在循环体外引用就会报错
2.变量提升现象：浏览器在运行代码之前会进行预解析，首先解析函数声明，定义变量，解析完之后再对函数、变量进行运行、赋值等。 不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部。 var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量在作用域的顶部未被初始化
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
//相当于
var foo; //声明且初始化为undefined
console.log(foo);
foo=2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
//相当于在第一行先声明bar但没有初始化，直到赋值时才初始化
但是直接用let声明变量不赋值是会打印undefined，还是初始化了
let a;
alert(a);//值为undefined
alert b;//会报错
let b;
3.只要块级作用域内存在let命令，它所声明的变量就"绑定"这个区域，不再受外部的影响。而且，在代码块内，使用let命令声明变量之前，该变量都是不可用的，尽管代码块外也存在相同全局变量。
示例一：
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
示例二：
var tmp = 123;
if (true) {
//tmp = 'abc';
let tmp;
}
alert（tmp）; //输出值为123，全局tmp与局部tmp不影响（假设前面没有非法使用、没有抛错的情况下）
4. let不允许在相同作用域内，重复声明同一个变量。
// 报错
function () {
let a = 10;
var a = 1;
}
// 报错
function () {
let a = 10;
let a = 1;
}
三、json书写格式
1.数组方式 [ ]
[{
"id" : 1 ,
"name" : "xiaoming"
},{
"id" : 2 ,
"name" : "xiaohong"
}]
2.对象方式 { }
//前后端分离，推荐后端返回给前端数据格式
{
"status" : 0 , //执行状态码
"msg" : "SUCCESS", //说明文字信息，没有为NULL
"data" :[{ //对象中嵌套数组，数组是返回的数据，
"id" : 1 ,
"name" : "xiaohong"
},{
"id" : 2,
"name" : "xiaoming"
}]
}
MVVM
VM：即viewmodel,中间交互
不能与后端ModelAndView混淆
class与：class
注意：根据value渲染成key
另外：class也可以指定对象
<template>
<div class="loginContainer">
<div class="loginInner">
<div class="login_header">
<div class="login_logo">荔枝外卖</div>
<div class="login_header_title">
<a href="javascript:;" :class="{on:loginWay}" @click="loginWay=true">短信登录</a>
<a href="javascript:;" :class="{on: !loginWay}" @click="loginWay=false">密码登录</a>
</div>
</div>
<!-- 内容部分 -->
<div class="login_content">
<form @submit.prevent="login">
<!-- 短信登录 -->
<div :class="{on: loginWay}">
<section class="login_message">
<input type="tel" maxlength="11" placeholder="手机号" v-model="phone" />
<button
:disabled="!rightPhone"
class="get_verification"
:class="{right_phone:rightPhone}"
@click.prevent="getCode"
>{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</button>
</section>
<section class="login_verification">
<input type="tel" maxlength="8" placeholder="验证码" v-model="code" />
</section>
<section class="login_hint">
温馨提示：未注册荔枝外卖帐号的手机号，登录时将自动注册，且代表已同意
<a href="javascript:;">《用户服务协议》</a>
</section>
</div>
点native
描述
有时发现用一些第三方的组件库时，例如一个封装好的button按钮<el-butten>，绑定点击事件却没有任何作用，这时便需要加 .native
原因：
v-on 是对 Vue 的事件体系封装后的 API 接口，官方文档中指出Vue 使用的是一套自己的事件传递机制，如 @click 等事件是经过 Vue 封装的。所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。
解决
而.native就是给组件绑定原生事件采用的方法
v-bind
将按钮的title绑定为data里指定的值
<input type="button" value="按钮" v-bind:title="mytitle">
<input type="button" value="按钮" v-on:click="show">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:'shanben',
msg2:'<p>使用v-html转意成html</p>',
mytitle:'这是个自定义的title'
},
methods:{
show:function(){
alert('Hello')
}
}
});
</script>
</body>
</html>