vue基础知识

文本渲染

<div>{{data中的数据}}</div>
<div v-text="变量名></div>

 条件渲染

v-show 特点：是使用css display属性显示或隐藏

<div v-show="true">css显示<div>
<div v-show="false">css隐藏</div>

v-if 特点：不展示的DOM元素直接被移除

<div v-if="false">直接移除该DOM节点</div>

v-if和v-show使用 切换显示频率较高 建议使用v-show

v-if  、v-else-if  、v-else

<template>
        <div v-if="n == 1">一等奖</div>
        <div v-else-if="n == 2">二等奖</div>
        <div v-else>三等奖</div>    
</template>

<script>
    data(){
        return{
         n:2
        }
    }
</script>

注意：v-if可以和v-else-if  v-else 一起使用，但是结构不能被打断

遍历

v-for

<template>
        <ul>
              // 遍历数组
            <li v-for="(p,index) in arr" key="p.id">
                {{p.id}}--{{p.name}}
            </li>
        </ul>
        <ul>
             //遍历字符串
            <li v-for="(char,index) in str" key="index">
                {{char}}
            </li>
        </ul> 
        <ul>
            // 遍历指定次数
            <li v-for="(num,index) in 5" key="index">
                {{num}}
            </li>
        </ul>
        <ul>
            // 遍历对象
            <li v-for="(value,k) in obj" key="index">
        </ul>
</template>
<script>
    export default{
         data(){
                return{
                    arr:[
                        {id:1,name:"张三"},
                        {id:2,name:"李四"},
                        {id:3,name:"王五"}
                     ],
                    obj:{one:1,tow:2,three:3},
                    str:"hello vue"
                }
            }   
}
</script>

表单数据

        收集表单数据

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

                <input type="radio" >  

                <input type="checkbox">

        v-model的三个修饰符

                lazy：失去焦点后在收集数据

                number：输入字符串转为有效的数字

                trim ：输入首尾空格过滤

账号:<input type="text" v-model.trim="userInfo.account"> 
<br />br />密码:<input type="password" v-model="userInfo.password"><br /><br />
年龄:<input type="number" v-model.number="userInfo.age"> <br /><br />
性别:
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /<br />
爱好:
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br /><br />
地区
<select v-model="userInfo.city">
<option value="">请地区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">杭州</option>
<option value="wuhan">郑州</option>
</ select>

事件

   

// v-on:click="" 
//  简写  @click=""
// 行内事件
 <button @click="msg='我的救星到了！'"></button>
// 事件响应methods中的函数
 <button @click="doit"></button>
 <button @click="doit($event)"></button>
// 事件传参
 <button @click="biaobai('小红')"></button>

事件修饰符

1.   .prevent  阻止默认事件

2.   .stop       阻止事件冒泡

3.   .once      事件触发一次

// 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="show">阻止事件冒泡</a>
// 事件只触发一次
<button @click.once="show">点我试试</button>
// 阻止事件冒泡
<div @click.stop="show">
       <button @click="showInfo">点击</button>
</div>

组件传参

1.父传子   

父组件  

<template>
    //组件
    <step title="一個兩個"></step>
</template>
<script>
import step from "组件路径"
    export default{
            components:{step}
        }
</script>

子组件

<template>
        <div>{{title}}</div>
</template>
<script>
        export defalt{
        props:{
                title:{
                    type:String,
                    default:"一個兩個"
                }
            }
}
</script>

2. 子传父

子组件

<template>
    <button @click="$emit("update",123)">
        点击
    </button>
</template>

父组件

<template>
      <button @update=" num = $event ">复制</button>
        <button>
</template>
 <script>
        export default{
                    data(){num:0}
                methods:{

                     un(){
                            	console.log(this.num);
                    }
                    }
        
            }
</script>

$ref

父组件

<template>
  <div>
    <input type="text" v-model="message" />
    <button @click="passMessageToChild">Pass Message to Child Component</button>
    <child-component ref="childComponentRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    passMessageToChild() {
      const childComponent = this.$refs.childComponentRef;
      childComponent.receiveMessage(this.message);
    }
  }
}
</script>

子组件

<template>
  <div>
    <h3>Child Component</h3>
    <p>Received Message: {{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    receiveMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

$children与$parent 传参