Vue的基本使用
熟悉Vue的相关操作：
变量定义的方式：
1、const定义的变量不可以修改，而且必须初始化
1 const b = 2;//正确 2 // const b;//错误，必须初始化 3 console.log('函数外const定义b：' + b);//有输出值 4 // b = 5; 5 // console.log('函数外修改const定义b：' + b);//无法输出
1 var a = 1; 2 // var a;//不会报错 3 console.log('函数外var定义a：' + a);//可以输出a=1 4 function change(){ 5 a = 4; 6 console.log('函数内var定义a：' + a);//可以输出a=4 7 } 8 change(); 9 console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4
1 let c = 3; 2 console.log('函数外let定义c：' + c);//输出c=3 3 function change(){ 4 let c = 6; 5 console.log('函数内let定义c：' + c);//输出c=6 6 } 7 change(); 8 console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3
4、Vue对应的操作范围（只支持双标签，单标签内部不能使用插值语句）
使用Vue的时候会由一个EL标签确定EL的命中范围，在这个范围中可以随意使用Vue中定义的data数据
{{ }} 表示插值表达式 EL 理解为是vue的一个挂载点，不能挂载在body和html标签上
对于el：对应的标签选择，可以是id="app",class = "app",默认使用id,以为id可以确定为唯一的。
==Vue中复杂数据的渲染和js的语法相同，使用点（.）语法，数组使用下标索引获取
{{message}}//不可以命中EL中的message
<div id = "app" class = "app">
{{message}}//可以命中EL中的message
<span>
{{message}}//可以命中EL中的message
</span>
</div>
<srcipt>
var app = new Vue({
//el:"#app",//这里的el表达式对应css中的标签选择器,与id对应
//el:".app",//与class对应
el："div",//直接对应div这个标签
data:{
message : "hello Vue!"
}
})
</srcipt>
5、Vue的常规应用（页面根据数据的改变而改变）
-
内容绑定，事件绑定（v-text，v-html，v-on）
v-text：设置标签的文本值（v-text = "message"）,替换模板中所有的数据，如果拼接需要在单引{{message+“hello”}}，拼接加引号
v-html：可以解析HTML结构
<a href='www.baidu.com’>百度</a>
上面在Vue的data中定义字段值，v-text会直接返回所有内容，而v-html直接解析为一个百度链接
v-on：为元素绑定事件，v-on：可以被替换为@符号，效果相同方法绑定在Vue的methods属性中，方法内部通过this关键字可以访问定义在data中的数据。
-
显示切换，属性绑定（v-show，v-if，v-bind）
v-show:指令的作用是：根据真假切换元素的显示状态v-show
不支持<template>元素，也不支持v-else原理是修改原始的display，实现显示隐藏，指令后面的内容，最终都会解析为Boolean（布尔值），值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步
v-if指令的作用是：根据表达式的真假切换元素的显示状态（实际操作就是创建和删除dom节点）
本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除（在实际操作中，如果操作显示状态比较频繁，选择使用v-show）
（在v-if之后也可以添加v-else，可以完成一个选择的操作，v-else-if，顾名思义，充当
v-if的“else-if 块”，可以连续使用）v-bind（设置元素的属性（比如：src，title，class）v-bind：属性名=表达式）简写就直接省略v-bind，写成（：属性名）
//:title 会显示图片的标题 //：src ="imgSrc"绑定图片的路径（v-bind:src="imgSrc"） <img v-bind:src="imgSrc" v-if="num>4" :class="{active:isActive}" @click="exchangeActive()"/>
-
列表循环，表单元素绑定（v-for，v-on，v-model）
数组经常和v-for结合使用，语法是( item,index ) in 数据（v-for=”（item，index）in data“）
也可以使用of代替in（<div v-for="item of items"></div>）
//name表示列表集合中键值对的键，value表示值 <div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> //index表示该键值对在列表中的索引 <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>
列表的添加和删除：
增加;list.push()--加在列表的尾部
删除：list.pop(),从列表的尾部删除；list.shift():shift从列表的头部删除。list.splice(index):删除列表索引所在的元素
统计数组的长度：{{list.length}}
-
push()：元素从尾部加入列表 -
pop()：元素从列表的尾部删除 -
shift()：从列表的头部删除 -
unshift('text'):与从头部删除相反，这个是从头部加,需要添加要增加的数 -
splice()：对列表进行分块（可进行删除，插入，替换操作），参数是字符串，表示按照分块的规则，如果参数splice(2,3):表示从索引为2的值开始，切除3个作为分片并返回一个新数组。原数组也会改变。splice(2,0,'a','b'):表示从第二个数开始，切除0个，并添加a和b，同样在原数组上增加，由于切除的分片为0，所以返回的分片为空（该操作可以理解为添加操作）；splice(2,2,'a','b'):表示切除从2为索引开始的2个值，并将a和b加在后面。该操作可以理解为替换。 -
sort()：对列表进行排序 -
reverse()：对列表进行反转 -
concat（）：合并，拼接，操作和push类似，都是在数组的末尾添加一个或多个值，但是push是在原数组上添加，而concat是复制一个原来的数组的副本，然后再将这个新的数组赋值给一个新的变量，原数组不会改变。
-
slice（）：剪切，切片的方法，可以对数组进行切片，参数slice(2,8):留下数组中2到8位置的数，slice(2):删除所有是数，留下2之后的所有数。参数可以为负slice(-2):表示删除最后两个数，其他的留下
-
computed:{ evenNumbers: function () { return this.numbers.filter(function (number) { return number<4 }) } }
4、v-model指令的作用是便捷的设置和获取表单元素的值
watch中的三种属性：handler，immdiate，deep；watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行。
handle是执行代码的区域
immediate：truetrue就表示会立即执行，反之就是在页面有变化之后再执行
deep：true
<template> <div> <div> <input type="text" v-model="ipt.text" /> <p> 姓名 <b>{{name}}</b> </p> <p> 性别 <b>{{gender}}</b> </p> <p> 年龄 <b>{{age}}</b> </p> <p> 身高 <b>{{height}}</b> </p> </div> </div> </template> <script> export default { data() { return { name: "小明", gender: "男", age: "26", height: "180", ipt: { text:'小明' } }; }, watch: { // 通过输入框文字的变化，来改变下面的数据 ipt: { handler(newVal,oldVal) { console.log(111) if (newVal.text == "小红") { this.name = "小红"; this.gender = "女"; this.age = 18; this.height = 160; } else { this.name = "无"; this.gender = "无"; this.age = "无"; this.height = "无"; } }, immediate:false, deep:false } }, methods: {} }; </script>
-
-
created、mounted，computed函数的使用
created：（钩子函数）在模板渲染成HTML前调用，即通常初始化某些属性值，然后再渲染成视图
mounted：（钩子函数）在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。如果在mounted钩子函数中请求数据可能导致页面闪屏问题。其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了
computed：{}计算属性，什么是计算属性呢，我个人理解解释对数据进行一些操作，可以包含逻辑处理操作，对计算属性中的数据进行监控，计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时才能更新变化，以函数的形式返回结果。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。和方法相比，方法只要触发重新渲染，调用方法将总会再次执行函数。
props
if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
【使用过的请求地址：
天气：http://wthrcdn.etouch.cn/weather_mini?city='+that.city（get请求，city参数）
音乐：https://autumnfish.cn/search（get请求，keywords查询的关键字）
获取音乐地址：https://autumnfish.cn/song/url （get请求，id歌曲的id）
歌曲详情获取：https://autumnfish.cn/song/detail（get请求，ids请求参数）
】
axios必须先导入才可以使用 使用get或post方法即可发送对应的请求 then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容,或错误信息
https://github.com/axios/axios
10.启动一个vue项目
11.事件修饰符
-
.stop -
.prevent -
.capture -
.self -
.once -
.passive
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
