这辈子学过了N种计算机语言，其实都是一些换皮【更换关键字】的计算机语言，真正用到的也只有html，

【有时候我觉得卖证的和这些换皮语言是一伙的，类似一面招聘保安，但是要求有保安证，然后开保安学校收钱。】

因为动态服务器太贵了，买不起。真正有用的其实也就是改改内存，破解游戏，玩游戏的时候舒服一点。

那些增删改查说实话我觉得用wps多省钱。最近想很多挣钱的方案，也了解了餐饮，美容，教培，

运输行业，它们居然都是要花很大的钱去买这种软件，在我看来写的非常垃圾，要是我能取代这些软件。

写一种更好的软件替代它们，然后去推广它们，我得挣多少钱，还是不做白日梦了，老实学习吧。

VUE

我看了介绍视频，比较牛逼的就是动态更新，而且代码量比传统的html的确是缩短了很多。

话说我的博客好像就是Vue，不，是Node.js,由于hexo会把{}给转译，于是我就采用了转译符号&#123和125。

名称:{{work.name}} 行业数量:
数量之和:{{total}}

VUE的生命周期

1.创建(创建之前dom和data，method都是undefine，创建后dom是undefine)
2.渲染(dom,data,method都能获取)
3.响应(可以在update里面加函数)
4.销毁(销毁之后，改变data，数值也不会发生变化)

{{ message }}

VUE的关键字和语法

在Vue的html{{work.count > 0 ? ‘YES’:’NO’}}是可以写三目运算符的

每当new一个Vue都需要写el(选择器，必写的)，其余的data(里面放一些json数据)，methods(里面放一些常用方法)，

其中还有computed和watch函数。根据我的理解，VUE的设计者不想让你写这种三目运算符函数(可以缩短时间)，

method是直接操纵对象，而且是动态的改变，其实computed可以实现的，methods也可以实现,

不过computed是动态的，而methods需要点击或者操作一下。method在处理一些三目运算符操作更快。

根据我的理解，computed的缓存类似免去了一个渲染步骤(仅仅适用于数据本身没有发生改变)，提升了运算速度

{{msg}}

method方法的值(实时的Data.now()):{{met()}}

computed方法的值(缓存的Data.now()):{{com}}

watch方法的newVal和oldVal:{{wa}}

1.v-model=”vue里面的data对象”，通常用于表单，省的写提交函数

2.v-on:click,change,等等事件=”vue里面的方法名称“，复用click函数

3.v-bind:herf,class,src,style=”vue里面的data对象”，可以动态改变dom的类，地址，样式

4.v-once，在节点里面写上v-once表示data只渲染一次，并不是说停止更新数据

5.v-html=”msg“，表示在当前的节点插入一段html，把msg当成html，当然会把原节点内容消除

6.v-text=”msg”, 表示在当前节点插入一段text, 当然会把原节点内容消除

7.v-show=”msg”，v-show是display，用于节点的展示和隐藏

8.v-if=”msg”, v-if是回销毁和创建节点

9.v-else，通常和v-if一起使用

10.v-else-if，通常和v-if一起使用

11.v-for=”{data in datas}”，会反复构建当前的dom对象，直到循环结束

12.v-pre，放在dom里面的意思是不会编译dom里面的data

13.v-cloak, 通常配合css,display:none一起使用，防止页面渲染之前出现原始的代码

VUE的增删改

不得不说，写起来真是简单快捷很多

id	电话	姓名	年龄	性别	=====功能=====

{{man.id}}
{{this.mans}}

VUE的组件和表单

组件


全局注册

Vue.component('组件名称，使用时加上对应的标签', {
  data: 组件的json数据，
  template: '组件的html'
});

单个注册

var Child = {
  template: '<h1>自定义组件!</h1>'
}

var com = new Vue({el: '#component',
components: {
     'child': Child
  }
});

使用PROP接受父节点的数据

所谓的父节点其实将数据放在模板上面

使用emit，了解子节点如何操控父节点的属性

使用$emit(父函数，参数)，可以很方便的进行父子节点传值

{{postFontSize}}px;

简单的父组件联合子组件

表单与ajax

在不引入外部包的情况下通常使用

var xhr = new XMLHttpRequest();
xhr.onload = 成功后的函数，接受数据;
xhr.onerror = 失败的函数;
xhr.open("POST/GET", "服务器处理地址");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(form);

xhr的升级简化版本fetch

fetch(服务器处理地址, method: {method:'POST', data:form)
    .then(response => {
        处理函数
    })
    .catch(err => {
        处理函数
    });

jquery.min.js下面的ajax

$.ajax({
  url:地址,
  method:POST/GET,
  dataType:头,
  data:form
  success:function(res){接收数据},
  error:function(err){报告错误)},
});

axios.min.js下面的ajax

axios({
  method: 'post',
  url: '/user/12345',
  data: form
}).then(function(response) {
  处理数据
});

VUE的动画

<transition name="css名称" enter-active-class=”也可以指定声明类“>
    <p v-if="show">hello</p>
</transition>

css的动画名称必须按照这个规则命名

1.css-enter

2.css-enter-active

3.css-enter-to

4.css-leave

5.css-leave-active

6.css-leave-to

scale距离缩放

VUE的路由

1.引用路由js
2.设置模板
3.设置试图，绑定模板

Hello App!

首页操作

2022-07-14

VUE笔记

VUE