JavaScript的MVVM库Vue.js入门学习笔记
程序员文章站
2023-11-06 16:35:52
一、v-bind 缩写
一、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>
下一篇： 糗大了,都不好意思说出来
推荐阅读
-
JavaScript的MVVM库Vue.js入门学习笔记
-
JavaScript的Vue.js库入门学习教程
-
荐 javascript从入门到跑路-----小文的js学习笔记（17）------动态属性、复制变量值、传递参数和检测类型
-
荐 javascript从入门到跑路-----小文的js学习笔记（18 —1）------作用域以及作用域链
-
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制
-
（新手入门，学习笔记）通过NPM进行Vue.js的安装
-
javascript从入门到跑路-----小文的js学习笔记（18 —2）------ 执行顺序和优先级
-
JavaScript的Vue.js库入门学习教程
-
JavaScript的MVVM库Vue.js入门学习笔记
-
SQL 入门知识——基于MySQL数据库的SQL操作 学习笔记