VUE-基础笔记

1.先安装部署下

       首先感谢技术胖的视频基础教程，断断续续看完全套视频，有兴趣的小伙伴可以去找度娘，非常适合没接触过的小伙伴。

        学习之前需要能达到自己能简单搭一个页面，和会js的基础知识的水平，才容易理解,

需提前安装node。

     先上官网下载vue.js 有开发和生产版两种，理解为一个未压缩和一个已压缩就行。创建文件夹放入js文件（assets文件夹用于放css和js文件 这个文件夹默认不被编译。）

全局安装live-server（热更新）的插件，就是能让浏览器和代码同步的插件，比较方便看效果。

记得初始化一下项目（npm init）

id为app的div是用来操作的容器，在下面的el中绑定好，data用于数据操作，message可自行修改，要和容器中的{{}}的名字一样才行。

第一步完成，接下来就是个人理解的干货了，看不懂还是去看视频吧。

2.v-if v-else v-show

v-if和v-else 用于日常判断。

由iss决定布尔值，v-if接收。

v-show 就是显示隐藏的操作，和if差不多

                                                   

B

3. v-for 循环渲染

基础写法

简单说 item in items 的意思就是下面的{{item}}是取值于items中，输出前需要进行排序，就用到了computed声明，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。由于只进行第一位大小排序，所以需要sortNumber方法进行差值比较。

注意：item in items的items是数据源，所以当在后面进行数据操作完，应该取得的是操作完的，而不是data里面的原数据，所以item应该改为声明的sortItems。

接下来学习对象循环输出

首先有个有对象的数组

接收的地方，i为序列号，由0开始所以i+1

当然要进行排序，随便网上找个排序的方法

然后结合处理

低版本data和声明的名称是可以一样的，高级版本就不行了，那还是按新的来吧。

4.v-text和v-html

v-text作用于当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}，如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 注意：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。