Vue入门级学习笔记

一直不知道Vue为何物，B站大学上找到这个4小时视频，目前看到第5节，感觉Vue其实跟JQuery差不多，只不过JQuery是需要通过AJAX从后端获取数据，对获取的元素进行数据的改变，而Vue似乎直接把数据占位在那里，通过操作数据的值来给页面提供不同的值。

自己的感觉就是，打开一个网页，有个默认的值，然后通过JS操作这个值，这个是JQuery；打开一个网页，里面任何动态的地方先放一个数据占位符（插值表达式），然后通过改变数据来改变页面的显示，那这个是Vue。

v-text

如果不用插值表达式，可以使用元素属性 v-text="变量名" 来表示，这个跟{{变量名}}不一样地方在于，整个元素的内容都会变成变量的数据，而用括号的形式可以更精准一点，看需要的情况来使用了。

{{ }} 里面可以使用表达式，加减乘除和文本拼接都行。

v-html

这种情况下相当于是innerHTML，就是数据里面包含有html标签的时候使用。
比如content="<h1>head</h1>"，如果使用v-text就会变成一个文本输出，这时候就得使用v-html了。

这时候用大括号好像也会把标签输出成文本，那么这种情况只能用v-html了吗？
听完这一节，好像的确是这样。

v-on

这个好像就是onclick=""吧...
理解太狭隘了，v-on后面可以跟很多不同的事件，比如：
v-on:click="方法名" ->点击启用方法
v-on:dblclick="方法名" ->双击启用方法
v-on:mouseenter="方法名" ->鼠标进入？？

所有的方法，定义在script里的methods:{}里、
上面写v-on:click="test"
下面写
methods:{
test(){
alert("hello")
}
}
后面发现test()需要写成test:function(){}，不知道为什么要加function，不加我看也可以啊。

老师又说，v-on:click，完全可以写成@click，这也太好了吧。

点击元素改变数据

只需要在methods的方法里面，使用this.dataname = 新的值，就可以将现在的值更新成新的值了。
以前JQ是改变DOM元素，现在VUE就是改变变量的值，其实在我看来，差不多呀……

v-show

显示和隐藏数据，其实就是bootstrap里的toggle吧，感觉这些前端框架要实现的东西都差不多呀。
使用方法也是作为元素的属性 v-show="true" 或者 v-show="false", true和false可以作为一个变量放在data里，通过对data里变量的改变来决定元素是展示还是隐藏。
v-show里面的判断，还可以是表达式，比如v-show="age>=18"，如果age变量小于18，就不会显示。这点挺赞的。

学到一个点，如果只要改变正反，我自己是写的if(true){isShow=false}else{isShow=true}，而老师只用了一句话就改定了，这一点我需要学习，他用的是取反：this.isShow = !this.isShow。

v-if

这个是我刚才自己尝试的时候发现不能使用 {% if %}的答案了，其实我错误使用了{{if}}。
v-if也是作为属性写在元素<>里面的，比如<h1 v-if="true">这个样子，当然，完全可以=变量或者表达式。

v-show和v-if的区别，v-if操控的是整个元素，而v-show操控的是元素的display标签，后者对性能的影响比较小一点。

v-bind

现在是2020.11.14 23:35了，眼睛疼了，还是休息吧。不知道后面有没有时间把这个课学完……

11.15继续。

v-bind似乎是为了原来的那些标签和data绑定使用的，可以v-bind:src="AAA", v-bind:class="BBB", v-bind:title="CCC",然后在data里面把对应AAA/BBB/CCC定义好即可。

v-bind:class="active" => v-bind:class="isActive?'active':''"
通过data里定义isActive布尔值，在元素属性里使用三元表达式来决定元素的属性。
另一种写法是v-bind:class="{active:isActive}"

v-bind:class可以简写成:class，就跟v-on:click可以简写成@click一样。
自己写就是不一样，三元表达式isActive?'active':''，前面是问号，后面是冒号，不熟悉还是。

可以实现点击后不跳转，只在原地相应js代码。

v-for

首先在data里面定义一个数组array，然后在标签里面使用格式：
<li v-for="item in array">
{{item}}
</li>
如果需要使用index，可以用：
<li v-for="(item,index) in array">
{{item}} {{index}}
</li>
注意index是放在item后面的，也就是后面是key，前面是value，这个跟前面的PHP不一样。

如果data里是一个obj，也就是多个数组，可以使用item.来获取数据。
比如：
obj:[{name:"jack"},{name:"alex"}]
就使用item.name来获取数据。

v-on补充

在使用v-on:click="methodName"的时候，可以传入参数，比如v-on:click="methodName(666,'alex')"
对应的methods里的function名称也要带有参数，比如methodName:function(age,name){}

另外对于操作键盘的，比如@keyup="sayHi"，可以精确到某个键，比如@keyup.enter="sayHi"
文档参考 https://cn.vue.js/v2/api/#v-on

v-model

双向数据绑定，如果元素里定义了v-model="message"，data里也定义了message的值，无论修改哪边，另一边的值都会发生变化。
似乎有了v-model就不需要再定义value这个属性了？

记事本

自己做的事情的问题：

点击X的时候，如何输入自己要删的项目的index
11.16回答：@click="remove(index)"，直接把index写进去就行，不用写{{index}}
清空数组的命令是什么？
11.16回答：可以使用this.tasks.splice(0,tasks.length)，也可以直接this.tasks = []

自己做天气查询器碰到的问题

JS里如何做utf8 urlencode
11.17回答：使用encodeURIComponent()方法，参考这里

请求聚合API的时候，提示错误：

Access to XMLHttpRequest at 'http://apis.juhe.cn/simpleWeather/query?key=6229613107e65eeb38b326108b8679e9&city=%E5%8C%97%E4%BA%AC' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

11.17回答：按照这里说的添加了header，并没有用。

网上查了一下，这个似乎是一个“跨域”的问题，解决起来还挺复杂的。
似乎解决方案是从浏览器向自己的服务器请求，服务器再向API接口的服务器请求，从而解决跨域的问题，稍微有点复杂，先找个步需要跨域的接口弄完教程吧。备份一个教程

接口返回数据中有一个<![CDATA[2级]]>，如何获取里面的“2级”？
点击城市名称的时候，如何将城市名称传过去给
答案：直接把城市value在checkWeather(city)传过去就可以了
在checkWeather里，怎么判断是input过来的city还是点击deafult ciy进来的？
答案：这个我自己纠结了很久，想要在checkWeather方法里加一个判断，但其实直接用一个新的方法改变城市就可以了changeCity(city)，我理解以后碰到这种情况，需要加判断的，可以使用一个新的方法去判断，让查询的方法只要负责查询就可以了，这一点是我需要记住的。

自己做播放器碰到的问题

audio的属性，@play="play" @pause="pause"，类似@click，play和pause都是方法，play属性会在播放的时候触发，pause属性会在暂停的时候触发，这样的话可以根据播放的状态来触发别的事件，比如播放转呀转呀的动画。
audio和video标签可以加上属性 autoplay（自动播放），controls（控制器），loop（重复播放）

完课，感谢老师！