什么是Vue.js
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
为什么要学习流行框架
1, 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱； 企业中，使用框架，能够提高开发的效率；
2, 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
3, 增强自己就业时候的竞争力; 人无我有，人有我优; 你平时不忙的时候，都在干嘛？
框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
- node 中的 express；
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
- 从Jquery 切换到 Zepto
- 从 EJS 切换到 art-template
Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别
- MVC 是后端的分层开发概念；
- MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
- 为什么有了MVC还要有MVVM
Vue 基本代码和MVVM之间对应
<!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>Document</title>
<!-- 导入Vue包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- Vue 实例所控制的元素区域, 就是MVVM中的V view-->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2. 创建Vue实例
// 当我们导入包之后, 在浏览的内存中就存在一个 Vue 的构造函数
// 注意: 我们new出来的vm对象, 就是对应MVVM中的VM 调度者 ViewModel
var vm = new Vue({
el: '#app', // 表示, 当我们new 的这个 Vue实例, 要控制页面上的那个区域
// 这里的data 就是MVVM中的M 专门用来保存每个页面的数据 Model
data: { // data 属性中, 存放的是 el中要用到的数据
msg: '欢迎学习Vue' // 通过Vue提供的指令, 很方便的就能把数据渲染到页面上, 不再手动操作DOM 【类似于Vue的框架, 不提倡去手动操作DOM元素】
}
});
</script>
</body>
</html>
v-cloak, v-text, v-html 的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[v-cloak] {
display: none;
}
</style>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak>==={{ msg }}</p>
<p v-text="msg">===</p>
<!-- 默认 v-text 是没有闪烁问题的 -->
<!-- v-text 会覆盖元素中原本的内容, 但是插值表达式 只会替换自己的这个占位符 -->
<div v-html="msg2"></div> <!-- v-html 用来渲染html的内容 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>我是一个标题</h1>'
}
});
</script>
</body>
</html>
v-bind: 绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- v-bind: 是Vue中, 提供用于绑定属性的指令 可以被简写为 :-->
<!-- v-bind: 中, 可以写合法的JS表达式 -->
<input type="button" value="button" v-bind:title="mytitle">
<input type="button" value="button" :title="mytitle + 123">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mytitle: '这是自己定义的title'
}
});
</script>
</body>
</html>
v-on:事件名 绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- Vue 中提供了 v-on: 事件绑定机制 缩写 @-->
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @click="show">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: { // 这个methods属性中定义了当前Vue实例中可用的方法
show: function () {
alert('Hello');
}
}
});
</script>
</body>
</html>
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .captrue 添加事件侦听器使用事件捕获模式
- .self 只当事件在该元素本身(比如不是子元素)时触发回调
- .once 事件只触发一次
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .prevent 阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent=linkClick>百度</a> -->
<!-- 使用.captrue 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .self 只有点击当前元素的时候才会触发事件处理函数 -->
<!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用.once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once=linkClick>百度</a> -->
<!-- 演示 self 和 stop 的区别 -->
<div class="outer" @click="outer">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- self 只会阻止自己身上冒泡行为的触发, 并不会真正的阻止冒泡行为 -->
<div class="outer" @click="outer">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('触发了 inner div 的点击事件');
},
btnHandler() {
console.log('触发了 input 的点击事件');
},
linkClick() {
console.log('触发了 a 的点击事件');
},
outer() {
console.log('触发了 outer 的点击事件');
}
}
});
</script>
</body>
</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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="浪起来" v-on:click="lang">
<input type="button" value="低调" v-on:click="stop">
<h4>{{msg}}</h4>
</div>
<script>
// 在vm实例中 如果想要获取data上的数据或者想要调用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问, 这里的this就表示new出来的 vm对象
var vm = new Vue({
el: '#app',
data: {
msg: "猥琐发育, 别浪~~",
interval: null
},
methods: {
lang() {
if (this.interval) return;
this.interval = setInterval(() => {
var start = this.msg.substring(0, 1);
var end = this.msg.substring(1);
// 重新拼接得到新的字符串 并赋值给this.msg
this.msg = end + start;
}, 400);
// 注意: vm实例会监听自己身上data中所有数据的改变, 只要数据一发生变化就会自动把最新的数据, 从data上同步到页面中去 好处: 只需要关心数据, 不要关心如何重新渲染DOM
},
stop() {
clearInterval(this.interval);
this.interval = null;
}
}
});
</script>
</body>
</html>