vue1上课总结

MVVM

• VM是什么?
  • 答案:连接views层和model的对象

插值表达式

• 插值表达式用来干什么?
  • 答案: 1.用来输出model书写的数据
  • 2.渲染页面

语法:v-text/v-html

• v-text作用是什么?
  • 答案:v-text是用来渲染页面的和插值表达式的作用差不多,但是没有{{}}放便
  • 先说v-html是用来转义标签的,但是不要轻易使用,容易遭到黑客攻击,只是用在可信的网站上

语法:v-bind

• 问题:他是绑定给谁的?
  • 答案: 他是绑定给标签的属性上
• 用法 :v-bind:属性名 = 'data里面的属性'
• 简写:/ :属性名 = 'data里面的属性'

语法 v-for

• 问题:渲染对象三个参数 => index:对象的索引,key:对象的键,value:对象键的值
  - 渲染数组两个参数 => index:数组的索引,item:数组的值
• 用法 :循环渲染数组/对象

    <!-- 
  v-for用法：
    item in Array
    (item, index) in Array
    value in Object
    (value, key, index) in Object
  
  :key属性具有唯一性，不能重复，它能够唯一标识数组的每一项
  将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，参考https://www.zhihu.com/question/61064119/answer/183717717
  
  注意：以下变动不会触发视图更新
    1. 通过索引给数组设置新值
    2. 通过length改变数组
  解决：
    1. Vue.set(arr, index, newValue)
    2. arr.splice(index, 1, newValue)
  -->
  <ul>
    <li v-for="item in user">{{item.name}}</li>
    <li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li>
    <li>---------------华丽的分割线---------------</li>
    <li v-for="value in boss">{{value}}</li>
    <li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
  </ul>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: [
        {name: 'jack'},
        {name: 'neil'},
        {name: 'rose'}
      ],
      boss: {
        name: '马云',
        age: 50,
        money: 1000000002030
      }
    }
  })
  </script>
  
  

数组key是

• 必须要写唯一标识

语法: v-model

• 用法:数据双向绑定----model和views的值同步变化
• 注意:只能用在只能在input/textarea/select上使用

语法: v-on 指令监听dom事件

• 使用方法:
  • 1,在标签的属性位置上写上v-on:任意的事件类型=" 要执行的函数"
  • 2,简写:@任意的事件类型 = ' 执行的函数'
  • 3,通过执行函数添加参数
  • 4,通过执行函数中添加event参数传递事件对象,注意只能是event,并且不能带引号
  • 5,事件修饰符可以给事件添加特殊功能 .stop .prevent
  • 6,可以给和按键相关的事件添加按键修饰符 常用的有 .enter