Vue第三天 v-model与Vue组件化

数据的双向绑定 v-model的使用

v-model的基本使用

Vue中使用v-model指令来实现表单元素和数据的双向绑定.

<div id="app"><input type="text" v-model="message"><div> {{message}}</div></div><script src="./vue.js"></script><script>const vm = new Vue({el:'#app', data:{ message:'nihaoya'}})</script>

v-model的实际原理

v-model其实是一个语法糖,它的背后本质上包含两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

v-model修饰符

lazy：让数据在失去焦点或者回车时才会更新

 <input type="text" v-model.lazy="message">

number:让数据在输入框输入的内容自动转换成数字类型

<input type="text" v-model.number="message">

trim:过滤内容两边的空格

<input type="text" v-model.trim="message">

Vue组件化开发

Vue组件化思想

组简化是Vue.js中的重要思想：
他提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。

组件注册

注册组件的基本步骤

组件使用步骤:
a.创建组件构造器 Vue.extend()
b.注册组件Vue.component()
c.使用组件

 <div id="app"><cpn></cpn></div><script src="./vue.js"></script><script>const cpn = Vue.extend({template:`<div><h2>你好哦</h2></div>`//ES6语法});Vue.component('cpn',cpn);const vm = new Vue({el:'#app',data:{message:'你好呀,李焕英'}})</script>

Vue.extend():
调用Vue.extend()创建的是一个组件构造器
通常在创建组件构造器时,传入template代表我们自定义的组件的模板
该模板就是在使用到组件的地方,就显示的HTML代码
事实上,这种写法在Vue2.x的文档中几乎已经看不到了，现在通常使用它的语法糖形式，如下所示：

  <div id="app"><my-cpn></my-cpn><cpn2></cpn2></div><script src="./vue.js"></script><script>Vue.component('myCpn',{template:`<div><h2>海贼王</h2></div> `})const vm = new Vue({el:'#app',data:{},components:{'cpn2':{template:`<div><h2>海王</h2></div> `}} })</script>

全局组件：Vue.component(‘组件名称’,{
data:组件数据,
template:组件模板内容
})
局部组件：在Vue实例中创建components:{
组件名称:{
template:,
data:
}
}

模板分离的写法

为了将结构变得非常清晰,我们采用对模板进行分离的方法实现Vue组件的创建
Vue提供两种方案来定义HTML模块内容

<script type="text/x-template" > 模板内容</script>

<script type="text/x-template" id="cpn"><div><h2>海王</h2></div></script>

<template>模板内容</template>

<template id="depart"><div><h2>海贼王</h2></div> </template>

组件注册注意事项

组件是一个单独功能模块的封装,不能访问Vue实例数据这个模块有属于自己的HTML模板,也应该有属于自己的数据data.

data必须是一个函数，而且这个函数返回一个对象,对象内部保存着数据
组件模板内容必须是单个根元素
组件模板内容可以是模板字符串
组件命名方式:驼峰命名式短横线式
如果使用驼峰命名式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰命名式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件 ,当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case 更多细节可以进入以下网址查询:
https://cn.vuejs.org/v2/guide/components.html
风格指南

父组件与子组件

<div id="app"><cpn2></cpn2></div><script src="./vue.js"></script><script>// 创建第一个组件(子组件)const cpn1 = Vue.extend({template:`<div><h2>海王</h2></div> `})// 创建第二个组件(父组件)const cpn2 = Vue.extend({template:`<div><h2>海贼王</h2><cpn1><cpn1></div> `,components:{cpn1:cpn1}})// root组件const vm = new Vue({el:'#app',data:{message:'nihaoo'},components:{cpn2:cpn2}}) </script>

父子组件的通信

通过props向子组件传递数据

props属性名规则：在props中使用驼峰形式,模板中需要使用短横线的形式
字符串形式的模板中没有这个限制，
props的值有两种方式:
方式一:字符串数组，数组中的字符串就是传递时的名称

 <div id="app"><cpn v-bind:cmovies="movies" :cmessage="message"></cpn></div><template id="cpn"><div><ul><li v-for="item in cmovies">{{item}} </li></ul><h2>{{cmessage}} </h2></div></template><script src="./vue.js"></script><script>const cpn = {props:['cmovies','cmessage'],template:'#cpn',data(){return {}}}const vm = new Vue({el:'#app',data:{message:'我从今开始守望',movies:['海王','海贼王','复仇者联盟']},components:{cpn}//es6的对象字面量增强语法})</script>

方式二:对象,对象可以设置传递时的类型,也可以设置默认值等

  <div id="app"><cpn v-bind:cmovies="movies" :cmessage="message"></cpn></div><template id="cpn"><div><ul><li v-for="item in cmovies">{{item}} </li></ul><h2>{{cmessage}} </h2></div></template><script src="./vue.js"></script><script>const cpn = {// props:['cmovies','cmessage'],props:{// 类型限制// cmessage:Array,// cmessage:String//提供一些默认值 规定类型为对象和数组时,默认值必须是一个函数。cmovies:{type:Array,default(){return []}, // 默认值require:true //表示该值必须传},cmessage:{type:String,default:[]}},template:'#cpn',data(){return {}}}const vm = new Vue({el:'#app',data:{message:'我从今开始守望',movies:['海王','海贼王','复仇者联盟']},components:{cpn}//es6的对象字面量增强语法})</script>

通过自定义事件向父组件发送消息

自定义事件的流程:

在子组件中,通过$emit()来触发事件
在父组件中,通过v-on来监听子组件事件

// 父组件<div id="app"><cpn @itemclick="cpnclick"></cpn></div>//  子组件<template id="cpn"><div><button v-for="item in categories" @click="btnClick(item)">{{item.name}} </button></div></template><script src="./vue.js"></script><script>const cpn={template:'#cpn',data:function(){return {categories:[{id:001,name:'热门推荐'},{id:002,name:'手机数码'},{id:003,name:'热门推荐'},{id:004,name:'热门推荐'},]}},methods:{btnClick:function(item){// 发射事件this.$emit('itemclick',item);}}}const vm = new Vue({el:'#app',components:{cpn},methods:{cpnclick:function(item){console.log(item.id); }}}) </script>

运行结果: