开心档之 Vue 教程 1
目录
Vue.js 样式绑定
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#vuejs-%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A
Vue.js class
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#vuejs-class
class 属性绑定
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#class-%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A
实例 1
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-1
实例 2
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-2
实例 3
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-3
实例 4
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-4
数组语法https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95
实例 5
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-5
实例 6
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-6
Vue.js style(内联样式)
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#vuejs-style%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F
实例 7
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-7
实例 8
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-8
实例 9
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-9
Vue.js 组件 - 自定义事件
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#vuejs-%E7%BB%84%E4%BB%B6---%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6
实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B
data 必须是一个函数
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-1
自定义组件的 v-model
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-2
实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%AE%9E%E4%BE%8B-3
Vue.js 组件
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#vuejs-%E7%BB%84%E4%BB%B6
全局组件
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6
全局组件实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B
局部组件
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6
局部组件实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B
Prop
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#prop
Prop 实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#prop-%E5%AE%9E%E4%BE%8B
动态 Prop
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#%E5%8A%A8%E6%80%81-prop
Prop 实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#prop-%E5%AE%9E%E4%BE%8B-1
Prop 实例
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#prop-%E5%AE%9E%E4%BE%8B-1
Prop 验证
https://xie.infoq.cn/article/00709fe2d45df548b192760b2#prop-%E9%AA%8C%E8%AF%81
编辑
Vue.js class
http://kxdang.com/topic/vue2.html#vuejs-class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
class 属性绑定
http://kxdang.com/topic/vue2.html#class-
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
实例 1
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-1
实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
div v-bind:class="{
'active': isActive }
">
/div>
以上实例 div class 为：
div class="active">
/div>
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-2
text-danger 类背景颜色覆盖了 active 类的背景色：
div class="static"
v-bind:class="{
'active' : isActive, 'text-danger' : hasError }
">
/div>
以上实例 div class 为：
div class="static active text-danger">
/div>
我们也可以直接绑定数据里的一个对象：
实例 3
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-3
text-danger 类背景颜色覆盖了 active 类的背景色：
div id="app">
div v-bind:class="classObject">
/div>
/div>
实例 3 与 实例 2 的渲染结果是一样的。
此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
实例 4
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-4
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
}
,
computed: {
classObject: function () {
return {
base: true,
active: this.isActive &
&
!this.error.value,
'text-danger': this.error.value &
&
this.error.type === 'fatal',
}
}
}
}
)
数组语法
http://kxdang.com/topic/vue2.html#%E6%95%B0%E7%BB%84%E8%AF%AD
我们可以把一个数组传给 v-bind:class ，实例如下：
实例 5
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-5
div v-bind:class="[activeClass, errorClass]">
/div>
以上实例 div class 为：
div class="active text-danger">
/div>
我们还可以使用三元表达式来切换列表中的 class ：
实例 6
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-6
errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：
div v-bind:class="[errorClass ,isActive ? activeClass : '']">
/div>
Vue.js style(内联样式)
http://kxdang.com/topic/vue2.html#vuejs-
我们可以在 v-bind:style 直接设置样式：
实例 7
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-7
div id="app">
div v-bind:style="{
color: activeColor, fontSize: fontSize + 'px' }
">
菜鸟教程/div>
/div>
以上实例 div style 为：
div style="color: green;
font-size: 30px;
">
菜鸟教程/div>
也可以直接绑定到一个样式对象，让模板更清晰：
实例 8
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-8
div id="app">
div v-bind:style="styleObject">
菜鸟教程/div>
/div>
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
实例 9
http://kxdang.com/topic/vue2.html#%E5%AE%9E%E4%BE%8B-9
div id="app">
div v-bind:style="[baseStyles, overridingStyles]">
菜鸟教程/div>
/div>
注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
Vue.js 组件 - 自定义事件
http://kxdang.com/topic/vue2/vue-component-custom-
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
实例
http://kxdang.com/topic/vue2/vue-component-custom-
div id="app">
div id="counter-event-example">
p>
{
{
total }
}
/p>
button-counter v-on:increment="incrementTotal">
/button-counter>
button-counter v-on:increment="incrementTotal">
/button-counter>
/div>
/div>
script>
Vue.component('button-counter', {
template: 'button v-on:click="incrementHandler">
{
{
counter }
}
/button>
',
data: function () {
return {
counter: 0
}
}
,
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
}
,
}
)
new Vue({
el: '#counter-event-example',
data: {
total: 0
}
,
methods: {
incrementTotal: function () {
this.total += 1
}
}
}
)
/script>
如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：
my-component v-on:click.native="doTheThing">
/my-component>
data 必须是一个函数
http://kxdang.com/topic/vue2/vue-component-custom-
上面例子中，可以看到 button-counter 组件中的 data 不是一个对象，而是一个函数：
data: function () {
return {
count: 0
}
}
这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，如下所示：
实例
http://kxdang.com/topic/vue2/vue-component-custom-
div id="components-demo3" class="demo">
button-counter2>
/button-counter2>
button-counter2>
/button-counter2>
button-counter2>
/button-counter2>
/div>
script>
var buttonCounter2Data = {
count: 0
}
Vue.component('button-counter2', {
/*
data: function () {
// data 选项是一个函数，组件不相互影响
return {
count: 0
}
}
,
*/
data: function () {
// data 选项是一个对象，会影响到其他实例
return buttonCounter2Data
}
,
template: 'button v-on:click="count++">
点击了 {
{
count }
}
次。/button>
'
}
)
new Vue({
el: '#components-demo3' }
)
/script>
自定义组件的 v-model
http://kxdang.com/topic/vue2/vue-component-custom-
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
input v-model="parentData">
等价于：
input
:value="parentData"
@input="parentData = $event.target.value"
>
以下实例自定义组件 kxdang-input，父组件的 num 的初始值是 100，更改子组件的值能实时更新父组件的 num：
实例
http://kxdang.com/topic/vue2/vue-component-custom-event.html#%E5%AE%9E%E4%BE%8B-2
div id="app">
kxdang-input v-model="num">
/kxdang-input>
p>
输入的数字为:{
{
num}
}
/p>
/div>
script>
Vue.component('kxdang-input', {
template: `
p>
!-- 包含了名为 input 的事件 -->
input
ref="input"
:value="value"
@input="$emit('input', $event.target.value)"
>
/p>
`,
props: ['value'], // 名为 value 的 prop
}
)
new Vue({
el: '#app',
data: {
num: 100,
}
}
)
/script>
由于 v-model 默认传的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。
实例
http://kxdang.com/topic/vue2/vue-component-custom-event.html#%E5%AE%9E%E4%BE%8B-2
div id="app">
base-checkbox v-model="lovingVue">
/base-checkbox>
div v-show="lovingVue">
如果选择框打勾我就会显示。
/div>
/div>
script>
// 注册
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change' // onchange 事件
}
,
props: {
checked: Boolean
}
,
template: `
input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
}
)
// 创建根实例
new Vue({
el: '#app',
data: {
lovingVue: true
}
}
)
/script>
实例中 lovingVue 的值会传给 checked 的 prop，同时当 base-checkbox> 触发 change 事件时， lovingVue 的值也会更新。
Vue.js 组件
http://kxdang.com/topic/vue2/vue-component-custom-event.html#%E5%AE%9E%E4%BE%8B-2
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
tagName>
/tagName>
全局组件
http://kxdang.com/topic/vue2/vue-component.html#%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6
所有实例都能用全局组件。
全局组件实例
http://kxdang.com/topic/vue2/vue-
注册一个简单的全局组件 kxdang，并使用它：
div id="app">
kxdang>
/kxdang>
/div>
script>
// 注册
Vue.component('kxdang', {
template: 'h1>
自定义组件!/h1>
'
}
)
// 创建根实例
new Vue({
el: '#app'
}
)
/script>
局部组件
http://kxdang.com/topic/vue2/vue-
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
局部组件实例
http://kxdang.com/topic/vue2/vue-component.html#%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B
注册一个简单的局部组件 kxdang，并使用它：
div id="app">
kxdang>
/kxdang>
/div>
script>
var Child = {
template: 'h1>
自定义组件!/h1>
'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// kxdang>
将只在父模板可用
'kxdang': Child
}
}
)
/script>
Prop
http://kxdang.com/topic/vue2/vue-component.html#prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
Prop 实例
http://kxdang.com/topic/vue2/vue-component.html#prop-
div id="app">
child message="hello!">
/child>
/div>
script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: 'span>
{
{
message }
}
/span>
'
}
)
// 创建根实例
new Vue({
el: '#app'
}
)
/script>
动态 Prop
http://kxdang.com/topic/vue2/vue-
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
Prop 实例
http://kxdang.com/topic/vue2/vue-component.html#prop-%E5%AE%9E%E4%BE%8B-1
div id="app">
div>
input v-model="parentMsg">
br>
child v-bind:message="parentMsg">
/child>
/div>
/div>
script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: 'span>
{
{
message }
}
/span>
'
}
)
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
}
)
/script>
以下实例中使用 v-bind 指令将 todo 传到每一个重复的组件中：
Prop 实例
http://kxdang.com/topic/vue2/vue-component.html#prop-
div id="app">
ol>
todo-item v-for="item in sites" v-bind:todo="item">
/todo-item>
/ol>
/div>
script>
Vue.component('todo-item', {
props: ['todo'],
template: 'li>
{
{
todo.text }
}
/li>
'
}
)
new Vue({
el: '#app',
data: {
sites: [
{
text: 'Runoob' }
,
{
text: 'Google' }
,
{
text: 'Taobao' }
]
}
}
)
/script>
注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
Prop 验证
http://kxdang.com/topic/vue2/vue-component.html#prop-
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
}
,
// 带有默认值的数字
propD: {
type: Number,
default: 100
}
,
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return {
message: 'hello' }
}
}
,
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
}
)
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
type 可以是下面原生构造器：
StringNumberBooleanArrayObjectDateFunctionSymbol
type 也可以是一个自定义构造器，使用 instanceof 检测。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 开心档之 Vue 教程 1
本文地址： https://pptw.com/jishu/298650.html