第一天Vue.js基础知识

    一、基础写法：

步骤：

1、首先在头部引用Vue.js的包，我使用的是本地包。也可以使用网上的包。

2、写出Vue的基本样式，el存放的是作用域，data存放的是数据，methods存放的是方法。（注意：methods千万要记得写s，我就因为没写s，调试了好久，最后在某博主的文章看到这个问题才得以解决。）

二、v-cloak、v-text、v-html、v-bind、v-on、v-model的用法以及注意事项

1、v-cloak：能够解决插值表达式闪烁问题（插值表达式：页面上调取data中的数据，即上图中的{{msg}}；闪烁：即网速加载过慢，先显示插值表达式，再显示数据）

2、v-text：默认没有闪烁问题，但是会覆盖元素中的原本内容，插值表达式只会替换自己的占位符，不会将整个元素的内容清空。

3、v-html：可以识别页面元素，将页面代码存放在data中。

4、v-bind：（缩写就是 ：）这是用户绑定属性的的指令（例如：v-bind:class == :class ）

5、v-on：（缩写就是 @）这是事件绑定机制（例如：v-on:click() == :click() ）

6、v-model：解决v-bind数据单向绑定，从Model绑定到View，无法实现数据的双向绑定。v-model指令。可以实现表单元素和model中的数据的双向数据绑定（注意：只能够在表单元素中实现）

三、methods的使用

1、methods定义了当前vue实例的所用方法

2、在实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名，或者this.方法名，来进行访问，这里的this，就是表示new出来的实例对象。

3、实例中，会监听自己身体上的data中所有数据的改变，只要数据一发生改变，就会自动把最新的数据，从data上同步到页面中去（好处：程序员只要关心数据，不需要考虑如何重新渲染DOM页面）

四、.stop 、.prevent 、 .capture 、.self 、.once  行为

1、.stop阻止冒泡

2、.prevent阻止默认行为

3、.capture 实现捕获触发事件的机制

4、.self 只有点击当前元素，才会触发时间处理函数

5、.once 只触发一次事件处理函数

五、四种样式的使用

样式图

1、数组形式

2、三元表达式

3、使用对象来代替三元表达式

4、使用对象

六、内联样式的使用

1、直接写入样式

2、将样式定义到data中，拿出引用

3、数组形式引用多个data上的样式

七、v-for的使用

1、循环普通数组

2、循环对象数组

3、循环对象

4、迭代数字

八、v-for中的key的使用

在这里我推荐一个博主的对key的讲解：https://www.jianshu.com/p/4bd5e745ce95

个人觉得她讲的还不错。

九、v-if和v-show的使用

这边的话，这两者的区别是：1、v-if每次都要重新删除或创建元素，有较高的切换性能损耗

2、v-show只是样式dispaly：none 的改变，具有较高初始渲染的损耗。

以上是我第一天vue学习的记录，有些是个人的理解，如有出错的地方，可以在下方留言，我会及时改正的。