vue

1，jQuery与vue区别

jQuery--指令式编程

vue--声明式编程

vue更加高效，流行

2，let与const与var

let定义变量

const定义常量

针对var做了一些优化 

3，vue中methods取data中值 直接this.count而不是this.data.count通过了代理proxy

4,vue中的mvvm

数据双向绑定 m-v直接自动绑定

5，创建vue实例时候传入option

el：类型string/HTMLElement

作用-决定vue管理那个实例

data:类型Object/Function（组件中data必须是函数）

作用-vue实例对应的数据对象

methods：{[key:string]:Function}

6,生命周期-回调

created

mounted

7，代码规范

缩进2空格更加规范流行

cli中生成规范文件.editorconfig缩进2

设置自动2

设置模板vue生成代码

8，插值操作

Mustache语法{{}}

不仅仅可以写变量还可以写简单表达式

{{message}} 

 {{ a+b}}

{{a}} {{b}}还可以并列多个

其他指令 

<h1 v-once>{{a}}</h1> 显示一次数值 后续值改变页面不刷新

<h2 v-html="url"></h2>

url:'<a href="http://www.baidu.com">baidu</a>'

v-text 会覆盖里面内容不好用 类型与Mustache

v-pre  没卵用

v-cloak  没卵用

9，事件绑定

<button v-on:click="btnclick">22</button>

btnclick:function () {

this.isactive = !this.isactive;

}

10，动态绑定属性v-bind

<img v-bind:src="img">

img:'https://i0.hdslb.com/bfs/sycp/creative_img/202106/78715da600a99a48fbd38d86a92b29e2.jpg'

语法糖写法::

<img :src="img">

动态绑定class属性

<h1 v-bind:class="active">1</h1>

active:'active'

语法糖写法:

:class="active"

升级用法 对象语法

<h1 :class="{active:isactive}">2</h1>

isactive:true

methods语法

<h1 v-bind:class="getclass()">2wdw</h1>

getclass:function () {

return{

active:this.isactive

    }

}

数组语法 

使用极少

动态绑定style

对象语法

单引号代表字符串 没有单引号代表data中属性解析

11计算属性

语法糖省略()
<h1>{{fullName}}</h1>

computed:{

fullName:function () {

return this.firName+this.last

    }

}

12

计算属性的getter和setter

完整写法

计算属性一般没有set方法，只读属性

所以简写不写get 也不用调用（）是一个属性

13

methods与computed对比

computed有缓存 效率更高

没有变化的情况只执行一次methods执行多次