JavaScript的MVVM库Vue.js入门学习笔记
一、v-bind 缩写
<!-- 完整语法 --> <a v-bind:href=\"url\"></a> <!-- 缩写 --> <a :href=\"url\"></a> <!-- 完整语法 --> <button v-bind:disabled=\"someDynamicCondition\">Button</button> <!-- 缩写 --> <button :disabled=\"someDynamicCondition\">Button</button>
二、v-on 缩写
<!-- 完整语法 --> <a v-on:click=\"doSomething\"></a> <!-- 缩写 --> <a @click=\"doSomething\"></a>
三、过滤器
{{ message | capitalize }}
四、条件渲染
v-if <h1 v-if=\"ok\">Yes</h1> <h1 v-else>No</h1> <div v-if=\"Math.random() > 0.5\"> Sorry </div> <div v-else> Not sorry </div> template-v-if <template v-if=\"ok\"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> v-show <h1 v-show=\"ok\">Hello!</h1>
五、列表渲染 for
v-for
<ul id=\"example-1\">
<li v-for=\"item in items\">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: \'#example-1\',
data: {
items: [
{ message: \'Foo\' },
{ message: \'Bar\' }
]
}
});
<ul id=\"example-2\">
<li v-for=\"item in items\">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: \'#example-2\',
data: {
parentMessage: \'Parent\',
items: [
{ message: \'Foo\' },
{ message: \'Bar\' }
]
}
});
数组变动检测
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
example1.items.push({ message: \'Baz\' });
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/);
});
template-v-for
<ul>
<template v-for=\"item in items\">
<li>{{ item.msg }}</li>
<li class=\"divider\"></li>
</template>
</ul>
对象 v-for
<ul id=\"repeat-object\" class=\"demo\">
<li v-for=\"value in object\">
{{ $key }} : {{ value }}
</li>
</ul>
new Vue({
el: \'#repeat-object\',
data: {
object: {
FirstName: \'John\',
LastName: \'Doe\',
Age: 30
}
}
});
值域 v-for
<div>
<span v-for=\"n in 10\">{{ n }} </span>
</div>
六、方法与事件处理器
方法处理器
<div id=\"example\">
<button v-on:click=\"greet\">Greet</button>
</div>
var vm = new Vue({
el: \'#example\',
data: {
name: \'Vue.js\'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// 方法内 `this` 指向 vm
alert(\'Hello \' + this.name + \'!\')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> \'Hello Vue.js!\'
内联语句处理器
<div id=\"example-2\">
<button v-on:click=\"say(\'hi\')\">Say Hi</button>
<button v-on:click=\"say(\'what\')\">Say What</button>
</div>
new Vue({
el: \'#example-2\',
methods: {
say: function (msg) {
alert(msg)
}
}
});
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
<button v-on:click=\"say(\'hello!\', $event)\">Submit</button>
methods: {
say: function (msg, event) {
// 现在我们可以访问原生事件对象
event.preventDefault()
}
};
## 事件修饰符
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop=\"doThis\"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent=\"onSubmit\"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent=\"doThat\"> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>
## 按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13=\"submit\"> <!-- 同上 --> <input v-on:keyup.enter=\"submit\"> <!-- 缩写语法 --> <input @keyup.enter=\"submit\">
全部的按键别名：enter，tab，delete，esc，space，up，down，left，right
## 其他实例
new Vue({
el: \'#demo\',
data: {
newLabel: \'\',
stats: stats
},
methods: {
add: function (e) {
e.preventDefault()
if (!this.newLabel) {
return;
}
this.stats.push({
label: this.newLabel,
value: 100
});
this.newLabel = \'\';
},
remove: function (stat) {
if (this.stats.length > 3) {
this.stats.$remove(stat); // 注意这里的$remove
} else {
alert(\'Can\\\'t delete more!\')
}
}
}
});
七、过渡
CSS 过渡
<div v-if=\"show\" transition=\"expand\">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if=\"show\" :transition=\"transitionName\">hello</div>
new Vue({
el: \'...\',
data: {
show: false,
transitionName: \'fade\'
}
}
另外，可以提供 JavaScript 钩子:
Vue.transition(\'expand\', {
beforeEnter: function (el) {
el.textContent = \'beforeEnter\'
},
enter: function (el) {
el.textContent = \'enter\'
},
afterEnter: function (el) {
el.textContent = \'afterEnter\'
},
enterCancelled: function (el) {
// handle cancellation
},
beforeLeave: function (el) {
el.textContent = \'beforeLeave\'
},
leave: function (el) {
el.textContent = \'leave\'
},
afterLeave: function (el) {
el.textContent = \'afterLeave\'
},
leaveCancelled: function (el) {
// handle cancellation
}
});
八、组件
1.注册
// 定义
var MyComponent = Vue.extend({
template: \'<div>A custom component!</div>\'
});
// 注册
Vue.component(\'my-component\', MyComponent);
// 创建根实例
new Vue({
el: \'#example\'
});
<div id=\"example\">
<my-component></my-component>
</div>
或者直接写成：
Vue.component(\'my-component\', {
template: \'<div>A custom component!</div>\'
});
// 创建根实例
new Vue({
el: \'#example\'
});
<div id=\"example\">
<my-component></my-component>
</div>
2.使用prop 传递数据
实例一：
Vue.component(\'child\', {
// 声明 props
props: [\'msg\'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: \'<span>{{ msg }}</span>\'
});
<child msg=\"hello!\"></child>
实例二：
Vue.component(\'child\', {
// camelCase in JavaScript
props: [\'myMessage\'],
template: \'<span>{{ myMessage }}</span>\'
});
<!-- kebab-case in HTML -->
<child my-message=\"hello!\"></child>
3.动态props
<div> <input v-model=\"parentMsg\"> <br> <child v-bind:my-message=\"parentMsg\"></child> </div>
使用 v-bind 的缩写语法通常更简单：
<child :my-message=\"parentMsg\"></child>
4.Prop 绑定类型
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
比较语法：
<!-- 默认为单向绑定 --> <child :msg=\"parentMsg\"></child> <!-- 双向绑定 --> <child :msg.sync=\"parentMsg\"></child> <!-- 单次绑定 --> <child :msg.once=\"parentMsg\"></child> 其他实例： <modal :show.sync=\"showModal\"> <h3 slot=\"header\">custom header</h3> </modal> </div>
5.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象，包含验证要求：
Vue.component(\'example\', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: \'hello\' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + \'\' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
});
其他实例：
Vue.component(\'modal\', {
template: \'#modal-template\',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});
6.注册
// 定义
var MyComponent = Vue.extend({
template: \'<div>A custom component!</div>\'
});
// 注册
Vue.component(\'my-component\', MyComponent);
// 创建根实例
new Vue({
el: \'#example\'
});
<div id=\"example\">
<my-component></my-component>
</div>
或者直接写成：
Vue.component(\'my-component\', {
template: \'<div>A custom component!</div>\'
});
// 创建根实例
new Vue({
el: \'#example\'
});
<div id=\"example\">
<my-component></my-component>
</div>
7.使用prop 传递数据
实例一：
Vue.component(\'child\', {
// 声明 props
props: [\'msg\'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: \'<span>{{ msg }}</span>\'
});
<child msg=\"hello!\"></child>
实例二：
Vue.component(\'child\', {
// camelCase in JavaScript
props: [\'myMessage\'],
template: \'<span>{{ myMessage }}</span>\'
});
<!-- kebab-case in HTML -->
<child my-message=\"hello!\"></child>
8.动态props
<div> <input v-model=\"parentMsg\"> <br> <child v-bind:my-message=\"parentMsg\"></child> </div>
使用 v-bind 的缩写语法通常更简单：
<child :my-message=\"parentMsg\"></child>
9.Prop 绑定类型
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
比较语法：
<!-- 默认为单向绑定 --> <child :msg=\"parentMsg\"></child> <!-- 双向绑定 --> <child :msg.sync=\"parentMsg\"></child> <!-- 单次绑定 --> <child :msg.once=\"parentMsg\"></child>
其他实例：
<modal :show.sync=\"showModal\"> <h3 slot=\"header\">custom header</h3> </modal> </div>
10.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象，包含验证要求：
Vue.component(\'example\', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: \'hello\' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + \'\' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
});
其他实例：
Vue.component(\'modal\', {
template: \'#modal-template\',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});
11.使用slot分发内容
<slot> 元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。
有 name 特性的 slot 称为命名 slot。 有 slot 特性的内容将分发到名字相匹配的命名 slot。
例如，假定我们有一个 multi-insertion 组件，它的模板为：
<div> <slot name=\"one\"></slot> <slot></slot> <slot name=\"two\"></slot> </div>
父组件模板：
<multi-insertion> <p slot=\"one\">One</p> <p slot=\"two\">Two</p> <p>Default A</p> </multi-insertion>
渲染结果为：
<div> <p slot=\"one\">One</p> <p>Default A</p> <p slot=\"two\">Two</p> </div>
本文地址：https://www.stayed.cn/item/2456
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)