邹润英230206

• 1.vue的基本使用
  
  • 引入vue.js脚本文件
    
  • 创建vue实例对象
    
  • 在页面中声明将要被Vue所控制的区域
    
  • 用Vue语法{{ 数据 }}将数据展示在页面中
    
• 2.vue特有的模板语法
  
  • 插值表达式 {{}}
    
  • 指令
    
  • 事件绑定
    
  • 属性绑定
    
  • 样式绑定
    
  • 分支循环结构
    
• 3.v-text 输出Text指令
  
  • 格式： v-text='xxxx'
    
  • v-text指令用于将数据填充到标签中（会覆盖原标签中的默认值），作用于插值表达式类似,更简洁
    
  • 填充纯文本：如果数据中有HTML标签会将html标签一并输出
    
  • 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
    
  • 使用频率：少
    
• 4. v-html 输出HTML指令
  
  • 格式： v-html='xxxx'
    
  • 作用：用法和v-text 相似
    
  • v-html与v-text区别:v-text: 输出的是纯文本，浏览器不会对其再进行html解析，就相当于过去学习的innerTextv-html: 会将其当html标签解析后输出, 就相当于过去学习的innerHTML
    
• 5. v-model 双向数据绑定
  
  • 默认情况下Vue只支持数据单向传递 M -> VM -> V但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力在input、select、text、checkbox、radio等表单元素元素上可以用 v-model 指令创建双向数据绑定
    
• 6. v-once 一次性插值
  
  • 让界面不要跟着数据变化, 只渲染一次
    
• 7. v-bind 属性绑定指令
  
  • 完整格式：v-bind:属性名称="绑定的数据"
    
  • 缩写格式：:属性名称="绑定的数据"
    
  • 作用：将数据动态绑定到指定的元素上
    
  • 在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html但是如果想给"元素的属性"绑定数据, 就必须使用v-bind所以v-bind的作用是专门用于给"元素的属性"绑定数据的
    
  • 特点：赋值的数据可以是任意一个合法的JS表达式例如: 属性名称="age + 1"
    
• 8. v-on 事件绑定指令
  
  • 完整格式： v-on:事件名称="事件处理函数名"
    
  • 注意： @ 后面没有冒号那么在指定事件名称的时候不需要写on
    
  • 作用：用于监听 DOM 事件注意点： 增加methods配置项，属性值也是对象，data后面要加逗号分隔。
    
• 9.事件修饰符
  
  • .once - 只触发一次回调
    
  • .prevent - 调用 event.preventDefault()
    
  • .stop - 调用 event.stopPropagation()
    
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
    
  • .capture - 添加事件侦听器时使用 capture 模式
    
• 10. Class的绑定 v-bind
  
  • 通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象或数组。
    
  • v-bind:class='表达式'
    
  • 简写 :class='表达式'
    
  • class 的表达式可以为：
    
    • 字符串 :class="activeClass"
      
    • 对象 :class="{active: isActive, error: hasError}"
      
    • 数组 :class="['active', 'error']"