vue 入门：组件事件
文章目录
- vue介绍
- vue 入门
- 简单示例
- 自定义组件
- 事件
vue介绍
vue2 官网
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
- Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。
vue 入门
- Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
- v-bind attribute 被称为指令，指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，简写，例如
:id="message"将元素节点的 id 属性 和 vue 实例的 message 属性的内容保持一致 - v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
- v-on 指令添加一个事件监听器。
<template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含<template>元素.
简单示例
- 当创建一个 Vue 实例时，你可以传入一个选项对象,选项对象文档
- 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成
- 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值，当这些数据改变时，视图会进行重渲染
- Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来，实例 property 和方法的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}} {{message + message}}
<div :id="message"></div>
<ul>
<li v-for="item in list">
<span v-if="!item.del">{{item.title}}</span>
<span v-else style="text-decoration: line-through">{{item.title}}</span>
<button v-show="!item.del">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// // 创建一个 Vue 实例
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
list: [{
title: '课程1',
del: false
}, {
title: '课程2',
del: true
}],
}
})
</script>
</body>
</html>
PS: 在浏览器控制台上可以通过 vm 获取数据（代码vue实例挂再在vm上），也可以修改相关的变量值
自定义组件
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
- 组件API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}} {{message + message}}
<div :id="message"></div>
<!--
<ul>
创建一个 todo-item 组件的实例
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
-->
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
// 声明能接收的参（属）数（性）
props: {
title: String,
del: {
type: Boolean,
default: false,
},
},
// 复用html代码
template:
`
<li>
<span v-if="!del">{{ title }}</span>
<span v-else style="text-decoration: line-through">{{ title }}</span>
<button v-show="!del">删除</button>
</li>
`,
data: function () {
return {}
},
methods: {},
})
// 定义名为 todo-list 的新组件
Vue.component('todo-list', {
template:
`
<ul>
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function () {
return {
list: [{
title: '课程1',
del: false
}, {
title: '课程2',
del: true
}],
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
}
})
</script>
</body>
</html>
事件
- 事件APi
- 自定义事件
- 在 Vue.js 中，v-on:my-event 的简写方式是 @my-event，@xxx 进行事件绑定(简写形式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}} {{message + message}}
<div :id="message"></div>
<!-- <ul>
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul> -->
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: {
title: String,
del: {
type: Boolean,
default: false,
},
},
template:
`
<li>
<span v-if="!del">{{ title }}</span>
<span v-else style="text-decoration: line-through">{{ title }}</span>
<button v-show="!del" @click="handleClick">删除</button>
</li>
`,
data: function () {
return {}
},
methods: {
handleClick(e) {
console.log('点击删除按钮')
// $emit 事件告诉上层（父组件））
this.$emit('delete', this.title)
}
},
})
Vue.component('todo-list', {
// @delete 的方式来绑定一个用来接收 delete事件的方法
template:
`
<ul>
<todo-item @delete="handleDelete" v-for="item in list" :title="item.title"
:del="item.del"></todo-item>
</ul>
`,
data: function () {
return {
list: [{
title: '课程1',
del: false
}, {
title: '课程2',
del: true
}],
}
},
methods: {
// 子组件触发 delete 事件，父组件接收到事件，执行相应的方法
handleDelete(val) {
console.log('handleDelete', val)
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
}
})
</script>
</body>
</html>