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入门_第1张图片

 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操作数据

vue入门_第2张图片 

HTML代码

双花括号叫做插值

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

{{dog}},{{ts}}

{{6*8+1}}

{{1*0?'1':'0'}}

vue代码

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

 

5.数据绑定事件

vue入门_第3张图片

 6.双向数据绑定

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

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

HTML代码

@keyup是键盘点击事件

v-model进行双向数据绑定

{{msg}}

   

vue代码

效果展示

vue入门_第4张图片

 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 页面消失的时候执行

你可能感兴趣的