vue教程

VueJs

每个new Vue中的el只能有一个，只要在这个最大的el下的元素无论路径多深都能够被访问到

如果想要对不在最大的el下的元素进行访问，则按照上一个重新new Vue一个即可

声明式渲染

HTML

<div id="app">

{{ message }}

</div>

JS

<script>

var vue = new Vue({

el:"#app",

data:{

message:'hello world'

}

})

</script>

v-bind绑定样式 'v-bind:'=':'

HTML

<div id="app">

<img v-bind:src="src">

<a v-bind:href="url">123</a>

<a :href="url">123</a>

<a href="{{ url }}">123</a>

<span v-bind:title="message">456</span>

</div>

JS

<script>

var vue = new Vue({

el:"#app",

data:{

url:"http://www.baidu.com",

src:"xxxxx",

message:'you load at' + new Date()

}

})

</script>

循环与条件

v-if

HTML

<div class="app">

<span v-if="seen">123</span>

</div>

JS

<script>

var vue=new Vue({

el:".app",

data:{

seen:true(false)

}

})

</script>

v-else,v-else-if,v-else必须跟在v-if或v-else-if后面

HTML

<div v-if="type === 'A'">

A

</div>

<div v-else-if="type === 'B'">

B

</div>

<div v-else>

C

</div>

###使用key控制元素的可重用性，不使用key时，会直接复用已有的元素而不是从头渲染

，当input中输入"sth"后，切换到同级控制的input中会自动保存与显示之前的"sth",

即使是类型不同，如"text",'password'同会被保存，若要不重用该"sth"则加上唯一

key值即可，name值不可以

eg:

<div id="app">

<div v-if="logintype === 'username'">

<span>username</span>

//无key值

<input placeholder="username">

//有key值

<input placeholder="username" key="username">

</div>

<div v-else>

<span>password</span>

//无key值

<input placeholder="password">

//有key值

<input placeholder="password" key="password">

</div>

<button @:click="changetype">change</button>

</div>

<script>

var vm=new Vue({

el:'#app',

data:{

logintype:'username'

},

methods:{

changetype:function(){

if(this.logintype === 'username'){

return this.logintype = 'password'

}else{

return this.logintype = 'username'

}

}

}

})

v-for

HTML

<div id="app">

<ol>

//<li v-for="n in 10">{{n}}</li>

<li v-for="item for items">{{item.text}}</li>

</ol>

</div>

JS

<script>

var vue = new Vue({

el:'#app',

data:{

items:[

{text:123},

{text:456},

{text:789}

]

}

})

</script>

数组

#变异方法(会改变原数组)

push(),pop(),shift(),unshift(),splice(),sort(),reverse()

eg: example1.items.push({message:'Baz'})

#重塑数组（不会改变原数组，返回一个新数组，非变异方法）

filter(),concat(),slice()

eg:新数组替换旧数组

example1.items = example1.items.filter(function (item){

return item.message.match(/Foo/)

})

##NOTICE##

Vue不能检测以下变动的数组：

1.利用索引直接设置一个项，eg:vm.items[indexOfItem]=newValue

2.修改数组的长度，eg:vm.items.length = newLength

解决这两种情况

1.

①Vue.set(example1.items,indexOfItem,newValue)……example.items为数组，indexOfItem为数组索引，newValue为新value

②example1.items.splice(indexOfItem,1,newvalue)……indexOfItem为索引值，向后的个数，新值

2.一个参数为删除的个数，从第一个值开始

example1.items.splice(newLength)

splice函数：

arrayobject.splice(index,howmany,item1,...itemx)

index:必须。整数，规定添加/删除项目的位置，从此点开始计算，使用负数可从数组结尾处规定位置。

howmany:必须。要删除的项目数量。如果设置为 0，则不会删除项目。

item1,...itemx。可选。向数组添加的新项目

#显示过滤排序结果，通过显示数组的副本，而不改变原数组

<div id="app">

<span v-for="n in datasize">{{n}}</span>

</div>

<script>

var vue =new Vue({

el:"#app",

data:{

number:[1,2,3,4,5]

},

computed:{

datasize:function(){

var data=[];

for(var i=0;i<this.number.length;i++){

if(this.number[i]%2==0){

data[data.length+1]=this.number[i];

}

}

return data

}

}

})

处理用户输入

v-on绑定监听条件 'v-on'=='@'

eg1: HTML

<div id="app">

<p>{{message}}</p>

<button v-on:click="REST">reset</button>

</div>

JS

<script>

var vue = new Vue({

el:'#app',

data:{

message:'webstrom'

},

methods:{

REST:function(){

this.message=this.message.split('').reserve.join('')

}

}

})

</script>

eg2:

<div id="app">

<button v-on:click="counter += 1">增加</button>

<p>{{counter}}</p>

</div>

<script>

var vue=new Vue({

el:'#app',

data:{

counter:0

}

eg3:

<div id="app">

<button v-on:click="say('hi')">say hi</button>

</div>

<script>

var vue=new Vue({

el:'#app',

methods:{

say:function(value){

alert(value)

}

eg4:内联语句中访问原生DOM事件，通过特殊变量$event传入进去

<div id="app">

<button v-on:click="warn('Form cannot be submited yet.',$event)">submit</button>

</div>

<script>

var vue=new Vue({

el:'#app',

methods:{

warn:function(message,event){

if(event) event.preventDefault()

alert(message)

}

}

})

}

})

})

#事件修饰符

<!--

!

!

!

-->

#按键修饰符

监测键盘的键值

eg1:

//只有在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

***通过全局config.keyCodes对象自定义按键修饰符别名***

//可以使用v-on:keyup.f1

Vue.config.keyCodes.f1=112

##

v2.1.0后新增

.ctrl

.alt

.shift

.meta

//Alt+C

<input @keyup.alt.67="clear">

//Ctrl+Click

<div @click.ctrl="dosomething">do somethong</div>

v-model 只能用在<input><select><textarea>等表单元素实现双向绑定，在data与dom上内容保持一致

eg1:文本

HTML

<div id="app">

<p>{{ message }}</p>

<input type="text" v-model="message"/>

</div>

JS

<script>

var var = new Vue({

el:'#app',

data:{

message:'hello'

}

})

</script>

eg2:多行文本……加上style="white-space:pre"才能在p中换行

<p style="white-space:pre">{{message}}</p>

<textarea v-model="message"></textarea>

eg3:

HTML

<form id="app">

<!-- text -->

<p>

<input type="text" v-model="message"/>

{{message}}

</p>

<!-- checkbox -->

<p>

<input type="checkbox" v-model="checked"/>

{{checked ? "yes" : "no"}}

</p>

<!-- radio button--->

<p>

<input type="radio" value="one" v-model="picked"/>

<input type="radio" value="two" v-model="picked"/>

{{picked}}

</p>

<!--select-->

<p>

<select v-model="selected">

<option>one</option>

<option>two</option>

</select>

{{selected}}

</p>

<!--multip select-->

<p>

<select v-model="multiSelect" multiple>

<option>one</option>

<option>two</option>

<option>three</option>

</select>

{{multiSelect}}

</p>

<p><pre>{{$data | json 2}}</pre></p>

</from>

JS

<script>

var vue = new Vue({

el:'#app',

data:{

message:'hi!',

checked:true,

picked:'one',

selected:'two',

multiSelect:['one','three']

}

})

</script>

v-show

v-show的作用类似v-if,区别在于v-show的值为false时，css值仍然显示，只是变为disabled。而v-if不会显示

v-show中不支持<template>

v-model的修饰符

.lazy

在"change"而不是"input"事件中更新

<input v-model.lazy="msg">

.number

将输入自动转为Number类型，如果输入为非数字型，则以字符串类型计算

<input v-model.number="age">

.trim

自动过滤输入的首位空格

<input v-model.trim="msg">

组件(component)（标签）

注册一个全局组语法格式：Vue.component(tagName,options)

tagName为组件名，option为配置选项。注册后调用组件的方式<tagName></tagName>

##全局注册

eg1:

HTML

<div id="app">

<sleep></sleep>

</div>

JS

<script>

//注册

Vue.component('sleep',{

template:'<li>time to sleep</li>'

})

//创建根实例

new Vue({

el:'#app'

})

</script>

##局部注册

eg2:

<div id="app">

<runoob></runoob>

</div>

<script>

var Child={

template:'<h1>自定义组件</h1>'

}

//创建根实例

new Vue({

el:'#app',

components:{

//<runoob>将只在父模板可用

'runoob':Chile

}

})

</script>

模板，由于当浏览器解析后才能获取模板内容，因此很多的自定义模板不能被加载出来。

常见的限制:

1.a不能包含其它的交互元素(如按钮，链接)

2.ul和ol只能直接包含li

3.select只能包含option和optgroup

4.table只能直接包含thead,tbody,tfoot,tr,caption,col,colgroup

5.tr只能直接包含th和td

6.option只能出现在其它元素内部

eg:

<table>

<my-row>...</my-row>

</table>

自定义组件<my-row>被认为是无效的内容，解决方法:使用特殊is属性

<table>

<tr is="my-row"></tr>

</table>

向template中传入变量data时，data必须是函数

！！！这是一个错误的例子！！！(无法回显)

Vue.component('sleep',{

template:'<span>{{message}}</span>',

data:{

message:'hello'

}

})

！！正确的例子！！！

出现三个按钮，初始值为0，点击一次增加1，无论点击哪个数据都会同时变化

因为三个组件共享了同一个data

<div id="app">

<sleep></sleep>

<sleep></sleep>

<sleep></sleep>

</div>

<script>

var data={counter:0}

Vue.component('sleep',{

template:'<button v-on:click="counter += 1">{{counter}}</button>',

data:function(){return data}

})

new Vue(

el:'#app'

)

通过每个组件返回一个新的data来解决.点击按钮每个之间相互不影响

<div id="app">

<sleep></sleep>

<sleep></sleep>

<sleep></sleep>

</div>

<script>

Vue.componment('sleep',{

template:'<button v-on:click="counter += 1">{{counter}}</button>',

data:function(return{counter:0})

})

Prop:父组件用来传递数据的一个自定义属性，父组件通过props把数据传给子组件，子组件

需要显式的用props选项声明“prop”

也就是说通过props的值来显示的代替可见的某值，用todo代替item

eg1

<div id="app">

<sleep message="hello"></sleep>

</div>

<script>

//注册

Vue.component('sleep',{

//声明props

props:['message'],

templats:'<span>{{message}}</span>'

})

//创建根实例

new Vue({

el:'#app'

})

eg2: HTML

<div id="app">

<ol>

<sleep v-for="item in items" v-bind:todo="item"></sleep>

</ol>

</div>

JS

<script>

Vue.component('sleep',{

props:['todo'],

template:'<li>{{todo.text}}</li>'

});

new Vue({

el:"#app",

data:{

items:[

{text:'apple'},

{text:'orange'},

{text:'banana'}

]

}

})

</script>

v-for循环

v-for对父作用于属性有完全访问权限，v-for支持一个可选的第二参数作为当前项的索引

eg:

<ul id="app">

<li v-for="(item,index)in items">

{{message}}-{{index}}-{{item.text}}

</li>

</ul>

<script>

var vue = new Vue({

el:'#app',

data:{

message:'parent',

items:[

{text:'one'},

{text:'two'},

{text:'three'}

]

}

})

#对象迭代,第一个参数为value第二个参数为key

eg:

<ul id='app'>

<li v-for="(item,key,index) in items">{{index}}-{{key}}-{{item}}</li>

</ul>

<script>

var vm=new Vue({

el:'#app',

data:{

items:{

'a':'b',

'c':'d'

}

}

})

#整数迭代:起始点为1

<span v-for="n in 10">{{n}}</span>

属性与方法

每个Vue实例都会代理其data对象里所有的属性

eg: var data = {a:1}

var vm = new Vue({

data:data

})

<!------>

vm.a === data.a // ->true

//设置属性也会影响到原始数据

vm.a = 2

data.a // ->2

//反之亦然

vm.a = 3

data.a // ->3

除了data属性，Vue实例有其它的实例属性和方法，这些属性与方法都有前缀$,

以便与代理的data属性区分。

eg:

var data ={a:1}

var vm = new Vue({

el:'#example',

data:data

})

<!----------->

vm.$data === data // ->true

vm.$el === document.getElementById('example') // ->true

//$watch是一个实例方法

vm.$watch('a'. function(newVal,oldVal){

//这个回调将在'vm.a'改变后调用

})

模板语法

文本

v-once:执行一次性的插值，当数据改变时，插值处的内容不会被更新

<span v-once>{{message}}</span>

<input v-model="message"/>

纯HTML

v-html:输出html格式的内容

<div v-html="url"></div>

data:{

url:'<input type="password">'

}

属性

通过v-bind绑定

Javascript表达式,只有单个表达式能够生效

eg:

{{number+1}}

{{ok ? 'yes' : 'no'}}

{{ message.split('').reserve().join('')}}

<div v-bind:id="'list-' + id"></div>

过滤器:{{message | filterA }}

过滤器可以串联：{{message | filterA | filterB}}

因为过滤器是javascript函数，因此可以接受参数

{{message | fileterA('arg1',args2)}}

这里，字符串'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数

eg: HTML

<div id="app">

{{message | capitalize}}

</div>

JS

<script>

var vm= new Vue({

el:'#app',

data:{

message:'ppp'

},

filters:{

capitalize:function(value){

if(!value) return ''

value = value.toString()

return value.charAt(0).toUpperCase()+value.slice(1)

}

}

})

</script>

计算属性

computed是依赖于缓存的，只要缓存的数据值不发生改变，就不会重新获取值，直接返回上次的结果。

不希望有缓存使用method

eg1: HTML

<div id="app">

<p>{{message}}</p>

<p>{{resmessage}}</p>

</div>

JS

<script>

var vue = new Vue({

el:'#app',

data:{

message:'hello'

},

computed:{

//计算属性的getter

resmessage:function(){

//'this'指向vm实例

return this.message.split('').reserve().join('')

}

}

})

</script>

eg2: HTML

<div id="app">

{{fullname}}

</div>

JS

<script>

var vm=var Vue({

el:'#app',

data:{

firstname:'foo',

lastname:'bar'

},

computed:{

fullname:function(){

return this.firstname + ' '+this.lastname

}

}

})

</script>

eg3:computed默认属性为getter,需要时可以提供一个setter

HTML

<div id="app">

{{fullname}}

</div>

JS

<script>

var vm=new Vue({

el:'#app',

data:{

firstname:'foo',

lastname:''bar

},

computed:{

fullname:{

//getter

get:function(){

return this.firstname + ' '+this.lastname

},

//setter

set:function(newvalue){

var names = newvalue.split(' ')

this.firstname = names[0]

this.lastname = names[names.length-1]

}

}

}

})

</script>

#####此时运行vm.fullname='john doe'时，setter会被调用，vm.firstname和vm.lastname也会被更新

$watch属性，用于观察Vue实例上数据的变动

！！！！目前未明白

css与style绑定

#对象语法

eg: HTML

<div class="static" v-bind:class="{ active:isActive,'text-danger':hasError}">

</div>

JS

<script>

data:{

isActive:true,

hasError:false

}

</script>

结果：<div class="static active"></div>

eg2: HTML

<div v-bind:class="classObject"></div>

JS

data:{

classObject:{

active:true,

'text-danger':false

}

}

结果：<div class="static active"></div>

eg3: HTML

<div v-bind:class="classObject"></div>

JS

data:{

isActive:true,

error:null

},

computed:{

classObject:function(){

return {

active:this.isActive && !this.error,

'text-danger':this.error && this.error.type === 'fatal',

}

}

}

#数组语法

eg1: HTML

<div v-bind:class="[activeclass,errorclass]">

JS

data:{

activeclass:'active',

errorclass:'text-danger'

}

结果：<div class="active text-danger"></div>

eg2: HTML

<div v-bind:class="[isactive ? activeclass : '',errorclass]">

始终添加errorclass，但是只有在isactive是true时添加activeclass

eg3:

存在多个class时

HTML

<div v-bind:class="[{active:isactive},errorclass]">

#用在组件上

eg1: JS

Vue.component('my-component',{

template:'<p class="foo bar">Hi</p>'

})

HTML

<my-component class="baz boo"></my-component>

结果：<p class="foo bar baz boo">Hi</p>

eg2: HTML

<my-component v-bind:class="{active:isactive}"></my-component>

当isactive为true时：

结果：<p class="foo bar active"></p>

绑定内联样式

eg1: HTML

<div v-bind:style="{color:activecolor, fontsize: fontsize +'px'}">

JS

data:{

activecolor:'red',

fontsize:30

}

eg2: HTML

<div v-bind:style="styleobject"></div>

JS

data:{

styleobject:{

color:'red',

fontsize:'30px'

}

}

eg3: <div v-bind:style="[basestyles, overidingstyle]">