【人生苦短我学Vue】-【DAY01】-爱的初体验

大家好，我是被白菜拱的猪。

一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!

利用好大二与大三之间的暑假，让我们充实自己，走向人生巅峰，迎娶白富美。

爱的初体验

一. 邂逅Vuejs

1.1. 认识Vuejs

• 为什么学习Vuejs
• Vue的读音
• Vue的渐进式
• Vue的特点

1.2. 安装Vue

• CDN引入
• 下载引入
• npm安装

1.3. Vue的初体验

• Hello Vuejs

  • mustache -> 体验vue响应式
    这里mustache语法是{{}}两个大括号，就跟人的络腮胡一样，所以取名还是非常的形象的。
    

• Vue列表展示

  • v-for
  • 后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来（符合响应式）
    注意这里的语法，遍历数组元素。v-for=“item in movies”
    

• Vue计数器小案例

  • 事件监听: click -> methods
  • 这个案例就是给我们介绍一下Vue中是如何进行事件操作的，js，jquery是命令式语法，而Vue是声明式。体会体会他们的区别以及妙在何处
  • 这里@符号是 语法糖写法，什么是语法糖。糖嘛，甜甜的，给个甜头。v-on:click="",事件语法太过于常用，所以给个甜头搞了个简写，方便了许多。
    

1.4. Vue中的MVVM

我认为这里类似于java中的SpringMVC，什么controller，view，ModelAndView。目前刚学，理解的不是特别深刻，相信在日后的学习过程中，会有更深一层次的理解。

1.5. 创建Vue时, options可以放那些东西

• el:element这里是html中的元素，决定vue会管理哪些dom
• data:数据区，可以是自定义的数据，也可以是后台传过来的数据
• methods:定义的一些方法
• 生命周期函数
  生命周期，从出生到死亡。在这一个过程中，会执行某些函数，这就是生命周期函数。我们在改函数中写一些我们自定义的方法，类似于spring 的aop。开始之前干什么，销毁之后干什么
  

二.插值语法

插值语法即在页面中展示数据有哪些办法。

• mustache语法
  这是我们最常用的，两个大括号跟络腮胡似的。
  
• v-once
  因为Vue是响应式的，你在浏览器中console页面改变属性值的话，页面相应的内容也会随之发生改变，假如在标签内的属性加上v-once，则其就只会渲染一次。
• v-html
  假如后台传过来的一个含有标签的超链接，用mustache就只会把它当成字符串，加上v-html就说明传过来的是一个HTML语法，就会去解析他。
  
• v-text
  他也是展示数据用的，但是他不够灵活，不像mustache语法可以字符串拼接。而且v-text里面的内容会覆盖标签内的内容。
• v-pre: {{}}
  里面是啥就是啥。下面这个图显示的就是Hello World 和{{message}}
  
• v-cloak: 斗篷
  在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。因为浏览器是从上到下解析我们的代码的，刚开始假如卡了一下，咦，还没轮到vue解析呢，直接看到了代码。这对用户是不友好的。所以v-cloak帮我们解决了这个问题，在没解析之前，把他隐藏起来。斗篷斗篷就是隐藏人的作用。
  • 在vue解析之前，div有一个属性v-cloak(该属性可以自定义)
  • 在vue解析之后，div删除改属性
  • 这样防止卡了，页面对用户页面不友好
    

三. v-bind动态绑定

为什么要使用动态绑定呢
这是因为mustache 是在内容里面使用，不能当做属性值

这样子写是错的，直接被当做了字符串
正确的做法：使用v-bind指令

3.1. v-bind绑定基本属性

这样解析这个指令，动态的把这个属性绑成变量
vue这里也提供了语法糖的形式，使用一个冒号

• v-bind:src
• :href

3.2. v-bind动态绑定class

{}可以称为一个对象，使用键值对的形式。

• 对象语法: 作业 :class=’{类名: boolean}’
• 数组语法:
  
  注意单独写一个class不会覆盖：class。假如对象太多的话，可以单独写一个方法，注意加上this，而且getClasses（）这个函数要加上括号。
  

3.3. v-bind动态绑定style

为什么要动态绑定style，这里要引出组件这个概念，什么是组件，就是可重复利用的东西，就比如导航栏，在这个页面是这个样式，但是到了另一个页面变成了另一个样式，但是他还是个导航栏，只不过样式改变了，所以我们这里就要去动态的改变样式。

• 对象语法:
  {}就代表对象，与class不同的是属性值不在是boolean类型。而是样式的值。注意这里font-size要加单引号，要不然会报错，会把-当成减号，要不然就直接使用fontSize，另外属性值也要加单引号，否则会将50px当成一个变量去解析。
  
• 数组语法:
  用的很少
  
  baseStyles在数据区定义，是一个对象即baseStyles：{fontSize:‘20px’}

四. 计算属性

计算属性，取名字的时候尽量使用属性的方式取名字

• 案例一: firstName+lastName
  注意methods与computed写法的区别，一个加了括号，一个没加括号。而且methods调用几次执行几次，computed调用多次只执行一次。
  
  
  那是不是觉得没有必要这样写啊，那我们看一看计算属性的复杂操作。
• 案例二: books -> price
  计算书的总价
  

总结

说是DAY01，其实看了好几天，一直拖啊拖，才写这篇博客。这是我跟着b站的视频学的，搜索vue排名第一的就是他，老师讲的很认真，推荐！看完一定要自己敲一遍，这样才能更好的掌握。继续加油。还有一篇算法的博客等着我，冲鸭。