472 lines
7.9 KiB
Markdown
472 lines
7.9 KiB
Markdown
### 动态绑定
|
||
|
||
```html
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return {
|
||
dynamicClass: "dyclass",
|
||
msg: "Hello V-Bind",
|
||
buttonDisabled: true,
|
||
bindObjects: {
|
||
id: 1,
|
||
class: "dyclass"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<h3>动态绑定</h3>
|
||
<!-- 动态绑定与简写 -->
|
||
<div :class="dynamicClass" v-bind:title="msg">{{ msg }}</div>
|
||
<!-- 动态绑定布尔值 -->
|
||
<button :disabled="buttonDisabled">Button</button>
|
||
<!-- 以属性的方式动态绑定多个值-->
|
||
<div v-bind="bindObjects">动态绑定</div>
|
||
</template>
|
||
|
||
<style>
|
||
.dyclass {
|
||
font-size: 50px;
|
||
color: red;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
|
||
|
||
### 条件渲染
|
||
|
||
- v-if：只有条件值为v-if的时候才会渲染
|
||
- v-else
|
||
- v-else-if
|
||
- v-show：每次都会渲染，v-show只会更改css的display属性
|
||
|
||
```html
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
flag: false,
|
||
type: "B"
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<h3>条件渲染</h3>
|
||
<div v-if="flag">能看见我吗</div>
|
||
<div v-else>那你还是看看我吧</div>
|
||
<div v-if="type === 'A'">A</div>
|
||
<div v-else-if="type === 'B'">B</div>
|
||
<div v-else-if="type === 'C'">C</div>
|
||
<div v-else>Not ABC</div>
|
||
|
||
<!-- v-show -->
|
||
<div v-show="flag">v-show</div>
|
||
</template>
|
||
```
|
||
|
||
### 列表渲染
|
||
|
||
- 简单数据
|
||
|
||
```html
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
names: ["Sun", "Li", "Zhang"]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<h3>列表渲染</h3>
|
||
<div>
|
||
<p v-for="(name, index) in names">
|
||
{{ name }}-{{ index }}
|
||
</p>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
- 复杂数据
|
||
|
||
```html
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
names: [{
|
||
"id": 1,
|
||
"name": "Sun",
|
||
"avatar": "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
|
||
},
|
||
{
|
||
"id": 2,
|
||
"name": "Li",
|
||
"avatar": "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF",
|
||
},
|
||
{
|
||
"id": 3,
|
||
"name": "Zhang",
|
||
"avatar": "https://t7.baidu.com/it/u=2405382010,1555992666&fm=193&f=GIF",
|
||
}]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<h3>列表渲染</h3>
|
||
<div v-for="name of names">
|
||
<p>{{ name.id }} - {{ name.name }}</p>
|
||
</div>
|
||
<div v-for="name of names">
|
||
<p>{{ name.id }} - {{ name.name }}</p>
|
||
<img :src="name.avatar" alt="" width="10%">
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
- 遍历一个对象的所有属性
|
||
|
||
```html
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
id: 1,
|
||
name: "Sun",
|
||
avatar: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<h3>列表渲染一个对象的所有属性</h3>
|
||
<p v-for="item in userInfo">{{ item }}</p>
|
||
<p v-for="(item, key, index) in userInfo">
|
||
{{ item }} - {{ key }} - {{ index }}
|
||
</p>
|
||
</template>
|
||
```
|
||
|
||
### 事件处理
|
||
|
||
- v-on
|
||
- 简写`:on` 或`@`
|
||
- 内联事件处理器
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<button v-on:click="count++">按钮</button>
|
||
{{ count }}
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
count: 0
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
- 方法事件处理器
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<button v-for="(name, index) in names" v-on:click="clickName($event, name)">{{ name }} - {{ index }}</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
names: ["Sun", "Li", "Zhang"]
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
clickName(e, name) {
|
||
console.log(name)
|
||
console.log(e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 事件修饰符
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<a v-on:click="clickHandleByJS" href="https://www.baidu.com">访问百度</a>
|
||
<br>
|
||
<a v-on:click.prevent="clickHandleByVUE" href="https://www.baidu.com">访问百度</a>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
methods: {
|
||
clickHandleByJS(e) {
|
||
e.preventDefault()
|
||
console.log("点击")
|
||
},
|
||
|
||
clickHandleByVUE(e) {
|
||
console.log("点击vue")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
|
||
|
||
### 数组动态监听
|
||
|
||
- 数组调用以下方法是，会动态的更新循环列表
|
||
|
||
- push
|
||
- pop
|
||
- shift
|
||
- unshift
|
||
- splice
|
||
- sort
|
||
- reverse
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<h3>数组动态监听</h3>
|
||
<button @click="clickHandle">数组监听reverse</button>
|
||
<ul>
|
||
<li v-for="(name, index) in names" :key="index">{{ name }} - {{ index }}</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
names: ["Sun", "Li", "Zhang"]
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
clickHandle() {
|
||
this.names.reverse()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
|
||
|
||
### 计算属性
|
||
|
||
- 计算属性会基于其响应式依赖被缓存，一个计算属性只会在其响应式依赖更新时重新计算
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<h3>计算属性</h3>
|
||
<p>{{ info.title }}</p>
|
||
<p>{{ info.names.length > 0 ? "yes" : "no" }}</p>
|
||
<p>{{ nameLengthGtZero }}</p>
|
||
<p>{{ nameLengthGtZero }}</p>
|
||
<p>{{ nameLengthGtZero }}</p>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return {
|
||
info: {
|
||
names: ["sun", "li", "zhang"],
|
||
title: "this is a title"
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
nameLengthGtZero() {
|
||
console.log("computed run")
|
||
return this.info.names.length > 0 ? "yes" : "no"
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
|
||
### 侦听器
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<h3>监听器</h3>
|
||
<p>{{ msg }}</p>
|
||
<button @click="updateMessage">修改msg</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
msg: "hello"
|
||
}
|
||
},
|
||
methods: {
|
||
updateMessage() {
|
||
this.msg = "world"
|
||
}
|
||
},
|
||
watch: {
|
||
// 函数名必须与侦听的对象名保持一致
|
||
msg(newValue, oldValue){
|
||
// newValue 新值
|
||
// oldValue 旧值
|
||
console.log(newValue, oldValue);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 表单输入绑定
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<h3>表单输入绑定</h3>
|
||
<form action="">
|
||
<input type="text" v-model.lazy="message">
|
||
<p>{{ message }}</p>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return {
|
||
message: ""
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
- 修饰符
|
||
- `lazy`：取消每次 `input` 事件后更新数据，改为在每次 `change` 事件后更新数据
|
||
- `trim`：去除空格
|
||
- `number`: 转为数字
|
||
|
||
|
||
|
||
### 模板引用
|
||
|
||
- 获取DOM
|
||
|
||
```html
|
||
<template>
|
||
<div ref="container" class="container"> {{ className }}</div>
|
||
<button @click="getDivRef">加载div——dom</button>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
className: "容器"
|
||
}
|
||
},
|
||
methods: {
|
||
getDivRef() {
|
||
console.log(this.$refs.container)
|
||
this.$refs.container.innerHTML = "啊哈"
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
|
||
|
||
### 组件传递数据
|
||
|
||
- props
|
||
- 只能父组件向子组件传递数据，不能反向传递
|
||
- 子组件
|
||
|
||
```html
|
||
<template>
|
||
<p>{{ title }}</p>
|
||
<p>{{ age }}</p>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data (){
|
||
return {}
|
||
},
|
||
props: ["title", "age"]
|
||
}
|
||
</script>
|
||
```
|
||
|
||
- 父组件
|
||
|
||
```html
|
||
<template>
|
||
<h3>Parent</h3>
|
||
<p>静态数据传递</p>
|
||
<Child title="传递title" age="20"/>
|
||
|
||
<p>动态数据传递</p>
|
||
<Child :title = "message" :age="age"/>
|
||
<button @click="updateDynamicProps">点击修改动态传递数据</button>
|
||
</template>
|
||
<script>
|
||
import Child from "./Child.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
message: "动态数据传递",
|
||
age: 20
|
||
}
|
||
},
|
||
components: {
|
||
Child
|
||
},
|
||
methods :{
|
||
updateDynamicProps() {
|
||
this.message = "动态数据更新"
|
||
this.age = 30
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
</style>
|
||
```
|
||
|