文章目录

  • 导课
  • MVVM（前端思想）
  • vue 的特点
  • Vue的基本代码
  • Vue指令
  • v-cloak
  • 插值表达式
  • v-text
  • v-html
  • v-bind:
  • v-on：
  • v-model（双向数据绑定）
  • v-for
  • v-if 和 v-show
  • 事件修饰符
  • 在Vue中使用样式
  • 使用class样式
  • 使用内联样式


导课

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'}
         }