本文是Vue.js的基础教程，介绍了Vue.js是什么，为何学习它，以及框架和库的区别。深入讲解了Vue.js的核心概念，包括MVVM模式、代码结构、插值表达式、v-bind、v-on、事件修饰符、v-model和数据双向绑定，以及样式和循环的使用。通过实例演示，帮助读者快速掌握Vue.js开发。
什么是vue.js
- Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
2. 为什么学习流行框架
- 企业为了提高开发效率：在企业4E2D，时间就是效率，效率就是金钱；
- 企业中，使用框架，能够提高开发的效率；
- 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js
- 能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】
- 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
3. 框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
- 例如：node中的express
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
- 例如：从Jquery 切换到 Zepto
- 例如：从EJS切换到 art-template
4. MVC与MVVM的区别
- MVC 是后端的分层开发概念;
- MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;
5. Vue.js的代码结构
- 引入vue.js
- 写视图层，我们要展示的内容
- 实例化Vue()
- data：存放数据
- el：这个控制是哪块视图
- methods：放我们的方法
示例：
<!-- 视图层 -->
<div id="app">
<!-- 插值表达式，可以读取我们的变量 -->
{ { message }}
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!'
},
methods:{
}
})
</script>
注意：都是通过this对象去拿的，通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。
6. 插值表达式、v-cloak、v-text、v-html
- 如何获取变量值呢？
- 插值表达式{ {}}，可以在前后插入一些内容
- v-text：会替换掉元素里的内容
- v-html：可以渲染html界面
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-clock防止界面闪烁</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<!-- 在我们vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：界面防止闪烁 -->
<p v-cloak>
-----------{ { message }}---------------
</p>
<!-- 使用v-text给界面元素赋值 -->
<!-- 如果我们想在变量之前或者后面加一些内容的话使用插值表达式 -->
<!-- 如果我们想直接覆盖元素内容的话使用v-text指令 -->
<p v-text='message'>------------------------</p>
<p v-text='html'>------------------------</p>
<!-- 通过v-html指令把字符串解析成html的内容 -->
<p v-html = 'html'>1111</p>
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
html:'<h1>这是一个很大的标题</h1>'
}
})
</script>
</body>
</html>
7. v-bind
- 界面元素属性值的绑定
- 括号里不加引号的都是我们data里的数据读取
- 如果想使用字符串需要加上引号
- 里面可以写表达式
- 里面也可以调用定义好的方法，拿到的是方法的返回值
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind这指令用于属性的绑定</title>
最低0.47元/天 解锁文章
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
