Vue基本语法

v-xxx指令

v-cloak指令(没有值):

1.本质是一 个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xx}}的问题。

v-once指令(没有值):

1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v- once所在结构的更新，可以用于优化性能。

v-pre指令(没有值):

1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

v-text

修改标签的值，不会去解析内容是否为html语句

v-text="内容"
v-text="内容+'字符串'"

v-html

修改标签的值，会去解析内容是否为html语句

v-text="<a></a>"
v-text="内容+'字符串'"

v-on

为元素绑定事件。v-on可用@代替

<button @click=""></button>
<button v-on:click=""></button>

Vue中的事件修饰符:

1.prevent:阻止默认事件(常用) ;
2.stop:阻止事件冒泡(常用)
3.once: 事件只触发-次(常用) ;
4.capture:使用事件的捕获模式;
5.self:只有event. target是当前操作的元素是才触发事件: 
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
7.native:在给组件绑定原生事件时使用，告诉组件不要把该事件当成自定义组件处理，而是当成原生事件去处理

v-show、v-if都能将元素隐藏

v-show

为元素设置display属性，true默认值，false设置为none

<button v-show="true"></button>
<button v-show="表达式"></button>

v-if

true将标签添加进dom树
false将标签从dom树中删除

<button v-if="true"></button>
<button v-if="表达式"></button>

还有v-else-if、v-else与平常的用法一样

v-bind

可以动态设置所有标签的属性值

v-bind:title="内容"
//isshow若为true，则将class设置为active，为false则不设置
<button @click="c" :class="{active:isshow}">ss</button>

v-for

可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

//item名字随便取，代表数组的内容，也可以为对象
//index为索引
<img :src="item" alt="" v-for="(item,index) in arrayImg" :key="yyy">

key的关键性

面试题: react、vue中的key有什么作用? (key的内部原理)

1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，
随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变，直接使用之前的真实DOM !
②.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。

3.用index作为key 可能会引发的问题:
1.若对数据进行:逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
2.如果结构中还包含输入类的DOM:
会产生错误DOM更新==>界面有问题。

v-model

将表单元素的value值与data对象的值双向绑定，无论改变哪一个，另外一个也随之改变
只能绑定表单标签，并且默认就是绑定value值，所以可以直接简写为v-model=“”

<input v-model="内容">

axios

发送请求

get请求

axios.get("地址").then(
					//成功执行的方法
                    function(data){
                        
                    },
                    //失败执行的方法
                    function(err){
                    })

post请求

axios.post("地址",{key1:value1,key2:walue2}).then(
					//成功执行的方法
                    function(data){
                        
                    },
                    //失败执行的方法
                    function(err){
                    })