Vue学习笔记

黑马程序员–vuejs视频学习笔记，视频链接

day01

一、Vue课程简介

前5天：学习Vue基本语法和概念；打包工具：webpack，gulp；
后五天：以项目驱动教学。

二、什么是Vue.js

三、为什么要学习流行框架

1. 企业为了提高开发效率，使用框架就能提高效率；
2. 提高发开发效率的历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js/Vue.js；（能够让我们减少不必要的DOM操作；提高渲染效率 ；双向数据绑定的概念，通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了）
3. 在Vue中，一个核心概念，就是让用户不再操作DOM元素，解放用户双手，让程序员更多时间去关注业务逻辑；

四、框架与库的区别

1. 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目；（eg：node中的express）
2. 库（插件）：提供某一个小功能，对项目的入侵性小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求

• 从Jquery切换到Zepto
• 从EJS切换到art-template

五、MVC和MVVM的关系图解

六、Vue的基本代码和MVVM的对应关系

1. Vue的基本代码

注意 id="app"不要写在body里面

2. vue与MVVM的对应关系

七、Vue的相关指令

1. v-cloak

使用v-cloak能够解决插值表达式闪烁的问题（即出现类似{{msg}}这样的字符）

2. v-text

3. v-html

v-html也会覆盖元素中原本的内容，并且若内容为HTML代码，则加载成HTML效果

4. v-bind：绑定属性

v-bind：xxx=“nnn”；（浏览器会把nnn当成js代码来处理，所以可以在里面，添加修改，如添加字符串）
缩写是：“：”

5. v-on：事件绑定

缩写：“@”

6. 实例：跑马灯效果实现

Vue中的数据在V层直接使用变量名调用，但是在vm层就要用this.变量名来调用

示例代码

滚动效果的方法：

箭头函数内部的this与函数外的this保持一致；


停止滚动的方法：

7. Vue指令之 v-on的缩写和事件修饰符

• .stop
  阻止冒泡
  
• .prevent
  阻止默认行为 （如：在使用a标签时，点击链接，实现的是调用方法，不需要跳转页面，这个时候就要用到阻止默认行为）
  
• .capture
  添加事件侦听器时使用事件捕获模式
  事件由外向内捕获
  
• .self
  实现只有点击当前元素的时候，才会触发事件处理函数
  
• .once
  使用once只触发一次事件
  
• .stop和.self的区别
  
  .stop的情况
  
  .self的情况
  

8. Vue指令之v-model和双向数据绑定

将字符串拼接起来运算的投机取巧方式

9. 在Vue里面使用样式

• 数组方式:class="[‘xxx’,‘xxx’]"
  首先要v-bind做数据绑定，然后是用数组的方式加载，里面要加上引号，因为不加引号的话，会当成变量来读取。
  
• 三元表达式
• 嵌入对象
  
• 直接使用对象
  
  
• 直接在元素上通过:style的形式，直接书写样式对象；
  当键值对的键包含-时，就不能省略引号
  
• 将样式对象定义到data里面，并直接引用:style；
  
• 在:style中，通过数组，引用多个data的样式对象；
  

10. Vue指令之v-for和key属性

• 遍历普通数组
  
  
  
• 遍历复杂数组
  
  
• 遍历对象
  
• 迭代数字
  
• key属性
  
  

11. Vue指令之v-if和v-show

八、day01黑马程序员–vuejs视频学习笔记，视频链接

day01### 一、Vue课程简介前5天：学习Vue基本语法和概念；打包工具：webpack，gulp；后五天：以项目驱动教学。### 二、什么是Vue.js### 三、为什么要学习流行框架1. 企业为了提高开发效率，使用框架就能提高效率；2. 提高发开发效率的历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js/Vue.js；（能够让我们减少不必要的DOM操作；提高渲染效率 ；双向数据绑定的概念，通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了）3. 在Vue中，一个核心概念，就是让用户不再操作DOM元素，解放用户双手，让程序员更多时间去关注业务逻辑；### 四、框架与库的区别1. 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目；（eg：node中的express）2. 库（插件）：提供某一个小功能，对项目的入侵性小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求- 从Jquery切换到Zepto- 从EJS切换到art-template### 五、MVC和MVVM的关系图解### 六、Vue的基本代码和MVVM的对应关系#### 1. Vue的基本代码注意 id=“app"不要写在body里面#### 2. vue与MVVM的对应关系### 七、Vue的相关指令#### 1. v-cloak使用v-cloak能够解决插值表达式闪烁的问题（即出现类似{{msg}}这样的字符） #### 2. v-text#### 3. v-htmlv-html也会覆盖元素中原本的内容，并且若内容为HTML代码，则加载成HTML效果#### 4. v-bind：绑定属性v-bind：xxx=“nnn”；（浏览器会把nnn当成js代码来处理，所以可以在里面，添加修改，如添加字符串） 缩写是：“：”#### 5. v-on：事件绑定缩写：“@”#### 6. 实例：跑马灯效果实现Vue中的数据在V层直接使用变量名调用，但是在vm层就要用this.变量名来调用  示例代码滚动效果的方法：箭头函数内部的this与函数外的this保持一致； 停止滚动的方法：#### 7. Vue指令之 v-on的缩写和事件修饰符- .stop阻止冒泡 - .prevent 阻止默认行为- .capture 添加事件侦听器时使用事件捕获模式 事件由外向内捕获 - .self 实现只有点击当前元素的时候，才会触发事件处理函数 - .once 使用once只触发一次事件- .stop和.self的区别.stop的情况.self的情况#### 8. Vue指令之v-model和双向数据绑定将字符串拼接起来运算的投机取巧方式#### 9. 在Vue里面使用样式 - 数组方式:class=”[‘xxx’,‘xxx’]" 首先要v-bind做数据绑定，然后是用数组的方式加载，里面要加上引号，因为不加引号的话，会当成变量来读取。- 三元表达式- 嵌入对象- 直接使用对象- 直接在元素上通过:style的形式，直接书写样式对象； 当键值对的键包含-时，就不能省略引号- 将样式对象定义到data里面，并直接引用:style；- 在:style中，通过数组，引用多个data的样式对象；#### 10. Vue指令之v-for和key属性- 遍历普通数组- 遍历复杂数组- 遍历对象- 迭代数字- key属性#### 11. Vue指令之v-if和v-show### 八、day01

day02

一、品牌列表案例

1. 用Vue就是为了避免DOM操作，所以尽量不用Jquery
2. 为元素处理指定函数时
   
3. .some方法是当返回值为true的时候，some就会被终止；
   
   可以通过findIndex方法来直接查询索引
   
4. Vue的调试工具vue-devtools安装步骤和使用
   
   本地安装