（简述vue语法和原理）day40javaEE基础查漏补缺

最新推荐文章于 2024-02-15 18:05:10 发布

休哥哥来啦

最新推荐文章于 2024-02-15 18:05:10 发布

阅读量958

点赞数

分类专栏： javaEE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44310276/article/details/122526124

版权

javaEE 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

简述vue语法和原理

1.MVVM概念：
2.vm绑定是咋实现的？？？
3.vue特性
4.在浏览器（F12）consle中输入，vue对象名.username获取username的值
5.双向绑定：v-model
6.属性绑定：bind:src=“data中的变量名”
7.复习一下相对路径:
8.一个js标签中，可以new好几个Vue嘛
9.列表循环：v-for
10.条件判断:v-if
11.除了{{}}，其他语法都写在标签上,而且都是用=号来使用的。
12.vue中要使用自己定义的变量或方法，要使用this关键字。
13.一个标签可以加多个事件
14.页面加载事件：created（）{}，页面先加载完毕,在执行事件的响应函数 .
15.为什么过滤器设置编码的时候只判断post请求，如果是get请求就不用设置编码了嘛？
16.前端开发：原则:写一步,测一步。
17json.cn网站，直接json传为对象。
18.同步异步获取请求数据的区别。异步是没有重定向的
19.mybait操作数据库，一定要记得提交事务。调用。close方法。
20.vue中使用delete作为方法名称报错：
21.阻止浏览器刷新：不可以用href="#"。
22.删除后，为啥不让浏览器刷新？
23.icp:进程之间通信管道。
24.node是提供前端服务器渲染来用的。
25.什么是发布者－订阅者模式呢？？
26.vue的原理
27.IDEA集成Tomcat热部署，debuy按钮下的四个选项的含义
28.debug下怎么热部署？？？

1.MVVM概念：

是Model-View-ViewModel的简写，它本质上就是MVC的改进版

mvc(ViewModel),把v进行划分，为model+view

vm是动词，指双向绑定。

* MVVM是Model-View-ViewModel的简写，它本质上就是MVC的改进版；MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。
	- M： 即Model，模型，指的就是数据
	- V： 即View， 视图，指的就是页面
	- VM：即View-Model，指的是模型和数据的双向绑定(即view和Model互相影响，Model变了，view随之改变；view变了，Model也随之改变)
	
* MVC和MVVM的使用区别
	在MVC模式中，
		开发人员需要从后端获取到数据(Model)，然后通过操作DOM渲染视图(View)。
		如果用户改变了视图(view)，开发人员还需要再通过DOM获取改变之后的数据，同步到Model中。
    在MVVM模式中，
    	Model和View是绑定的，Model变了，view自动变化；view变了，Model自动变化。
    	因此，程序员只需要关注Model即可。
    	
* 基于MVVM模式的前端框架三巨头：Vue、React、AngularJS，国内目前非常火的就是：Vue

2.vm绑定是咋实现的？？？

vue双向绑定原理

vue的双向绑定是由数据劫持结合发布者－订阅者模式实现的，那么什么是数据劫持？vue是如何进行数据劫持的？说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情．我们可以看一下通过控制台梳齿一个定义在vue初始化数据上的对象是什么．

数据绑定实现方法
view > model的数据绑定实现方法（类似键盘弹起事件）
修改dom元素（input,textarea,select）的数据，导致model产生变化，
只要给dom元素绑定change事件，触发事件的时候修改model即可，不细讲

model > view的数据绑定实现方法
1.发布订阅模式（backbone.js用到）；
2.数据劫持(vue.js用到)；
3.脏值检查(angular.js用到)；

简单地调用new ViewModel({data:data,template:template})，完成了model和view的绑定，
ViewModel内部大致执行顺序是：
 
1. 创建数据监控对象this.observer，该对象监控data（监控以后，data的属性改变，
   就会执行defineProperty中的set函数，set函数里面添加了publish发布函数）
 
2. 创建模板编译器对象this.compiler，该对象编译template，生成最终的dom树，
   并且给每个需要绑定数据的dom节点添加了subscribe订阅函数
 
3. 最后，改变data里面的属性，会自动触发defineProperty中的set函数，set函数调用publish函数，
   publish会根据key的名称，找到对应的需要执行的函数列表，依次执行所有函数

简单来说：view和model建立了映射，实现一起变动。

跟NIO复制一样。内存到内存，内存于文件绑定，进行复制。

3.vue特性

渐进式：一个前端项目可以使用vue一两个特性，也可以整个项目都用vue。

1）el: "#app",//element, 表示当前vue管理的视图范围, 他要求管理的是一个双标签(html body不能管理)

2）v-model="username"标签属性：进行双向绑定（vm简写）

3）{{username}}：{{}}  插值表达式  作用是将model中数据显示到页面上

4.在浏览器（F12）consle中输入，vue对象名.username获取username的值

5.双向绑定：v-model

* v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
* 目前v-model的可使用元素有：input、select、textarea
* {{username}} 插值表达式:把Vue对象中的数据,展示到页面中(单向绑定)

注意：下拉选择，v-model写在《select》标签中，不是写在《opton》中。

6.属性绑定：bind:src=“data中的变量名”

<img v-bind:src="imgSrc" :width="imgWidth">

7.复习一下相对路径:

8.一个js标签中，可以new好几个Vue嘛

可以。

9.列表循环：v-for

* 在vue中使用v-for实现数组的遍历，格式如下:

v-for="(item,index) in items"
items：要遍历的List
item： 每次遍历得到的临时变量
index：每次遍历的索引，从0开始计数(可省略)

<li v-for="(user,index) in users">

10.条件判断:v-if

* 语法：
	v-if="布尔表达式"
	v-else-if="布尔表达式"
	v-else
* 注意：
	v-else-if必须紧跟在带v-if后边，否则它将不会被识别
	v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则它将不会被识别
	v-if还可以和v-for联合使用，当二者出现在一起时，会先遍历再判断条件

11.除了{{}}，其他语法都写在标签上,而且都是用=号来使用的。

12.vue中要使用自己定义的变量或方法，要使用this关键字。

13.一个标签可以加多个事件

14.页面加载事件：created（）{}，页面先加载完毕,在执行事件的响应函数 .

注意:created()是方法，不是属性的键值对,created和methods是同级别的。

15.为什么过滤器设置编码的时候只判断post请求，如果是get请求就不用设置编码了嘛？

url会自动会浏览器被转码为utf-8,所以不用设置。

16.前端开发：原则:写一步,测一步。

17json.cn网站，直接json传为对象。

18.同步异步获取请求数据的区别。异步是没有重定向的

ajax用io流接受（ajax请求的数据没有键值对，不能用key获取value）。

请求体reqs对象接收（k=v）。

注意：提交表单是：同步，ajax：异步。

19.mybait操作数据库，一定要记得提交事务。调用。close方法。

20.vue中使用delete作为方法名称报错：

js----delete是关键字

21.阻止浏览器刷新：不可以用href="#"。

正解：

1）干掉href

2)href=“javascript:void(0)”

22.删除后，为啥不让浏览器刷新？

删除操作里面已经包含了刷新数据库步骤了，确认删除弹框，点击确认后，会刷新整个页面，是同步请求了，还浪费资源。

23.icp:进程之间通信管道。

24.node是提供前端服务器渲染来用的。

node相当一一个平台（特性是适合处理高并发），会用就行，后端开发没太大必要去学

25.什么是发布者－订阅者模式呢？？

订阅者和发布者模式，通常用于消息队列中．一般有两种形式来实现消息队列，一是使用生产者和消费者来实现，二是使用订阅者－发布者模式来实现，其中订阅者和发布者实现消息队列的方式，就会用订阅者模式．

打个比方，所谓的订阅者，就像我们在日常生活中订阅报纸一样，在订阅报纸的时候，通常都得需要在报社或者一些中介机构进行注册，当有新版的报纸发刊的时候，邮递员就需要向订阅该报纸的人，依次发放报纸．

所谓的订阅者，就像我们在日常生活中，订阅报纸一样。我们订阅报纸的时候，通常都得需要在报社或者一些中介机构进行注册。当有新版的报纸发刊的时候，邮递员就需要向订阅该报纸的人，依次发放报纸。

所有如果用代码实现该模式，需要进行两个步骤：

1、初始化发布者、订阅者。
2、订阅者需要注册到发布者，发布者发布消息时，依次向订阅者发布消息。

26.vue的原理

vue实现原理__cris的博客-CSDN博客_vue原理

27.IDEA集成Tomcat热部署，debuy按钮下的四个选项的含义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5MDpqyG-1642326628594)(问题.assets/1642326146301.png)]

Update resources ：如果发现有更新，而且更新的是资源文件（.jsp，.xml等，不包括java文件）,就会立刻生效
Update classes and resources ：如果发现有更新，这个是同时包含java文件和资源文件的，就会立刻生效这里需要注意一下：在运行模式下，修改java文件时不会立刻生效的；而debug模式下，修改java文件时可以立刻生效的。当然，两种运行模式下，修改resources资源文件都是可以立刻生效的。
Redploy ：重新部署，只是把原来的war删掉，不重启服务器
Restart ：重启服务器

原文链接：https://blog.csdn.net/qq_43203494/article/details/115487692