Vue学习小记
Vue的安装及语法
- 解析
{{XXX}}- 页面中的数据与内存中的数据双向绑定
v-mdodelv-show：暂时隐藏v-if：直接从dom中删除
v-for指令
v-bind指令（v-bind:可简写为:）
- 绑定数据和元素属性：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:可简写为@，v-on=不可简写）
- v-on="{事件:函数, 事件:函数}"
- v-on:事件=“函数()”
- 一定要都写在div#app中
- 更多事件参考：https://cn.vuejs.org/v2/guide/events.html
v-model指令及其修饰符
- 适用于：
input、textarea、selectv-model对变量进行绑定并操作，{{XXX}}输出变量v-model.lazy失焦更新v-model.trim删去空格v-model.number字符串转为number
v-model在其他元素及类型上的用法
控制流指令
- 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: `
组件 - 任意及平行组件间通信
- 模板必须有最外层根元素
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>
插槽 slots
- 相当于
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>
vue-router是什么和怎么用
无整页刷新，表单数据点回来仍保留
安装和基本配置
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}}
更多信息
<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: `
帖子管理
后座
雨天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();
});