表单控件绑定
- v-model
- input type=”text”
为表单控件元素创建双向数据绑定。(将JS变量的值“快速”设定到控件上,然后将用户输入的内容“快速”设置会JS变量)
(ps: input属性有很多,这次讲的文本属性。其他还有单选/复选/下拉框等。)
vue.js会将用户输入内容动态绑定回message变量
表单修饰符
- .lazy
- .number
- .trim
.lazy
用户输入内容时不做绑定数据的更新处理,在控件的onchange事件(光标离开输入框时)中更新绑定的变量.
vue.js默认的行为,当用户在一个文本框中输入内容时,它在用户输入的过程中会动态绑定它绑定的这个变量。那么加上 .lazy 之后,用户输入时不做任何的处理,在等用户输入完之后,才做变量的绑定,目的是提高页面的处理效率
.number
将用户输入的内容转换为数值类型,如果用户输入非数值的时候,则返回NaN。
.trim
自动去掉用户输入内容两端的空格。
组件
Component,Portlet
组件就是页面上的一小块区域内容,完成一个小的页面功能
<body>
<div id="app">
<today-weather></today-weather>
</div>
<script>
Vue.component('today-weather', {
template:'<div>是是是,对对对,恩恩恩</div>'
});
var app = new Vue({
el: '#app',
});
</script>
</body>
这个是全局性的
- 组件的局部注册
Vue.js的组件不仅可以单独声明注册使用,还可以在Vue实例中进行局部注册使用。
var WeatherComponent = {
template: '<div>今天下雨,随它去吧!</div>'
};
var app = new Vue({ //这里就是所谓的vue实例
el: '#app',
data: {
},
components: {
'my-weather': WeatherComponent
},
});
组建 :数据
* 组建的数据函数
为Vue.js组件添加数据,使组件可以动态显示各种数据,注意是数据函数,不是数据属性。
data: function(){
return{
message:'学习使我快乐'
};
}
组件:传递数据
* 为组件传递数据
制作可接收参数的组件
<div id="app">
<h1>你的成绩评价</h1>
<test-result :score="50"></test-result>
<test-result :score="65"></test-result>
<test-result :score="90"></test-result>
<test-result :score="20"></test-result>
</div>
<script>
Vue.component('test-result', {
props:['score'],
template:'<div><strong>{{score}}分.{{testResult}} </strong></div>',
computed: {
testResult: function() {
var strResult = "";
if (this.score < 60)
strResult = "不及格";
else if (this.score < 90)
strResult = "中等生";
else if (this.score <= 100)
strResult = "优等生";
else if (this.score > 100)
strResult = "哈麻批,分数不对,重写";
return strResult;
}
}
});
var app = new Vue({
el: '#app',
});
</script>
组件:传递变量
* 为组件传递变量数据
制作可接受变量参数的组件。
<div id="app">
<div>请输入您的名字:<input v-model="myname"></div>
<hr>
<say-hello :pname="myname"></say-hello>
</div>
<script>
Vue.component('say-hello', {
props:['pname'],
template:'<div>你好, <strong>{{pname}}</strong>!</div>',
});
var app = new Vue({
el: '#app',
data: {
myname: 'billy'
}
});
</script>
组件:参数验证
* preps:组件参数验证语法
为组件中接受到的变量进行逻辑验证。
<body>
<div id="app">
<h3>身世之谜</h3>
<show-member-info name="koma" :age="25" :detail="{address:'earth',language:'世界语'}"></show-member-info>
</div>
<script>
Vue.component('show-member-info'{
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
validator: function (value) {
return value >= 0 && value <= 100;
}
},
detail: {
type: Object,
default: function() {
return {
address: 'ws',
language: 'English',
};
}
},
},
template: '<div>姓名:{{this.name}}<br/>'
* '年龄:{{this.age}}岁<br/>'
* '地址:{{this.detail.address}}<br/>'
* '语言:{{this.detail.language}} </div>'
});
var app = new Vue({
el: '#app',
});
</script>
</body>
组件叫显示人的内部信息,有人的名字年龄和详细信息,详细信息是一个对象。
对传进来的参数进行验证。
首先是全局性的组件定义,Vue.component
然后props是一个属性集合,里面是java脚本的对象,每一个对象就是一个参数名。
里面的detail是一个属性,在属性里可以描述多个内容,定义了一个object对象,如果没给对象赋值,默认返回初始的地址和语言。
组件:事件传递
* v-on
* $emit
v-on
侦听组件事件,当组件触发事件后进行事件处理。
$emit
触发事件,并将数据提交给事件侦听者。、
<div id="app">
<h1>人生加法</h1>
<add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
<hr>
<h3>{{result}}</h3>
</div>
<script>
Vue.component('add-method', {
props:['a','b'],
template:'<div><button v-on:click="add"加吧</button></div>'
methods: {
add:function(){
var value = 0;
value = this.a + this.b;
this.$emit('add_event,'{
result:value
});
}
},
});
var app = new Vue({
el: '#app',
});
</script>
前面的组件系列都是父组件给子组件传递参数。这个事件传递是子组件通过事件传递给父组件。
v-on一般用在父组件当中,侦听子组件,当事件发生后进行处理。
父组件调用子组件的时候通过v-on注册一个侦听子组件add_event事件的这么一个方法,方法名叫”getAddResult”
add-method是子组件名,a,b是子组件的一个参数,如果子组件触发add_event方法之后,会调用父组件的”getAddResult”这个函数
组件:slot插槽
* slot
slot是父组件与子组件的通讯方式。可以将父组件的内容显示在子组件当中.