Vue学习第三天

Vue03

一.

1.表单绑定v-model

<input type="text" :value="message">

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

<h2>{{message}}</h2>

当输入内容时，用v-model绑定的input的message值会实时改变，

而直接用v-bind绑定的无法改变message值，所以v-model实现了双向绑定

转存失败重新上传取消

<input type="radio" value="男" v-model="sex">男

<input type="radio" value="女" v-model="sex">女

<h2>您选择的性别是：{{sex}}</h2>

sex : "男"

当有v-model时无需name属性也可以单选

转存失败重新上传取消

二.修饰符

转存失败重新上传取消

三.注册组件的基本步骤

1.组件的使用分成三个步骤：

    1.1 创建组件构造器

    1.2 注册组件

    1.3 使用组件

转存失败重新上传取消

2.全局组件和局部组件

<div id="app">

<my-cpn></my-cpn>

<my-cpn></my-cpn>

</div>

const cpnConstructor = Vue.extend({

template : `

<div>

<h2>hello world!</h2>

<h1>hello world!</h1>

</div>

`

})

Vue.component("my-cpn",cpnConstructor);

使用 `` 这种字符串可以换行

这里注册的组件是全局组件，意味着可以在多个Vue实例下使用，

想要注册局部组局可以在单个Vue实例中注册

components : {

  my-cpn : cpnConstructor

}

3.父组件和子组件

<div id="app">

<cpn2></cpn2>

</div>

const cpnC1 = Vue.extend({

template : `

<div>

<h1>构造器1</h1>

</div>

`

})

const cpnC2 = Vue.extend({

template : `

<div>

<h2>构造器2</h2>

<cpn1></cpn1>

</div>

`,

components : {

cpn1 : cpnC1

}

})

 

const app = new Vue({

el : "#app",

data : {

message : "demo"

},

components : {

cpn2 : cpnC2

}

})

4.组件的语法糖注册方式

    1.

Vue.component("cpn1",{

template : `

<h2>hello world</h2>

`

});

    2.

components : {

cpn2 : {

template : `

<h2>hello world</h2>

`

}

}

5.组件模板分离写法

    1.

<script type="text/x-template" id="cpn3">

<h3>cpn3</h3>

</script>

Vue.component("cpn3",{

template : "#cpn3"

})

    2.

<template id="cpn3">

<h3>cpn3</h3>

</template>

6.组件数据存放

转存失败重新上传取消

Vue.component("cpn3",{

template : "#cpn3",

data(){

return {

title : "title--------"

}

}

})

7.组件通信-父子组件传递数据

    1.props基本用法 父传子

转存失败重新上传取消

<div id="app">

<cpn :cmovies="movies" :cmessage="message"></cpn>

</div>

<template id="temp">

<div>

<p>{{cmessage}}</p>

<p v-for="m in cmovies">{{m}}</p>

</div>

</template>

data : {

message : "demo",

movies : ["火影忍者","海贼王","蜡笔小新"]

}

//两种写法

props : ["cmovies","cmessage"]

props : {

    cmovies : Array,

    cmessage : String

    //cmessage: {

        type: String,

        defalut: "123123123"

        required: true     -> 必须传值不然报错

    }

    //cmovies: {

        type: Array,

        defalut() {

            return []

        }

    }

}

如果传入的为（cMessage）驼峰标识，则在绑定的时候用 :c-message="message"

    2.自定义事件 子传父

转存失败重新上传取消