前端之Vue学习（一）

导课

MVVM（前端思想）

前端视图层的分层开发思想，主要把每个页面分成了M、V和VM。

• M：保存每个页面中单独的数据
• VM：调度者，分隔了M和V，每当V层想要获取或保存数据的时候，都要有VM做中间的处理
• V：每个页面中的HTML结构
  MVVM提供了数据的双向绑定。

vue 的特点

**1.：**在 vue实例 的内部中，如果想要获取 data 上的数据，或者，想要调用 methods 中的方法，必须通过this.数据属性名 或 this.方法名
这里的this指的是new出来的 vue实例 的对象———— vm
**2.：**vue实例，会监听自己的 data 中的所有数据的改变，只要数据一改便，就会自动把 最新的数据 从data上 同步到页面

Vue的基本代码

• 导入vue的包

• 创建一个vue的实例（用new）：

  • el：表示当前我们new的这个Vue实例要控制页面上的哪个区域
  • data（对象）：存放的是 el 中要用到的数据
  • methods（对象）：存放的是当前vue实例中所有可用的方法
  • filters：私有过滤器定义
  • directives：私有指令定义
  • 生命周期函数：
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyeed

• vue实例控制的页面区域
  注意： 在 VM 实例中，如果要访问 data上的数据 或者 methods中的方法，必须带 this

Vue指令

v-cloak

可以解决插值表达式的闪烁问题

插值表达式

{{}}只会替换自己的这个占位符，不会把整个元素内容清空

v-text

与插值表达式作用差不多。只是v-text会覆盖元素中原本的内容

v-html

会覆盖元素原本的内容，只不过它把内容当作html输出

v-bind:

该指令用来绑定属性，之后的内容要书写为合法的js表达式
v-bind：+属性 可简写为 ：+属性

v-on：

该指令用来绑定事件
缩写为 @

• click——鼠标点击
• mouseover——鼠标覆盖

v-model（双向数据绑定）

使用 v-model 指令，可以实现表单元素和Model中数据的双向绑定
注意：v-model只能运用在表单元素中
input（radio，text，address， email…） select checkbox textarea

v-for

• 循环普通数组
• 循环对象数组
• 循环对象
• 迭代数字
  注意: 2.2.0+的版本中，当组件中使用 v-for 时， key是必须的

v-if 和 v-show

• v-if 的特点：每次都会重新删除或创建元素
  v-if 有较高的切换性能消耗
  如果元素涉及到频繁的切换，则推荐使用 v-show
• v-show 的特点：每次不会重新进行dom的删除和创建操作，只是切换了元素的 display：none 的样式
  v-show 有较高的初始渲染消耗
  如果元素可能永远也不会被演示出来被用户看到，则推荐使用 v-if

事件修饰符

• .stop：阻止冒泡
• .prevent：阻止默认事件
• .capture：添加事件侦听器时使用事件捕获模式
• .self： 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once：事件只触发一次
  注意： 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

在Vue中使用样式

使用class样式

• 数组
  直接传递一个数组， 注意：这里的class需要使用v-bind做数据绑定
  <h1 :class="['thin','italic']">非常大的标题</h1>
• 数组中使用三元表达式
  <h1 :class="['thin','italic', flag? 'active' : '']">非常大的标题</h1>
• 数组中嵌套对象
  在数组中使用对象来代替三元表达式，提高代码的可读性
  <h1 :class="['thin','italic', {'active':flag} ]">非常大的标题</h1>
• 直接使用对象
  在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号也可不带引号，属性的值是一个标识符
  <h1 :class="{ red:true, thin:true, italic:false, active:false }">非常大的标题</h1>
  还有一种将class对象定义到data中，并直接引用到 :class 中

   data：{
       classObj:{ red:true, thin:true, italic:false, active:false }
   }
  

使用内联样式

• 直接在元素上通过 :style 的形式，书写样式对象
  <h1 :style="{color:'red', 'font-weight':'280'}">这是一个h1</h1>
• 将样式对象定义到data中，并直接引用到 :style 中

  data:{
              styleObj1:{color:'red', 'font-weight':'280'}
          }
  

• 在 :style 中通过数组引用多个 data 上的样式对象
  <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>

               styleObj1:{color:'red', 'font-weight':'280'},
               styleObj2:{'font-size':'40px', 'font-style':'italic'}
           }