1. v-bind和v-model理解
1.1 v-bind
v-bind代表元素的某个属性交给vue处理，实现元素属性和vue的绑定，v-bind="表达式"，引号里面的本质是表达式。但是这种绑定是单向的。比如下面的代码，当你在网页中修改input中值的时候，上面的message内容不会随着修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div>
<input type="text" v-bind:value="message"/>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"Welcome to Vue"
}
});
</script>
</body>
</html>如果想实现双向绑定，还需要向下方一样为标签添加v-on指令，这样在修改input里面内容的时候，上面message的内容也会相应的修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div>
<input type="text" v-on:input="message = $event.target.value" v-bind:value="message"/>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"Welcome to Vue"
}
});
</script>
</body>
</html>1.2 v-model
v-model实际上是v-bind:和v-on:的语法糖，实现了简易的元素属性双向绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div>
<input type="text" v-model="message"/>
<!--上方代码等同于下方代码
<input type="text" v-on:input="message = $event.target.value" v-bind:value="message"/>
-->
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"Welcome to Vue"
}
});
</script>
</body>
</html>2. v-on:click 事件调用函数的问题。
2.1 方法一：直接调用函数名
<button v-on:click="change">改变一下</button>这种情况下，函数被调用时，自动传递$event参数。
2.2 方法二：调用函数名()
这种情况下，函数被调用时，不会自动传递$event参数，如果需要，则必须人工指定为函数名($event)。也就是说下面的代码等同于上面的代码：
<button v-on:click="change($event)">改变一下</button>3. v-if和v-show的区别。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-if="isShowButton">使用v-if判断</button>
<button type="button" v-show="isShowButton">使用v-show判断</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
isShowButton:false
}
});
</script>
</body>
</html>运行结果如下：
- 对于v-if，如果=后面的表达式是false，则整个标签不会显示。
- 对于v-show，如果=后面的表达式是false，则会以
display:none的形式隐藏标签。
4. v-for对数组和对象的使用方法。
4.1 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" cellpadding="0">
<tr><th>姓名</th><th>性别</th><th>分数</th></tr>
<tr v-for="student,arrayIndex in students">
<td v-for="value,key,objectIndex in student">{{arrayIndex}} - {{objectIndex}} - {{key}} - {{value}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
students:[
{name:"张三",gender:"男",score:"100"},
{name:"李四",gender:"女",score:"88"},
{name:"王五",gender:"男",score:"99"}
]
}
});
</script>
</body>
</html>运行结果如下：
4.2 对于数组
<tr v-for="student,arrayIndex in students">
</tr>遍历students数组的每一个元素。
4.3 对于对象
<td v-for="value,key,objectIndex in student">{{arrayIndex}} - {{objectIndex}} - {{key}} - {{value}}</td>遍历student对象的每一个属性。
5. Vue-cli 3.0 的使用
5.0 理解Vue-cli的关键点
vue-cli是将Node.js和webpack封装进了vue-cli内部。
5.1 安装Vue-cli 3.0
cnpm install -g @vue/cli需要注意的是，如果之前安装过Vue-cli的2.X版本，需要先卸载之前的版本再安装。卸载方法在安装Vue-cli 3.0的时候有提示，这里不赘述。
5.2 创建项目
安装完Vue-cli 3.0工具后，我们在命令行里面就可以直接使用vue命令了，下面的命令用于创建一个Vue.js的项目框架：
vue create 项目名这里面有几个注意点：
vue create 项目名命令只对Vue-cli 3.0及以后版本有效，2.X版本无法使用vue create命令- 运行这个命令后，会自动在cmd当前目录下创建【项目名】文件夹，然后在里面生成Vue.js的项目框架。
- 这里要特别解释下“脚手架”这个词。初次学Vue.js的时候，对“脚手架”工具特别不理解，不明白啥叫脚手架。说白了，“脚手架”就是辅助工具。Vue-cli的作用就是辅助进行大型的Vue.js项目开发。如果只是在项目中一般性的使用Vue.js，在网页中使用script引入Vue.js文件就够了，不是必须使用Vue-cli脚手架工具。
- 项目创建好后，项目的目录结构如下：
从上面的截图能看出来，其实vue create命令创建的是个node.js项目。其目的和原因也很简单：通过Node.js模拟服务器运行及热更新环境，这样可以让开发过程更加简单、高效。所以，如果要使用Vue-cli工具，前提是机器中必须提前安装了Node.js（如果不使用Vue-cli工具而是只用Vue.js，可以没有Node.js环境）。
5.3 构建项目
既然vue create项目创建的是Node.js项目，那么当时用npm run命令的时候，就可以直接调用package.json里面<script>标签下的三个命令。
5.1.1 serve命令：开发环境构建
npm run serve这一步最主要的操作是通过Node.js启动一个Web服务器，这样可以直接在本地模拟服务器环境。
5.1.2 build命令：生产环境构建
npm run build运行这个命令后，会在项目根目录生成一个【dist】文件夹，这里面的文件是经过编译、打包、压缩后，最终用于部署到服务器上的代码。
实际上，这个操作是webpack做的，vue-cli只是把webpack封装进去了。。
5.1.3 lint命令：代码检查工具
npm run lint6 vue-router路由库使用
6.1 关于SPA
vue-router路由一般使用在SPA（Single Page Application）单页面程序上。SPA的简单的来说就是无论程序有多复杂，所有程序代码都写在一个页面上。
当然，在开发阶段，SPA项目开始分模块开发的，开发完毕后会通过构建工具将各类模块组成一个单页面程序。
SPA的有点有很多，比如：一次加载后，页面无需再跳转和下载新内容，页面速度快；再比如：有效降低网页被复制和爬取的风险。缺点也很明显，搜索引擎索引起来不是很好。不过SPA程序一开始就不是为搜索引擎而设计的。
6.2 vue-router
vue-router是vue.js的官方路由工具。第三方路由如Page.js、Director也很好用，与vue.js的集成也比较容易。
6.3 vue-router的安装
cnpm install vue-router --save或者直接下载vue-router.js导入到项目中。
6.4 vue-router的使用
6.4.1 HTML代码
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>6.4.2 Javascript代码
// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！当然，上面代码也可以稍微简化一下：
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const router = new VueRouter({
routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
const app = new Vue({
router
}).$mount('#app')
