vue入门

目录

1.1 什么是vue

2. 库和框架的区别

2.1 库

2.2 框架

2.1为什么要使用vue？

3.mmvm

4. 安装vue

4.1vue操作数据

5.数据绑定事件

6.双向数据绑定

7.vue生命周期函数：

---

1.1 什么是vue

vue官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js

 vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目，总的来说，它是我们做前端的框架。

2. 库和框架的区别

2.1 库

本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者，js中最典型的是jQuery，jquery本质上是封装dom操作，简化dom操作的工具库。但是JQuery提高的是你的工作效率，并不是代码的运行效率

2.2 框架

框架是一套完整的解决方案，使用框架是需要遵循框架的规则，将代码放入框架的合适位置，框架在合适的时候调用代码。代表Vue。一种框架会规定自己的编程方式，侵入性较高。

个人理解：上面我们都说过了，使用库的时候我们比较随意，想用哪取哪，哪块好用哪，而且把它拿过来可以按照我们的编写意愿来用。但是框架就不一样，我们好像被它控制着，要使用它，就得听它的，按照它的规则来，即使它某些地方我们用不到，或者不喜欢，也不能说什么。

2.1为什么要使用vue？

1.体积小 压缩后33k左右，体积小意味着下载速度很快。

2.更高的运行效率 cdm加速：让用户就近访问资源，根据你的ip地址，访问你就近区域的服务器。举个例子，你人在湖南，想要访问京东去gosopping，访问会访问湖南的服务器，不会访问河南的服务器。就近访问服务器原则 。

3.双向数据绑定 让开发者不用再去操作dom对象，把更多精力投入到业务逻辑上来

3.mmvm

实现模型视图双向绑定让数据自动地双向同步

一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

标题	解释
MVVM	M-V-VM
M	Model数据模型，json格式的数据
V	view视图，JSP，HTML（用户看的见的）
VM	ViewModel视图模型，把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来， 还负责把View的修改同步回Model

虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型 学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

jquery与vue操作页面异同

jqeury是javaScript的库，主要是操作节点的

vue是javaScript的框架，主要是操作数据的

4. 安装vue

1. cdn下载（需要网络）

   
   ​
   
   ​
   
   

2. 手动下载

   1. 
   ​
      
   ​
      
   ​
      

   然后必须我们必须要将vue用script引入页面就可以直接操作vue数据了

4.1vue操作数据

 

HTML代码

双花括号叫做插值

需要给vue指定一个内容管理区，这意味着我们接下来的改动必须全部在指定的div内

            
{{dog}},{{ts}}
            
{{6*8+1}}
            
{{1*0?'1':'0'}}
        

vue代码

数据模型data属性既可以是一个json对象也可以是一个函数

5.数据绑定事件

 6.双向数据绑定

模型data与视图改变而改变。

当用户点击按钮button时，就将msg重新赋值

HTML代码

@keyup是键盘点击事件

v-model进行双向数据绑定

        
{{msg}}
          
          点我试试
    

vue代码

效果展示

 7.vue生命周期函数：

名称	作用
beforeCreate	第一个生命周期函数，表示实例完全被创建出来之前，会执行它。 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 属性与方法定义都还没有没初始化
created	第二个生命周期函数，在 created 中，data 和 methods 都已经被初始化好了！ 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
beforeMount	第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
mounted	已经渲染到页面了，用户可以能看的视图了，当执行完 ##mounted 就表示，vue实例已经被完全创建好了
beforeUpdate	这时候，表示 我们的界面还没有被更新
updated	updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
beforeDestroy	销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态
destroyed	当destroy函数执行时，组件中所有的方法与数据已经被完全销毁，不可用
activated	页面出现的时候执行 activated生命周期函数，跟 监听 watch 有类似的作用
deactivated	页面消失的时候执行