VUE-基础笔记
1.先安装部署下
首先感谢技术胖的视频基础教程,断断续续看完全套视频,有兴趣的小伙伴可以去找度娘,非常适合没接触过的小伙伴。
学习之前需要能达到自己能简单搭一个页面,和会js的基础知识的水平,才容易理解,
需提前安装node。
先上官网下载vue.js 有开发和生产版两种,理解为一个未压缩和一个已压缩就行。创建文件夹放入js文件(assets文件夹用于放css和js文件 这个文件夹默认不被编译。)
![](https://img.haomeiwen.com/i15929178/0e00fcd14b33103c.png)
全局安装live-server(热更新)的插件,就是能让浏览器和代码同步的插件,比较方便看效果。
记得初始化一下项目(npm init)
![](https://img.haomeiwen.com/i15929178/0b594dca247c1620.png)
id为app的div是用来操作的容器,在下面的el中绑定好,data用于数据操作,message可自行修改,要和容器中的{{}}的名字一样才行。
第一步完成,接下来就是个人理解的干货了,看不懂还是去看视频吧。
2.v-if v-else v-show
v-if和v-else 用于日常判断。
![](https://img.haomeiwen.com/i15929178/ac01b6e226222232.png)
由iss决定布尔值,v-if接收。
v-show 就是显示隐藏的操作,和if差不多
<div v-show="isd">B</div>
3. v-for 循环渲染
![](https://img.haomeiwen.com/i15929178/6802c51803d83edc.png)
简单说 item in items 的意思就是下面的{{item}}是取值于items中,输出前需要进行排序,就用到了computed声明,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。由于只进行第一位大小排序,所以需要sortNumber方法进行差值比较。
![](https://img.haomeiwen.com/i15929178/ffd07770f4d0da35.png)
![](https://img.haomeiwen.com/i15929178/dce92830a23cb161.png)
注意:item in items的items是数据源,所以当在后面进行数据操作完,应该取得的是操作完的,而不是data里面的原数据,所以item应该改为声明的sortItems。
接下来学习对象循环输出
首先有个有对象的数组
![](https://img.haomeiwen.com/i15929178/b6948ce617414e1c.png)
接收的地方,i为序列号,由0开始所以i+1
![](https://img.haomeiwen.com/i15929178/c1f3a3849dd99319.png)
当然要进行排序,随便网上找个排序的方法
![](https://img.haomeiwen.com/i15929178/890f64207c492e57.png)
然后结合处理
![](https://img.haomeiwen.com/i15929178/1dcd3f2edae57a42.png)
低版本data和声明的名称是可以一样的,高级版本就不行了,那还是按新的来吧。
4.v-text和v-html
v-text作用于当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}},如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 注意:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。
![](https://img.haomeiwen.com/i15929178/3a6ed69ad0c9c8de.png)