目前公司前端在用vue框架,因此总结了一下vue的学习笔记(最好的学习方:官方文档),感兴趣的小伙伴可以一起来学习交流下。
一、vue的介绍
1. 什么是vue.js
在学习一个新的框架时,首先应该知道它是什么,它是用来干嘛的,其次是应该如何使用它,然后可以对比下它跟相似的框架的区别或者说优势在哪。这是我认为比较好的一种学习方式,也更容易帮助我们理解。
- vue.js是一个目前比较流行的前端框架,Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手(连我这个前端小白使用起来都觉得非常爽),还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
2. 为什么要学习流行框架
- vue.js能够大大的提高我们的开发效率。在之前学习的js,jquery,他们都是直接操作Dom元素的,而使用vue可以减少不必要的Dom操作
- 提高渲染效率
- 数据双向绑定的概念,我们只需要使用vue提供的指令,只关注数据的业务逻辑而不需要知道是如何渲染的
二、vue的基本使用
编辑器使用的vscode,个人感觉很好用!
- 首先安装vue.js
- 直接使用script标签引入
<script src="https://cn.vuejs.org/js/vue.js"></script>
- 使用npm方式下载(构建大型项目时比较方便,以后介绍)
- 第一个案例hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--直接引入,这里需要注意的是:在开发中引入开发版本,生产版本删除警告之类的东西-->
<script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
let app = new Vue({
el: '#app', //表示创建vue的时候,vue控制的页面区域
data: {
message: 'hello world vue',
}
})
</script>
</body>
</html>
打开浏览器查看效果:
页面效果:
3. mustache语法(插值语法),就是双大括号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--直接引入,这里需要注意的是:在开发中引入开发版本,生产版本删除警告之类的东西-->
<script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<!--两种拼接方式,效果是一样的-->
{{firstName}}+{{lastName}}
{{firstName+lastName}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
firstName: 'kobe',
lastName: 'bryant'
}
})
</script>
</body>
</html>
- v-once指令:使用了v-once指令,vue只会渲染数据一次,数据改变了也不会再重新渲染
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
}
})
</script>
</body>
</html>
效果:
5. v-html指令:会将数据以HTML的形式解析
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{url}}</h1>
<h1 v-html="url"></h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
url: "<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
</html>
效果:
6. v-cload指令:使用v-cload指定样式,在vue编译完成时,这些样式会从绑定的元素移除;有时候网络较慢,vue还来不及渲染,这是就显示出了源代码,而我们并不想浏览网页的用户看到这种效果。
代码:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script>
let app = new Vue({
el: '#app' ,
data: {
message: '今天天气真好'
}
})
</script>
</body>
</html>
- v-bind指令:v-bind可以动态绑定不同的属性
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-bind指令可以动态绑定不同属性-->
<img v-bind:src="imageUrl">
<a v-bind:href="link">百度一下</a>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
imageUrl: 'https://cn.vuejs.org/images/logo.png' ,
link: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
效果:
这里注意,对象语法和数组语法(数组语法使用较少):
<!--对象语法: 含义就是class后面跟一个对象
<div v-bind:class='{类名1:boolean,类名2:boolean}'>{{message}}</div>
只有当boolean的值为true时,对应的类才会加到标签中
-->
基本使用就这些,接下来继续学习vue的高级使用。