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 项目名

这里面有几个注意点:

  1. vue create 项目名命令只对Vue-cli 3.0及以后版本有效,2.X版本无法使用vue create命令
  2. 运行这个命令后,会自动在cmd当前目录下创建【项目名】文件夹,然后在里面生成Vue.js的项目框架。
  3. 这里要特别解释下“脚手架”这个词。初次学Vue.js的时候,对“脚手架”工具特别不理解,不明白啥叫脚手架。说白了,“脚手架”就是辅助工具。Vue-cli的作用就是辅助进行大型的Vue.js项目开发。如果只是在项目中一般性的使用Vue.js,在网页中使用script引入Vue.js文件就够了,不是必须使用Vue-cli脚手架工具。
  4. 项目创建好后,项目的目录结构如下:
    file
    从上面的截图能看出来,其实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')

发表评论

电子邮件地址不会被公开。 必填项已用*标注