vue学习笔记1——vue相关概念、相关操作
一、相关概念
Vue是最火的一个框架，React是最流行的一个框架（React可以开发网站和手机app；Vue也是可以进行PC和APP端开发）
Vue、Angular、React并称为前端三大框架，Vue只关注视图层，并且便于和第三方库进行整合。
1，为什么要用框架？
就是为了提升开发效率，时间就是金钱。
提升开发效率的发展历程：原生JS（兼容性问题）——>JQuery（解决兼容性问题，生成dom元素的拼接问题）——>前端模板引擎（解决dom生成问题）——>vue、react、angular（解决dom过多渲染问题，提高渲染效率；双向dom绑定；解决程序员不用关心dom元素，专心于业务逻辑）
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑
2，框架和库的区别
框架是一套完整的解决方法；对项目的侵入性较大，如果需要换框架，则需要重新架构整个项目。
库（插件）：提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
3，后端的MVC与前端的MVVM
MVC是后端的分层开发概念
MVVM是前端视图层的概念，视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
二、相关操作
1，如何使用vue
（1）导入vue包
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
（2）创建vue实例，我们new出来的vue就是vm
对其中几个地方进行说明：
- el表示我们new出来的vue对象控制的是页面上的哪个区域；
- data中存放的是el要用到的数据；
- 通过vue提供的指令就能很方便的将数据渲染到页面上，前端vue框架不提倡我们手动去操作dom
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000",
message:'zhubr is a genius',
class1: false
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
});
（3）在页面中使用vue
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>message : {{message}}</h1>
<h1>{{details()}}</h1>
</div>
可以看出，页面中是不用调用dom，可以直接指定相关dom进行操作。以上内容，分别对应mvvm三个部分：<div id="vue_det">对应v部分，new Vue()则对应vm部分，在vue中的data则对应m。
2，解决时延显示问题
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>message : {{message}}</h1>
<h1>{{details()}}</h1>
</div>
如果引入js在代码之后，可能在渲染之前显示出site : {{site}}之类的内容，可以做如下修改，加入一个样式：
<style>
[v-cloak] {
display:none;
}
</style>
在修改div：
<div id="vue_det" v-cloak>
另外，默认v-text也没有闪烁问题
<h4 v-text="message"></h4>
3，v-text、v-html
data中数据存在如下数据：
message:'zhubr is a genius',
v-text使用：
<h4 v-text="message"></h4>
如果data中的数据是html标签：
msg2:'<h1>我是一个h1</h1>'
输出时想要输出成html标签，则需要用到如下语法：
<div v-html="msg2"></div>
4，v-bind
v-bind提供了绑定属性的功能:
data中存在：
mytitle:'这是我定义的一个按钮'
按钮：
<input type="button" name="button" value="button" v-bind:title="mytitle">
这样就可以把button的title属性变更为mytitle中的内容了。
v-bind会将""内的内容当作表达式来执行。
注意：
也可以这么写：
<input type="button" name="button" value="button" v-bind:title="mytitle + '123'">
则title属性为：这是我定义的一个按钮123
v-bind里可以定义合法的表达式
v-bind的缩写是 :
5，v-on 绑定事件
以button为例：
<input type="button" name="button" value="button" v-bind:title="mytitle + '123'" v-on:click="show">
v-on:click="show"表示，在单击按钮时，调用show方法：
在new Vue({})中添加method：
methods: {
show:function() {
alert('click');
}
}
这样就能实现单击按钮后显示 click。
当然v-on也可以绑定其他时间，比如 v-on:mouseover 之类
v-on的简写是 @
所以这段话：
<input type="button" name="button" value="button" v-bind:title="mytitle + '123'" v-on:click="show">
可以改成：
<input type="button" name="button" value="button" :title="mytitle + '123'" @click="show">
6，事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.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> -->
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->
<!-- 演示： .stop 和 .self 的区别 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> -->
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> -->
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
</script>
</body>
</html>