一. 邂逅Vuejs
一. 邂逅Vuejs
1. Vuejs的特点
Vue (读音 /vjuː/，类似于 view)，不要读错。
Vue是一个渐进式的框架：
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
学习Vuejs的前提？
但是你需要具备一定的HTML、CSS、JavaScript基础。
2. 安装Vuejs
方式一：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二：下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
方式三：NPM安装
3. 体验Vuejs
Hello Vuejs
其实在vue.js中会发现创建了一个Vue对象。
function Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
-
所以我们能够在script里面写 new Vue({})，这里可以在括号里面传参数，但是这个参数是一个对象。
-
//let 变量 /const 常量 let name = 'why' name = 'robe' const app = new Vue({ }) -
el:'#app'用于挂载要管理的元素<div id="app">这样vue就可以帮我管理它了。
我们在div里面写一个{{message}}，首先会到vue里面找对应的数据，如果有的话，就将其显示出来。
-
<div id="app"> {{message}} </div> <div> {{message}} </div>这里一个交给了vue实例管理，一个没有交给vue实例管理
谷歌最好清一下缓存，这里刚开始都不显示
-
vue编程：编程范式：声明式编程，只需要声明这里需要写什么就可以，不用关心内部
原始js的做法（命令式编程）
1.创建div元素，设置id属性
2.定义一个变量叫message
3.将message变量放在前面的div元素中显示 -
通过将数据写在data里面，可以实现数据分离。
-
修改数据更加方便
//原始js的做法（命令式编程） //1.创建div元素，设置id属性 //2.定义一个变量叫message //3.将message变量放在前面的div元素中显示 //4.修改message数据：今天天气不错！ //5.将修改后的数据再次替换到div元素 -
来到控制台，修改数据更加方便：输入刚才创建的vue对象，然后
.message就可以获取message的信息，然后还可以重新进行修改数据。
创建Vue对象的时候，传入了一些options：{}
-
{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
-
{}中包含了data属性：该属性中通常会存储一些数据
- 这些数据可以是我们直接定义出来的，比如像上面这样。
- 也可能是来自网络，从服务器加载的。
-
浏览器执行代码的流程：
执行到10~13行代码显然出对应的HTML
执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。
代码是可以做到响应式的，响应式就是根据数据我们的界面会发生改变。
Vue列表显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//1.原始方法
<ul>
<li>{{movies[0]}}</li>
<li>{{movies[1]}}</li>
<li>{{movies[2]}}</li>
<li>{{movies[3]}}</li>
</ul>
//2.
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
movies:['星际穿越','大话西游','少年派','盗梦空间']
}
})
</script>
</body>
</html>
item in movies就是依次把item取出来放到movies里面
这个可以动态的添加显示，比如说我在控制台输入app.movies.push('haha')，这个就会生成一个新的追加到后面4
计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
counter: 0,
},
methods:{
add:function (){
console.log("add被执行了");
// counter++;
// app.counter++;
this.counter++;
},
sub:function (){
console.log("sub被执行了");
this.counter--;
}
}
})
//1.拿到button元素
//2.添加监听事件
</script>
</body>
</html>
v-on这个可以监听事件，因为事件有很多种，所以我们需要说明监听什么事件:click，可以在它们后面写监听
给两个按钮设置事件监听，这时候因为事件比较简单，所以我们可以直接在click后面写counter++，但是如果我们想做更加复杂的事情，我们需要在函数里面写
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
我们如果想在methods的方法里面对counter作加减，不能直接写counter，因为counter是一个全局变量，我们methods方法的是在app的这vue作用域里面，所以不能拿到counter,我们需要用app.counter或者this.counter
下面这两种写法都是正确的：
app.counter++;
this.counter++;
4. MVVM架构
什么是MVVM呢？
Model | ViewModel | View
View层：
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
VueModel层：
- 实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
- 实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
我们在创建Vue实例的时候，传入了一个对象options。
el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
开发当中什么称之为方法？什么称之为函数？
- 方法：method
- 函数：function
5.生命周期
生命周期: 事物从诞生到消亡的整个过程
进入官网，下载源码
https://github.com/vuejs/vue/tree/v2.5.21
注意要点选tag的，因为这个是发行版本比较稳定
vue内部调用了许多函数，给我们一个关键字让我们能够在我们的代码中在某个生命周期执行某些东西。
在进行某几项操作之后就会回调一个函数
