- 解析
{{XXX}}
- 页面中的数据与内存中的数据双向绑定
v-mdodel
v-show
:暂时隐藏v-if
:直接从dom
中删除
- 绑定数据和元素属性:src、href
<style>
.active {
background: #a10;
}
style>
<a :class="{active: isActive}" :href="url">
点我
a>
var app = new Vue({
el: '#app',
data: {
url: 'http://baidu.com',
img: 'https://dummyimage.com/100x100/ffcc00/ffffff',
klass: 'btn btn-default',
isActive: true,
}
});
- v-on="{事件:函数, 事件:函数}"
- v-on:事件=“函数()”
- 一定要都写在div#app中
- 更多事件参考:https://cn.vuejs.org/v2/guide/events.html
- 适用于:
input、textarea、select
v-model
对变量进行绑定并操作,{{XXX}}输出变量v-model.lazy
失焦更新v-model.trim
删去空格v-model.number
字符串转为number
- v-if
- v-else-if
- v-else
- 和
method
的区别:缓存数据,提高了性能
computed: {
sum: function () {
return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.english);
},
average: function () {
return Math.round(this.sum / 3);
}
},
});
<tr>
<td>总分td>
<td>{{sum}}td>
tr>
<tr>
<td>平均分td>
<td>{{average}}td>
tr>
Vue.component('like', {
template: ''
})
var alert_component = {
template: '',
methods: {
on_click: function () {
alert('Yo.');
}
}
};
new Vue({
el: '#seg1',
components: {
alert: alert_component
}
});
- template必须放在el外面
Vue.component('like', {
template: '#like-component-tpl',
data: function () {
return {
like_count: 10,
liked: false,
}
},
methods: {
toggle_like: function () {
if (!this.liked)
this.like_count++;
else
this.like_count--;
this.liked = !this.liked;
}
}
})
<div id="app">
<like>like>
div>
<template id="like-component-tpl">
<button :class="{liked: liked}" @click="toggle_like()">
{{like_count}}
button>
template>
Vue.component('user', {
template: '{{username}}',
props: ['username'],
methods: {}
})
<div id="app">
<user username="biaoyansu">user>
div>
Vue.component('balance', {
template: `
//监听事件
您的余额:¥98逸
`,
methods: {
show_balance: function(data) {
this.show = true;
console.log('data:', data);
}
},
data: function() {
return {
show: false,
}
}
});
Vue.component('show', {
template: '',
methods: {
on_click() {
this.$emit('show-balance', {a: 1, b: 2}); //$emit向父级元素传递事件,触发一个事件
}
}
});
new Vue({
el: '#app',
})
- 模板必须有最外层根元素
div
等
var Event = new Vue(); //调度器
Vue.component('huahua', {
template: `
我说:
`,
methods: {
on_change: function () {
Event.$emit('huahua-said-something', this.i_said); //$emit触发器返回函数名和函数值
}
},
data: function () {
return {
i_said: '',
}
}
})
Vue.component('shuandan', {
template: `花花说:{{huahua_said}}`,
data: function () {
return {
huahua_said: '',
};
},
mounted: function () { //钩子,生命周期完成后,成熟后触发事件
var me = this;
Event.$on('huahua-said-something', function(data) {
me.huahua_said = data;
});
}
})
new Vue({
el: '#app',
})
filter
和计算属性类似,简单的用filter
,复杂的用计算属性,计算属性有缓存
Vue.filter('meter', function (val, unit) {
val = val || 0; //无val默认值为0
unit = unit || 'm'; //无unit默认值为m
return (val / 1000).toFixed(2) + unit;
});
Vue.filter('currency', function (val, unit) {
val = val || 0;
unit = unit || '元';
return val + unit;
});
new Vue({
el: '#app',
data: {
price: 10,
length: 10,
}
})
<div>
<input v-model="length"> mm
<br>
{{length | meter}}
div>
<hr>
<div>
<input v-model="price">
<br>
{{ price | currency('USD') }}
div>
Vue.directive('pin', function (el, binding) {
var pinned = binding.value; //默认为false
console.log(pinned)
if (pinned) {
el.style.position = 'fixed';
el.style.top = '10px';
el.style.left = '10px';
} else {
el.style.position = 'static';
}
})
new Vue({
el: '#app',
data: {
card1: {
pinned: false,
},
card2: {
pinned: false,
},
}
})
<div v-pin="card1.pinned" class="card">
<button @click="card1.pinned = !card1.pinned">钉住/取消button>
Lorem ipsum dolor sit amet, consectetur
div>
<div v-pin="card2.pinned" class="card">
<a @click="card2.pinned = !card2.pinned" href="#">pin ita>
Lorem ipsum dolor sit amet, consectetur
div>
Vue.directive('pin', function (el, binding) {
var pinned = binding.value;
//modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
var position = binding.modifiers;
var warning = binding.arg; //arg紧跟:
if (pinned) {
el.style.position = 'fixed';
for (var key in position) {
if (position[key]) {
el.style[key] = '10px';
}
}
if (warning === 'true') {
el.style.background = 'yellow';
}
} else {
el.style.position = 'static';
}
})
new Vue({
el: '#app',
data: {
card1: {
pinned: false,
},
card2: {
pinned: false,
},
}
})
<div v-pin:true.bottom.left="card1.pinned" class="card">
<button @click="card1.pinned = !card1.pinned">钉住/取消button>
Lorem ipsum dolor sit amet, consectetur
div>
<div v-pin="card2.pinned" class="card">
<a @click="card2.pinned = !card2.pinned" href="#">pin ita>
Lorem ipsum dolor sit amet, consectetur
div>
###混合 mixins
component
中代码复用
var base = {
methods: {
show: function () {
this.visible = true;
},
hide: function () {
this.visible = false;
},
toggle: function () {
this.visible = !this.visible;
}
},
data: function () {
return {
visible: false,
}
}
};
Vue.component('tooltip', {
template: `
bys
白岩松
`,
mixins: [base],
data: function () {
return {
visible: true,
}
}
});
Vue.component('popup', {
template: `
X
title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum, iusto non nostrum porro ratione. Dolor dolorem id impedit. Dolore excepturi exercitationem incidunt iste magnam odio quas temporibus. Assumenda, magni.
`,
mixins: [base]
});
new Vue({
el: '#app',
data: {}
})
<div id="app">
<tooltip>tooltip>
<popup>popup>
div>
- 相当于
component
中的变量
<div id="app">
<panel>
<div slot="title">
Yo.
div>
<div slot="content">
Yo
Yo
Yo
div>
panel>
div>
<template id="panel-tpl">
<div class="panel">
<div class="title">
<slot name="title">slot>
div>
<div class="content">
<slot name="content">slot>
div>
<div class="footer">
<slot name="footer">
更多信息
slot>
div>
div>
template>
无整页刷新,表单数据点回来仍保留
var routes = [
{
path: '/',
component: {
template: `
首页
`,
},
},
{
path: '/about',
component: {
template: `
关于我们
`,
},
},
];
var router = new VueRouter({
routes: routes,
});
new Vue({
el: '#app',
router: router,
});
<div id="app">
<div>
<router-link to="/">首页router-link>
<router-link to="/about">关于我们router-link>
div>
<div>
<router-view>router-view>
div>
div>
path: '/user/:name',
component: {
template: `
我叫:{{$route.params.name}}
我今年:{{$route.query.age}}岁了
`,
},
<div id="app">
<div>
<router-link to="/">首页router-link>
<router-link to="/about">关于我们router-link>
<router-link to="/user/王花花">王花花router-link>
<router-link to="/user/李拴蛋">李拴蛋router-link>
div>
<div>
<router-view>router-view>
div>
div>
var routes = [
{
path: '/',
component: {
template: `
首页
`,
},
},
{
path: '/about',
component: {
template: `
关于我们
`,
},
},
{
path: '/user/:name',
component: {
template: `
我叫:{{$route.params.name}}
更多信息
`,
},
children: [
{
path: 'more',
component: {
template: `
用户{{$route.params.name}}的详细信息
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci cum deleniti doloribus expedita inventore natus officiis quod quos similique voluptate! Distinctio nisi sequi tenetur voluptatum? Debitis iste neque pariatur voluptatibus?
`
}
}
]
},
];
var router = new VueRouter({
routes: routes,
});
<div id="app">
<div>
<router-link to="/">首页router-link>
<router-link to="/about">关于我们router-link>
<router-link to="/user/王花花">王花花router-link>
<router-link to="/user/李拴蛋">李拴蛋router-link>
div>
<div>
<router-view>router-view>
div>
div>
var routes = [
{
path: '/',
component: {
template: `
首页
`,
}
},
{
path: '/user',
components: {
sidebar: {
template: `
- 用户列表
- 权限管理
`
},
content: {
template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti in, laborum molestias necessitatibus optio perferendis quaerat quas qui quisquam sapiente. Architecto corporis eos eum libero optio, perspiciatis quo rem vel!
`
}
}
},
{
path: '/post',
components: {
sidebar: {
template: `
- 帖子列表
- 标签管理
`
},
content: {
template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti in, laborum molestias necessitatibus optio perferendis quaerat quas qui quisquam sapiente. Architecto corporis eos eum libero optio, perspiciatis quo rem vel!
`
}
}
}
];
访问限制,中间件,组件的生命周期
var routes = [
{
path: '/',
component: {
template: `首页
`
}
},
{
path: '/login',
component: {
template: `登录
`
}
},
{
path: '/post',
component: {
template: `帖子管理
`
}
},
];
var router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) {
var logged_in = true;
if (!logged_in && to.path == '/post')
next('/login');
else
next();
});
router.afterEach(function (to, from) {
});
使用meta元数据进行访问限制
var routes = [
{
path: '/',
component: {
template: `首页
`
}
},
{
path: '/a',
meta: {
login_required: true,
},
component: {
template: `A
`
}
},
{
path: '/login',
component: {
template: `登录
`
}
},
{
path: '/post',
meta: {
login_required: true
},
component: {
template: `
帖子管理
后座
`,
},
children: [
{
path: 'rain',
component: {
template: `雨天asdf后座
`
}
}
]
},
];
var router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) {
var logged_in = true;
if (!logged_in && to.matched.some(function (item) {
return item.meta.login_required;
}))
next('/login');
else
next();
});