Vue 最少必要知识

Vue

范围

• 选择：id class div 都可，建议id
• body内部

数据对象

el: "#app",
data: {
  message: "test contents",
  content: "<a href='https://51world.win'>时间的朋友</a>",
  isShow: true,
  imgSrc: "xxx",
  isActive: true,
  arr: [1,2,3,4,5],
  methods: {
    todo:function(){
      alert("测试");
      this.message += "动态添加"；
    },
    todo2:function(a1, a2){
      alert("测试");
      this.message += "动态添加"；
    },
    sayHi:function(){
      alert("Hi");
    }
  }
}

指令

内容绑定

• v-text

  <h2 v-text="'额外'+message"></h2>
  <h2>额外{{ message }}</h2>

• v-html

  <p v-html="content"></p>

事件绑定

• v-on

  v-on:  等价于  @
  <input type="button" value="xxx" @click="todo">

• 传递自定义参数

  <input type="button" value="xxx" @click="todo2(a1, a2)">

• 事件修饰符

  <input type="button" value="xxx" @keyup.enter="sayHi">

显示切换

• v-show 改变属性

  <img v-show="isShow" src="xxx" alt="xxx">

• v-if 直接增删 DOM 树元素(消耗性能)

  <img v-if="isShow" src="xxx" alt="xxx">

属性绑定 动态增删class

• v-bind

  v-bind:  等价于  :
  <img v-bind:src="imgSrc" alt="xxx" :class="{class01: isActive}">

列表循环

• v-for

  <li v-for="(item,index) in arr" :title="item">{{ index+1 }} {{ item }}</li>

表单元素绑定(双向数据绑定)

• v-model

  <input type="text" v-model="message">

nodes:
[//01-all years
  [//02-each year         0
    '1803',//year num     0 0==node[0]
    [//03-events          01
      [//04-each event    010
        '杨氏双缝干涉实验',  010 0==node[1][0][0]
        [
          '有个英国-,      0101  0==node[1][0][1][0]
          'src',          0101  1==node[1][0][1][1]
          'src'           0101  2==node[1][0][1][2]
        ]
      ]
    ]
  ]
]