vue的学习笔记01篇

一.关于vue的基础介绍

vue的创始者是尤雨溪

vue是目前国内最火的框架，与angular和react并列为前端最火的三大框架，react是全球比较火的框架，angular框架相对前面两种框架使用的频率较低

vue只关注视图层，致力于构建用户界面的框架，一张渐进式的框架，便于上手，便与第三方库和既有项目整合

可以实现数据的双向绑定

框架对项目的入侵比较大

通过vue提供的指令，很方便的把数据渲染到页面上，程序员不再手动操作DOM元素

vue是数据驱动视图更新

vue也可以进行手机app的开发，需要借助Weex

二.什么是MVVM？

mvvm是前端视图层的概念，把视图层分为model view viewmodel 三个部分。便于开发和代码的维护

三.vue的基础语法？

1.基本的代码结构

基本的代码实现

2.插值表达式的闪烁和v-cloak、v-text、v-html

插值表达式闪烁的原因是：当在页面的下面引入vue的时候，页面运行到插值表达式的时候，还不能识别插值表达式，等运行完vue的时候，插值表达式得到了解析，这其中就会出现闪烁，解决办法就是加一个v-cloak，不会覆盖之前的内容

v-text和v-html就不会出现闪烁的问题，因为就没有双花括号，但是，这种方式也有缺陷就是会覆盖标签之前的内容，v-html可以用来解析标签

插值表达式的闪烁

3.v-bind的属性绑定机制

可以所写为：（冒号）

同时可以绑定指定的内容 v-bind:title = "lickc+'需要指定的内人'"  类似于变量和字符串的拼接

属性绑定

4.v-on的事件绑定机制与事件修饰符

可以缩写为@

v-on的事件绑定机制

事件修饰符：

.stop  阻止冒泡

.prevent  阻止默认行为（a标签的跳转和表单的默认提交）

.self  点击该元素的时候才会触发事件（注意与stop的区别，stop阻止所有冒泡，self阻止当前元素的冒泡）

.once  只触发一次

.capture  事件的捕获

时间修饰符

5.v-model实现数据的双向绑定

v-bind 只能实现从m-v之间单向的数据绑定

v-model可以实现数据的双向绑定，

只应用于表单元素的双向数据绑定

v-model数据的双向绑定

6.类样式的操作

可以通过数组，直接赋值 ，对象，数组里面嵌套对象的方式

第一种：字符串加数组

放到数组里面，并且加引号

第二种方式：数组加变量

数组加变量

第三种方式：数组里面套对象

数组里面嵌套对象

第四种：直接写数组

直接写数组

7.style样式的操作

对象属性由多个单词组成那么需要带上引号

样式的操作

8.v-for循环

v-for循环数组

循环数组

v-for循环对象数组

循环对象数组

v-for循环对象

循环对象

v-for迭代数字（数字从1开始）

迭代数字

注意v-for循环当中的key

9.v-if和v-show的区别

v-if每次都要重新创建和删除元素

v-show：每次不会重新进行dom的删除操作和创建

v-if:有较高的切换性能消耗

v-show有较高的初始渲染消耗