w h y y o u a r e h e r e ?

Vue 最少必要知识

Vue

范围

  • 选择:id class div 都可,建议id
  • body内部

数据对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

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

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

事件绑定

  • v-on

    1
    2
    v-on:  等价于  @
    <input type="button" value="xxx" @click="todo">
  • 传递自定义参数

    1
    <input type="button" value="xxx" @click="todo2(a1, a2)">
  • 事件修饰符

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

显示切换

  • v-show 改变属性

    1
    <img v-show="isShow" src="xxx" alt="xxx">
  • v-if 直接增删 DOM 树元素(消耗性能)

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

属性绑定 动态增删class

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

列表循环

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

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

  • v-model
    1
    <input type="text" v-model="message">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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]
]
]
]
]
]
< - 完 - >
- 坚持分享 鼓励创作 -