Vue基础汇总实践
1)双向绑定：
{{message}}
new Vue({
el:'#app',
data:{
message:'Hello vue.js'
}
})
- {{todo.text}}
new Vue({
el:'#app',
data:{
todos:[
{text:'学习vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
}
})
{{message}}
new Vue({
el:'#app',
data:{
message:'hello world'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
})
-
{{todo.text}}
new Vue({
el:'#app',
data:{
newTodo:'',
todos:[
{text:'学习Vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
},
methods:{
addTodo:function(){
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo='';
}
},
removeTodo:function(index){
this.todos.splice(index,1);
}
}
})
{{*message}}
{{{raw_html}}}
html特性
new Vue({
el:'#app',
data:{
message:'Hello vue.js',
raw_html:'原始的html',
id:'1'
}
})
{{number+1}}
{{ok ? 'Yes' : 'No'}}
{{message.split('').reverse().join('')}}
{{name | capitalize}}
new Vue({
el:'#app',
data:{
number:2,
ok:false,
message:'123456789',
name:'brucee lee'
}
})
new Vue({
el:'#app',
data:{
url:'http://g.pptv.com'
},
methods:{
dosomething:function(){
alert(this.url);
}
}
})
a={{a}},b={{b}}
{{fullName}}
new Vue({
el:'#app',
data:{
a:1,
firstName:'Micro',
lastName:'Jodon'
},
computed:{
b:function(){
return this.a + 1;
},
/*fullName:function(){
return this.firstName + ' ' + this.lastName;
}*/
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName;
},
set:function(newValue){
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length-1];
}
}
}
})
.static{
width: 200px;
margin: 20px auto;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 18px;
}
.class-a{
background-color: #f00;
}
.class-b{
color: #fff;
}
.class-c{
padding: 5px 0;
}
绑定class
绑定class
绑定class
绑定class
绑定style
绑定style
new Vue({
el:'#app',
data:{
classA:'class-a',
classB:'class-b',
classC:'class-c',
isA:true,
isB:false,
isC:true,
classObject:{
'class-a':true,
'class-b':true
},
styleObject:{
color:'red',
fontSize:'13px',
backgroundColor:'#00f'
},
styleObjectA:{
color:'green',
fontSize:'16px'
},
styleObjectB:{
backgroundColor:'#f0f',
transform:'rotate(7deg)'
}
}
})
对不起！
没关系
标题
段落1
段落2
Hello!
这可能也是一个组件
// 定义
var MyComponent = Vue.extend({
template: 'A custom component!'
});
// 注册
Vue.component('custom-component', MyComponent);
new Vue({
el:'#app',
data:{
ok:true,
isShow:false,
condition:true
},
})
- {{ parentMessage }} - {{ $index }} - {{ item.message }}
- {{key}} : {{val}}
{{ n }}
ul{
list-style: none;
width: 150px;
}
.divider{
height: 2px;
background-color: #00f;
}
span{
padding: 0 2px;
}var vm=new Vue({
el:'#app',
data:{
parentMessage:'水果',
items:[
{ _uid:'001',message:'香蕉'},
{ _uid:'002',message:'橘子'}
],
object:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
//变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.push({message:'苹果'},{message:'梨子'});//推入两项
vm.items.shift();//取出第一项
//非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组
vm.items=vm.items.filter(function (item) {
return item.message.match(/子/);
})
var vm=new Vue({
el:'#app',
methods:{
say:function(msg,event){
alert(msg+","+event.target.tagName);
event.preventDefault();
}
}
});
这是您的评论：
{{message}}
选中的值: {{ checkedNames | json }}
选中的值: {{ picked }}
选中的值: {{ selected }}
选中的值: {{ selecteds | json }}
选中时的值：{{toggle}}
男
女
选中时的值：{{pick}}
var vm=new Vue({
el:'#app',
data: {
checkedNames: [],
options:[
{text:'南京',value:'南京'},
{text:'苏州',value:'苏州'},
{text:'无锡',value:'无锡'}
],
a:'选中',
b:'未选中',
c:'男',
d:'女'
}
});
Hello1
Hello2
/* 必需 */
.expand-transition {
transition: all 0.5s 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;
}
.fade-transition{
transition: all 0.5s ease;
height: 30px;
padding: 10px;
background-color: #2df;
overflow: hidden;
}
.fade-enter, .fade-leave {
padding: 0 10px;
opacity: 0.5;
}var vm=new Vue({
el:'#app',
data: {
show:true,
transitionName:'fade'
},
methods:{
toggle:function(){
if(this.show){
this.show=false;
}else{
this.show=true;
}
}
},
transitions: {
expand: {
beforeEnter: function (el) {
el.textContent = 'beforeEnter'
},
enter: function (el) {
el.textContent = 'enter'
},
afterEnter: function (el) {
el.textContent = 'afterEnter'
},
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
},
leave: function (el) {
el.textContent = 'leave'
},
afterLeave: function (el) {
el.textContent = 'afterLeave'
}
}
}
});
只有我最摇摆
.animated{
width: 150px;
background-color: #2df;
height: 30px;
padding: 10px;
}var vm=new Vue({
el:'#app',
data: {
ok:true
},
methods:{
toggle:function(){
if(this.ok){
this.ok=false;
}else{
this.ok=true;
}
}
},
transitions: {
bounce: {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
}
}
});
看我变一个
.animated{
width: 150px;
background-color: #2df;
height: 30px;
padding: 10px;
}
.bounce-transition {
display: inline-block; /* 否则 scale 动画不起作用 */
}
.bounce-enter {
animation: bounce-in .5s;
}
.bounce-leave {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
var vm=new Vue({
el:'#app',
data: {
ok:true
},
methods:{
toggle:function(){
if(this.ok){
this.ok=false;
}else{
this.ok=true;
}
}
}
});
什么和什么？
.fade-transition{
transition: all 0.5s ease;
height: 30px;
padding: 10px;
background-color: #2df;
overflow: hidden;
}var vm=new Vue({
el:'#app'
});
vm.transition('fade', {
css: false,
enter: function (el, done) {
// 元素已被插入 DOM
// 在动画结束后调用 done
$(el)
.css('opacity', 0)
.animate({ opacity: 1 }, 1000, done)
},
enterCancelled: function (el) {
$(el).stop()
},
leave: function (el, done) {
// 与 enter 相同
$(el).animate({ opacity: 0 }, 1000, done)
},
leaveCancelled: function (el) {
$(el).stop()
}
})
-
{{item.msg}}
#example-1{
width:200px;
margin:20px auto;
font-size:14px;
color:#ff6600;
}
ul {
padding-left: 0;
font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
transition: all .5s ease;
overflow: hidden;
margin: 0;
height: 25px;
}
.bounceInLeft, .bounceOutRight {
opacity: 0;
height: 0;
} var exampleData={
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
};
var exampleVM = new Vue({
el:'#example-1',
data:exampleData,
transitions:{
staggered:{
enterClass:'bounceInLeft',
leaveClass: 'bounceOutRight'
}
}
});
/* exampleVM.transition('stagger', {
stagger: function (index) {
// 每个过渡项目增加 50ms 延时
// 但是最大延时限制为 300ms
return Math.min(300, index * 50)
}
})*/
//定义
/*var myComponent=Vue.extend({
template:'A custom component!'
});*/
//注册
//Vue.component('my-component',myComponent);
//在一个步骤中定义与注册
Vue.component('my-component',{
template:'A custom component!'
});
//创建根实例
new Vue({
el:'#example'
});
//定义
/*var Child=Vue.extend({
template:'A child component!'
});*/
var Parent=Vue.extend({
template:'A parent component! 只能用在父组件模板内
'my-component':{
template:'A child component!'
}
}
});
// 注册父组件
Vue.component('parent-component', Parent);
//创建根实例
new Vue({
el:'#example'
});
.demo{
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
}new Vue({
el:'#example',
data:{
parentMessage:'Message from parent'
},
components:{
child:{
props:['myMessage'],
template:'{{myMessage}}'
}
}
});
.demo{
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
}new Vue({
el:'#example',
components:{
child:{
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, 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 字符串转换为对象
}
}
},
template:'hello world!'
}
}
});
Messages:{{ messages | json }}
.demo{
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
} // 注册子组件,将当前消息派发出去
Vue.component('child',{
template:'#child-template',
data:function(){
return {msg:'hello'}
},
methods:{
notify:function(){
if(this.msg.trim()){
this.$dispatch('child-msg',this.msg);
this.msg='';
}
}
}
});
// 初始化父组件,收到消息时将事件推入一个数组
var parent=new Vue({
el:'#events-example',
data:{
messages:[]
},
methods:{
handleIt:function(msg){
this.messages.push(msg);
}
}
// 在创建实例时 `events` 选项简单地调用 `$on`
/*events:{
'child-msg':function(msg){
this.messages.push(msg);
}
}*/
})
Vue.directive('demo', {
bind: function () {
console.log('demo bound!')
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '
' +
'expression - ' + this.expression + '
' +
'argument - ' + this.arg + '
' +
'modifiers - ' + JSON.stringify(this.modifiers) + '
' +
'value - ' + value
}
});
var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})
Vue.directive('demo-1', function(value){
console.log(value.color);
console.log(value.text);
});
Vue.directive('demo-2',function(value){
console.log(value);
});
Vue.elementDirective('my-directive',{
bind:function(){
console.log(this.el);
}
});
Vue.directive('example',{
params:['a'],
bind:function(){
console.log(this.params.a);
}
});
Vue.directive('two', {
twoWay: true,
bind: function () {
this.handler = function () {
// 将数据写回 vm
// 如果指令这样绑定 v-example="a.b.c"
// 它将用给定值设置 `vm.a.b.c`
this.set(this.el.value)
}.bind(this);
this.el.addEventListener('input', this.handler);
},
unbind: function () {
this.el.removeEventListener('input', this.handler)
}
});
var vm=new Vue({
el: '#demo'
});
ModelValue:{{money | currencyDisplay}}
{{msg | concat userInput}}
.demo{
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
} Vue.filter('reverse',function(value){
return value.split('').reverse().join('');
});
Vue.filter('wrap',function(value,begin,end){
return begin+' '+value+' '+end;
});
Vue.filter('currencyDisplay',{
// model -> view
// 在更新 `` 元素之前格式化值
read:function(val){
return '$'+val.toFixed(2)
},
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
});
Vue.filter('concat',function(value,input){
return value+input;
})
new Vue({
el:'#demo',
data:{
message:'abc',
money:123.45,
msg:'hello',
userInput:'hi'
}
});
.demo{
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
} var myMixin={
created:function(){
this.hello();
},
methods:{
hello:function(){
console.log('hello from mixin!');
}
}
};
// 定义一个组件，使用这个混合对象
var Component = Vue.extend({
mixins: [myMixin]
});
var component = new Component();
new Vue({
el:'#demo'
});
.demo{
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
}var mixin={
created:function(){
console.log('mixin hook called');
},
methods: {
foo: function () {
console.log('foo');
},
conflicting: function () {
console.log('from mixin');
}
}
};
var vm=new Vue({
el:'#demo',
mixins:[mixin],
created:function(){
console.log('component hook called');
},
methods:{
bar: function () {
console.log('bar');
},
conflicting: function () {
console.log('from self');
}
}
});
vm.foo();
vm.bar();
vm.conflicting();//组件优先