vue.js第三天

一。v-model

实现input输入框的双向绑定，在input中修改，vue对象中的数据也会修改，

vue对象中的数据修改，input输入框的内容也会修改。

是一个复合指令，是v-bind修改value 和 v-on绑定input事件的结合

1.与radio（单选框）结合

<div id="main">
    <input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女
    <h1>{{sex}}</h1>
  </div>
</body>
<script>
  const o = new Vue({
    el:'#main',
    data:{
      sex:'男',
    }
  })
</script>

2.与复选框结合

1.checkbox单选
  <div id="main">
    <label>
      <input type="checkbox" id="agree" v-model="isagree">同意协议
    </label>
    <br>
    您选择的是{{isagree}}
    <br>
    <button v-bind:disabled="!isagree">下一步</button>
  </div>


<script>
    const o = new Vue({
      el:'#main',
      data:{
        isagree:false,
      }
    })
  </script>

<div id="main">
    <input type="checkbox" value="Phigros" v-model="games">Phigros
    <input type="checkbox" value="MushDash" v-model="games">MushDash
    <input type="checkbox" value="主播女孩重度依赖" v-model="games">主播女孩重度依赖
    <input type="checkbox" value="明日方舟" v-model="games">明日方舟
    <br>
    <h1>您的爱好是{{games}}</h1>
  </div>
  <script>
    const o = new Vue({
      el:'#main',
      data:{
        games:[],
      }
    })
  </script>

3.与select结合

<div id="main">
    <select id="" v-model="foods">
      <option value="苹果">苹果</option>
      <option value="榴莲">榴莲</option>
      <option value="大猪蹄子">大猪蹄子</option>
      <option value="臭豆腐">臭豆腐</option>
    </select>
    <h1>您选择的是{{food}}</h1>
  </div>

  <script>
    const o = new Vue({
      el:"#main",
      data:{
        food:'榴莲',
      }
    })
  </script>

<select id="" v-model="foods" multiple>
      <option value="苹果">苹果</option>
      <option value="榴莲">榴莲</option>
      <option value="大猪蹄子">大猪蹄子</option>
      <option value="臭豆腐">臭豆腐</option>
    </select>
    <h1>您选择的是{{foods}}</h1>

<script>
    const o = new Vue({
      el:"#main",
      data:{
        foods:[],
      }
    })
  </script>

4.值绑定

<div id="main">
    <label v-for="item in OriginGames">
      <input type="checkbox" v-bind:value="item" v-model="games">{{item}}
    </label>
    <br>
    <h3>您的爱好是{{games}}</h3>
  </div>
  <script>
    const o = new Vue({
      el:'#main',
      data:{
        games:[],
        OriginGames:["Phigros","MushDash","主播女孩重度依赖","明日方舟"],
      }
    })

5.修饰符

 <!-- 1.lazy  失去焦点或按下回车才会刷新 -->
  <div id="main">
    <input type="text" v-model.lazy='message'>
    <h3>
      {{message}}
    </h3>

    <!-- 2.number 在输入框中获取的字符串转化为数字-->
    <input type="text" v-model.number="age">
    <h3>{{age}}--{{typeof age}}</h3>

    <!-- 3.trim 删除字符串首尾的空格 -->
    <input type="text" v-model='name'>
    <h3>{{name}}</h3>
  </div>
  <script>
    const o = new Vue({
      el:'#main',
      data:{
        message:'你好',
        age:18,
        name:'',
      }
    })
  </script>

二。组件化

1.思想

将页面拆分为一个个组件，每个组件中拥有许多小组件

小组件尽可能提高复用性

2.基本使用

1.创建组件构造器

2.注册组件

3.使用组件

  <!-- 3.使用 -->
  <div id="main">
    <mycpn></mycpn>
    <mycpn></mycpn>
    <mycpn></mycpn>
  </div>
  
  <script src="../环境/vue.min.js"></script>
  <script>
    // 1.创建组件构造器
    const cpnc = Vue.extend({
      template: `
        <div>
          <h1>我是标题</h1>
          <p>段落1</p>
          <p>段落2</p>
      </div>`,
    })

    // 2.注册组件
    Vue.component('mycpn',cpnc);//第一个参数为注册的html标签名（必须全部用小写)，第二个参数为组件构造器

    const app = new Vue({
      el:'#main',
    })
  </script>

3.全局组件和局部组件

全局组件可以在多个vue对象中使用，局部组件只能在定义的vue对象中使用，上面的一种方式注册的是全局组件。

局部组件注册方式如下

<script src="../环境/vue.min.js"></script>
  <script>
    const cpnc = Vue.extend({
      template:`
        <div>
          <h1>我是标题</h1>
          <p>段落1</p>
          <p>段落2</p>
      </div>`,
    })
    const o = new Vue({
        el:'#main',
        data:{
          s:1,
        },
        components:{
          mycpn:cpnc,
        }
      })
  </script>

4.父组件和子组件

1.vue实例对象可以看作一个root组件

2.可以在组件内部注册组件作为子组件，这样可以直接在父组件内使用注册的子组件标签。

 <div id="main">

 <cpn2></cpn2>
  </div>
  <script src="../环境/vue.min.js"></script>

  <script>
    const cpnc1 = Vue.extend({
      template:`
        <div>
          <h1>标题1</h1>
          <p>段落1</p>
          
        </div>
      `,

      
    })

    const cpnc2 = Vue.extend({
      template:`
        <div>
          <h1>标题2</h1>
          <p>段落2</p>
          <cpn1></cpn1>
        </div>
      `,
      components: {
        cpn1:cpnc1,
      }
    })

    const o = new Vue({
      el:'#main',
      data:{

      },
      components: {
        cpn2:cpnc2,
      }
    })
  </script>

 5.语法糖

1.直接将组件构造器的对象作为第二个参数传入（全局和局部都可以使用，以全局为例）。

 Vue.component('mycpn',{
      template: `
        <div>
          <h1>我是标题</h1>
          <p>段落1</p>
          <p>段落2</p>
      </div>`
    });//第一个参数为注册的html标签名（必须全部用小写)，第二个参数为组件构造器的对象

6.组件模板的分离写法

<script type="text/x-template" id="cpn1">
    <div>
      <h1>我是标题</h1>
      <p>段落1</p>
      <p>段落2</p>
    </div>
  </script>

<template id="cpn1">
    <div>
      <h1>我是标题</h1>
      <p>段落1</p>
      <p>段落2</p>
    </div>
  </template>

 Vue.component('mycpn',{
      template:'#cpn1',
    });

7.组件的data函数

vue组件拥有自己存放数据的地方，组件内的data不是一个对象，而是一个函数，返回一个对象

Vue.component('mycpn',{
      template:'#cpn1',
      data () {
        return {
          title:'我是标题',
          p1:'段落1',
          p2:'段落2',
        }
      }
    });

8.父子组件的通信

1,父传子使用props

2，子传父使用$emit自定义事件

<div id="main">
    <cpnc v-bind:cgames="games" :cage="age"></cpnc>
  </div>

  <template id="cpn">
    <div>
      <h1>{{cgames}}</h1>
      <h1>{{cage}}</h1>
    </div>
  </template>

  <script>
    const cpnc = {
      template:'#cpn',
      data(){
        return {}
      },
      props: ['cgames','cage'],//propS里面的属性必须是小写，驼峰标识用-转化
    }
    
    const o = new Vue({
      el:'#main',
      data:{
        games:['phigros','主播女孩重度依赖','明日方舟'],
        age:18
      },
      components: {
        cpn:cpnc,
      }
    })

 <div id="main">
    <cpnc @itemclick="print"></cpnc>
    <!-- 这里省略参数会默认将之前的参数传递 -->
  </div>

  <template id="cpn">
    <div>
      <button v-for="item in games"
              @click = 'go(item)'>{{item}}</button>
    </div>
  </template>

  <script src="../环境/vue.min.js"></script>
  <script>
    const cpnc = {
      template:'#cpn',
      data(){
        return {games:['phigros','主播女孩重度依赖','明日方舟'],}
      },
      methods: {
        go(item){
          //向父组件发射事件,自定义事件
          this.$emit('itemclick',item);
        }
      }
    }
    
    const o = new Vue({
      el:'#main',
      data:{
      },
      components: {
        cpnc:cpnc,
      },
      methods: {
        print(item){
          console.log(item);
        }
      }
    })

    
  </script>