共计 3608 个字符，预计需要花费 10 分钟才能阅读完成。
指令
原文链接：https://note.noxussj.top/?source=sifo
指令 (Directives) 是带有 v- 前缀的非凡 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值扭转时，将其产生的连带影响，响应式地作用于 DOM。
v-show
次要作用是显示暗藏元素，通过 display: none 的形式。当表达式成立时，不做任何解决，然而表达式不成立时，则会给元素增加 display: none 属性。
<template>
<div class="home">
<span v-show="age > 100">Hello World</span>
</div>
</template>
<script>
export default {data() {
return {age: 80}
}
}
</script>
v-if
次要作用是显示暗藏元素，和 v-show 相似，然而 v-if 在条件不成立时，不会在 DOM 中渲染该元素。
<template>
<div class="home">
<span v-if="age > 100">Hello World</span>
</div>
</template>
<script>
export default {data() {
return {age: 80}
}
}
</script>
v-for
次要遍历对象或数组，并返回以后项和索引，当然也能够遍历数字以及字符串。应用 v-for 的时候必须要把 key 属性带上，并且 key 是作为惟一值。其中 item 代表每一项的值，index 代表每一项的索引值，这两者都是能够自定义命名的。in list 代表须要遍历的变量名称。
遍历一维数组
<template>
<div class="home">
<div v-for="(item, index) in list" :key="index">{{item}} -- {{index}}</div>
</div>
</template>
<script>
export default {data() {
return {list: ['xiaoming', 'xiaohong', 'libai']
}
}
}
</script>
遍历对象数组
<template>
<div class="home">
<div v-for="(item, index) in list" :key="index">{{item.name}} -- {{item.age}}</div>
</div>
</template>
<script>
export default {data() {
return {
list: [
{
name: 'xiaoming',
age: 18
},
{
name: 'xiaohong',
age: 20
},
{
name: 'libai',
age: 22
}
]
}
}
}
</script>
遍历对象
<template>
<div class="home">
<div v-for="(item, index) in obj" :key="index">{{item}} -- {{index}}</div>
</div>
</template>
<script>
export default {data() {
return {
obj: {
name: 'xiaoming',
age: 18,
like: 'running'
}
}
}
}
</script>
v-on
绑定事件监听器。在绑定的时候咱们须要留神绑定的对象是原生 DOM 元素还是 Vue 的自定义组件。如果是原生 DOM 元素则会触发 DOM 事件，如果是自定义组件则会触发组件内 emit 事件。v-on 的缩写是 @ 这个比拟罕用。
原生 DOM 元素事件
dom 原生事件有很多，然而都是固定的名称，不可能自定义。例如 click input change 事件等等。
<template>
<div class="home">
<button @click="handleClick"> 提交 </button>
</div>
</template>
<script>
export default {
methods: {handleClick() {alert('我被点击了')
}
}
}
</script>
Vue 自定义组件
当子组件外部调用 emit(“event1”) 时，则 handleClick 就会被触发。这里的 @ 事件名是能够自定义的。
index.vue 父组件
<template>
<div class="home">
<my-child-components @event1="handleClick"></my-child-components>
</div>
</template>
<script>
import MyChildComponents from './my-child-components.vue'
export default {components: { MyChildComponents},
methods: {handleClick() {console.log('我被触发了')
}
}
}
</script>
my-child-components 子组件
<template>
<div class="my-child-components">
<button @click="handleClick"> 点我 </button>
</div>
</template>
<script>
export default {
methods: {handleClick() {this.$emit('event1')
}
}
}
</script>
v-bind
动静绑定属性，通常咱们给一个 dom 元素增加属性时，基本上都是固定不变的，所以能通过 v-bind 能够变为动静的，使得开发更加便捷。v-bind 和 v-on 一样也是有缩写的，v-bind 的缩写是英文的冒号 : 这个也是比拟罕用的。当咱们绑定属性时，无论是动态还是动静，有一个中央须要留神，就是你绑定的元素是原生 DOM 元素，还是 Vue 的自定义组件。如果是原生的 DOM 元素则没有什么影响，然而如果是 Vue 的自定义属性，则是能够在其组件外部通过 props 接管传入的属性哦。如果子组件中没有通过 props 接管父组件传入的动静属性，则会作用到子组件的根原生 DOM 元素上。
Vue 自定义组件
index.vue 父组件
<template>
<div class="home">
<my-child-components :list="list"></my-child-components>
</div>
</template>
<script>
import MyChildComponents from './my-child-components.vue'
export default {components: { MyChildComponents},
data() {
return {list: ['xiaoming', 'xiaohong', 'libai']
}
}
}
</script>
my-child-components 子组件
<template>
<div class="my-child-components">
{{list}}
</div>
</template>
<script>
export default {props: ['list']
}
</script>
原生 DOM 元素动静属性
<template>
<div class="home">
<div :name="name"> 内容 1 </div>
<div :class="[age > 100 ?'big-age':'small-age']"> 内容 2 </div>
<div :style="{width: width}"> 内容 2 </div>
</div>
</template>
<script>
export default {data() {
return {
age: 80,
name: 'xiaoming',
width: '100px'
}
}
}
</script>
v-model
个别都是在原生 DOM 元素上，并且是表单元素进行应用 v-model，更高级的用法就是给 Vue 自定义组件应用 v-model 属性，当然实现起来会简单很多。想要在自定义组件上实现 v-model，则必须先理解 v-model 的实现原理。
典型双向数据绑定例子
这个例子刚好也诠释了 MVVM 模式是什么成果。当咱们批改数据层上 value 的值时，视图上的 value 也会跟着变动。当咱们通过视图中的 input 批改绑定的 value 时，数据层上的 value 也会实时跟着扭转。
<template>
<div class="home">
<div> 实时更新的值：{{value}}</div>
<input v-model="value" type="text" />
</div>
</template>
<script>
export default {data() {
return {value: ''}
}
}
</script>
原文链接：https://note.noxussj.top/?source=sifo
