文章目录
- 1.Vuejs安装方式
- 2.Vue.js初体验
- 3.MVVM模型
- 4.对象options
- 5.Vue的生命周期
1.Vuejs安装方式
Vue的安装方式有3种
第一种、下载和引入
1.下载好vue.js框架； 官网中下载
(有开发环境版本和生产环境版本(即未压缩版和压缩版),开发过程中用开发环境版本)
2.下载好后用 <script> </script>标签引入； (类似于引入jQuery)
第二种、CDN引入 (直接引入vue.js框架对应的链接即可； 链接到一个明确的版本号和构建文件)
1. 开发环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.生产环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第三种、NPM安装管理
* 后续通过webpack和CLI的使用，我们使用该方式。
* NPM 能很好地和诸如webpack或Browserify 模块打包器配合使用，
同时Vue也提供配套工具来开发单文件组件。
2.Vue.js初体验
<script src="js/vue.js"></script>
//引入之后就可以在<script>中写Vue相关代码了
<div id="app">{{message}}</div> //显示数据，放在{{ }}中；
<script>
const app=new Vue({
el:"#app", //用于挂载要管理的元素；
data:{ //用于定义数据
message:"你好啊！"
}
})
</script>
//第一个Vue程序，体验一下Vue的响应式
//代码做了什么事情？
// (1).创建了一个Vue对象,并在里面传入了一个对象{}
// (2).{}中的el属性：该属性决定了该Vue对象挂载哪个元素，
// 我们这里是挂载到了id为app的元素上。
// 挂载哪个元素，就用vue实例中的内容操作哪个元素。
// (3).{}中的data属性：该属性中通常会存储一些数据。
// 这些数据可以是我们直接定义出来的，也可以来自网络，从服务器加载的；
// Vue中一般不用var，用let(变量)、const(常量,如接收该构造函)
// 响应式：可以实现数据的实时更新；
上面代码的实现过程： (这种编程范式是：声明式编程)
1.挂载元素后，就会去解析这个元素，然后解析到某个变量message；
2.看Vue实例在data中有没有定义这个变量，如果定义了就会把该变量的值在元素中显示。
即：先根据el，找元素---》解析元素内容---》对照data；
声明式编程好处：做到数据与界面完全分离
如果是元素js中的做法： (这种编程范式是：命令式编程)
1.创建div元素，并设置id属性
2.定义变量message
3.将message变量放在div元素中显示
//计数器
<script src="js/vue.js"></script>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
//点击执行对应点的方法
//<button v-on:click="counter++">+</button>
//<button v-on:click="counter--">-</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
counter:0
},
methods:{ //定义管理元素要使用的方法
add:function () {
this.counter++ //this，表示当前对象中的counter变量
},
sub:function () {
this.counter--
}
}
})
//响应式：直接修改data内容，响应到显示的内容；
</script>
3.MVVM模型
MVVM (Model View View Model)
：解决数据和页面显示的问题而出现前端的MVVM框架，
是一种模块化开发代码分层的思想或者框架。
MVVM 的优点：
1.主要目的是分离视图（View）和模型（Model）
2.降低代码耦合，提高视图或者逻辑的重用性。
3.提高了模块的可测试性
我们直接来看Vue的MVVM (Model View View Model)
(1).View层：
*视图层
*在我们前端开发中，通常就是DOM层。
*主要的作用是给用户展示各种信息。
(2).Model层：
*数据层 (data)
*数据可能是我们固定的死数据，更多是来自我们服务器，从网络上请求下来的数据。
*在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。。
(3).VueModel层：
*视图模型层
*视图模型层是View和Model沟通的桥梁。
*一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，
可以监听到，并在需要的情况下改变对应的Data。
即：1.数据绑定：view上面显示的永远是Model上最新数据，是因为VueModel帮我们实现了；
2.DOM监听：监听事件，并在需要的情况下改变对应的Data。
1. Vue初体验-计数器 这个案例中的MVVM：
View：是展示给用户的部分，
所以是<div id="app"> </div>这部分的内容;
Model：是我们的数据，
所以是app中data的内容；
VueModel：将Model展示到View，
所以是创建的Vue对象实例,new Vue();
2. 我们的计数器中就有严格的MVVM思想:
View依然是我们的DOM
Model就是我们我们抽离出来的obj
ViewModel就是我们创建的Vue对象实例
3.它们之间如何工作呢？
首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，改变obj中的数据。
4.对象options
我们在创建Vue实例的时候，传入了一个对象options。
这个options 可以包含很多的选项，如：
1.el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
2.data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
3.methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
5.Vue的生命周期
Vue生命周期
:从诞生到消亡的整个过程；
:创建一个new Vue()，它的源码里面会做一系列的事情。这一系列的事情就是它的生命周期。
(1).每个 Vue 实例在被创建时，源码中都要经过一系列的初始化过程。
例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
(对el的处理，对data的处理、对method的处理、更新DOM...)
(2).同时在这个过程中也会自调用一些叫做生命周期钩子的函数，
这给了用户在不同阶段添加自己的代码的机会; (执行自己想执行的内容)
比如created 钩子可以用来在一个实例被创建之后执行代码，
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。
