Vue.js随学随记 – 月光门

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>

运行结果如下：
file

对于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>

运行结果如下：
file

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 lint

6 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')