vue(1) 基础_组件化_模块化

//   计算属性computed，与methods的区别：有缓存，不必每次重新计算
computed: {
  fullName: function () {
    // 这是一种简写方式, get方法
    return this.message + " " + this.obj.name;
  },
    // fullName:{
    //     get:function(){
    //         return this.message +" "+ this.obj.name;
    //     },
    //     set:function(newValue){
    //         // console.log(newValue)
    //     }
    // }
}

<div>
    <!-- 事件监听v-on，传参问题 -->
    <p @click="btnClick">v-on传参:MouseEvent</p>
    <p @click="btnClick()">v-on传参:undefined</p>
    <p @click="btnClick(123)">v-on传参:123</p>
    <!-- 需要参数、又需要event对象的写法 -->
    <p @click="btnClickAnother(123,$event)">v-on传参:123+event对象</p>
</div>

<div>
    <!-- v-on修饰符 -->
    <!-- .stop，阻止内到外冒泡 -->
    <div @click="outClick">
      <button @click.stop="inClick">按钮</button>
    </div>

    <!-- .prevent阻止默认事件 -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitBtn" />
    </form>

    <!-- 监听键盘某个按键点击，这里监听enter建 -->
    <input type="text" @keyup.enter="keyUp" />

    <!-- .once 只监听一次，用户第一次点击才有效 -->
    <button @click.once="inClick">按键</button>

    <!-- .native 使自定义组件能够使用原生事件, 如@click.native -->
</div>

<div>
  <!-- v-if、v-else-if和v-else的使用 -->
  <div v-if="isShow">v-if的使用</div>
  <div v-else>v-else的使用</div>
  <button @click="vifBtn">控制v-if</button>

  <div>
    <div v-if="isUser">
      <span for="username">用户账号</span>
      <input
             type="text"
             id="username"
             placeholder="请输入用户名"
             key="username"
             />
    </div>
    <div v-else>
      <span for="useremail">用户邮箱</span>
      <input
             type="text"
             id="useremail"
             placeholder="请输入用户邮箱"
             key="email"
             />
    </div>
    <button @click="switchBtn">切换</button>
  </div>
</div>

<input type="text" :value="message" @input="valueChange" />
valueChange(e){
	this.message = e.target.value
}

<!-- 结合radio类型 -->
<label for="male">
  <input type="radio" value="男" v-model="sex" />男
</label>
<label for="female">
  <input type="radio" value="女" v-model="sex" />女
</label>

<!-- 结合checkbox类型 -->
<label for="agree">
  <input type="checkbox" id="agree" v-model="isAgree" />同意协议
</label>

<!-- checkbox多选框 -->
<label :for="item" v-for="item in hobbiesArr">
  <input
         type="checkbox"
         v-model="hobbies"
         :value="item"
         :id="item"
         />{{item}}
</label>

<!-- 结合select类型使用 -->
<select name="" id="" v-model="selectFruit">
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
  <option value="梨子">梨子</option>
  <option value="火龙果">火龙果</option>
</select>

<!-- .lazy 懒加载 -->
<input type="text" v-model.lazy="message" />
<!-- .number 只能输入数字 -->
<input type="text" v-model.number="age" />{{age}} {{typeof(age)}}
<!-- .trim 去除输入的两边空格-->
<input type="text" v-model.trim="name" />

<template id="mycpn">
  <div>分离式写法</div>
</template>
<script>
  const cpn = {
    template:'#mycpn',
    data(){return{}},
  }
  const app = new Vue({
  	el:'#app',
    components:{
      cpn, // 局部注册，只能在app实例中使用，vue实例相当于父组件, cpn是子组件
    }
  })
</script>

<template id="mycpn">
  <div>分离式写法</div>
</template>
<script>
  const cpn = {
    template:'#mycpn',
    data(){return{}},
  }
  Vue.component('cpn1',cpn) // 全局注册可在任一vue实例使用
</script>

// 在子组件中有个属性props，可以是数组/对象
props: {
  	cmessage: String,
    cHobby: {
      type: Array,
        default() {
          // 引用类型，需返回函数
          return ["篮球"];
        },
   	  required: true,
    },
},

methods: {
  itemClick(id) {
    console.log(id);
    // 子组件发射事件, 参数：事件名，参数
    this.$emit("xxx", id);
  },
},

<comp :foo.sync="bar"></comp>
// 会被扩展为
<comp :foo="bar" @update:foo="val => bar = val"></comp>

// 当子组件需要更新foo的值时，需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)

<div id='app'>
	<cpn ref="aaa"></cpn>
</div>

// 子组件：
<slot name="left"><button>左边</button></slot>
<slot name="middle"><button>中间</button></slot>
<slot name="right"><button>右边</button></slot>

// 父组件
<cpn2>
  <span slot="middle">具名插槽</span> // 已废弃
  <template v-slot:middle>
    <span>具名插槽</span>
  </template>
</cpn2>

// 子组件
<template id="cpn3">
  <div>
    <div>作用域插槽:</div>
    <slot :mydata="language">
      <ul>
        <li v-for="item in language">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

// 父组件
<div>
  <cpn3>
    // 2.6.0+使用v-slot
    <template v-slot:default="slot">
      <span>{{slot.mydata.join(' - ')}}</span>
    </template>
  </cpn3>
  <cpn3></cpn3>
</div>

//A.js
function add(a,b){
  return a+b;
}
let obj = {name:'vue'}
// 导出
module.exports = {add, obj} // 用了对象简写形式(es6)

// B.js
let {add} = require('./A.js')
add(5,6);

// A.js
let a = 1;
let b = 2;
let obj = {}
export function add(c,d){return c+d}
export {a,b}
export default obj // 只能存在1个

// B.js
import {a,b} from './A.js' 
// or
import myobj from './A.js' // 为默认
// or
import * from './A.js' // 导入全部