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