1,基本的实例化。使用vue的时候,首先要new 一个vue对象 New Vue()
,每一个vue对象绑定一个dom,通过el : "#id"
,其他基本的属性有data ,methods(和components一样有s),computed,filters。下面介绍这属性:
(一)data:
<div id="server">
{{ info}}
</div>
vue直接通过{{}}取data里面的数据。
new Vue({
el :'#server',
data :{
info : "this is a vue "
}
}
);
另: 在html中的v-model,v-bind是绑定data而言的,v-model我理解为value,v-bind可以是忽略这语句直接看紧接着的部分:<p v-bind :class="{change_color}"></p>
这实际上就是class = change_color
,如果后面有:check
实际上是访问data下面的check是否为true(v-bind是单向绑定的)。还有v-show=“check”
,真的话就显示这个信息。v-if v-else
同理。下面对菜鸟学院的一个例子谈下看法。
v-for="item in sites" v-bind:todo="item"
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
for循环出来的对象存在item里面,又自定义属性之后,等价于todo = item
,所以模板引用的是todo.text
,虽然内容是一样的但是模板只能用“属性来引用属性”。
(二)紧接着介绍模板里面数据可以过滤,<span>{{fruit | fliter_null}}</span>
,其实就是把fruit的值穿给fliter_null,注意只有 |
间隔。
filter : {
fliter_null : function (value) {
if(this.fruit.length=0){
return '还没有选择水果哦'
}else {
return '你选择的是'+value.toUpperCase();
}
}
},
filter和data同级,里面声明fliter_null函数,就是一个函数的声明,模板里面取得的是函数的名字。这里暴露了js的自带函数不熟悉。
(三)computed和methods的区别是computed是依赖缓存的,只要依赖发生改变,computed是会自动触发的。下面引用菜鸟学院的代码引出computed有get set
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
对于methods来说,在html中代码为<button @click="click('hello world')">点击我</button>
也尝试了下event全局变量的多个属性,比如event.target.tagname,返回button.
var vm1 = new Vue({
el : '#eve',
methods :{
click : function (event) {
alert(event)
}
}
});
(四) components。自定义控件,比如<he info="hello "></he>
分为全局和局部,如果是全局的话,在该实例(el:”#id”)下都可以用。
Vue.component('he',{
props : ['info'],
template : '<h1>{{info}}这是自定义组件hhh。</h1>'}
);
prop是通信方式,我的理解就是自定义一个属性,hello可以是绑定data动态变化。template是子类替换父类掉该自定义控件。
以上是父类对子类的通信,如果是子类对父类的通信,用$.on $.emit
;
<button-counter v-on:increment="incrementTotal"></button-counter>
自定义组件里面有method,data和template同级,
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
这里的声明函数是对template里面的increment声明,this.$emit('increment')
是触发父类当中v-on:increment="incrementTotal"
从而达到目的。
(五)自定义命令和路由明天继续 (●´∀`●)