绑定事件练习、组件练习、路由练习

发布于：2022-06-07 11:15:24  栏目：技术文档

app.vue

<template>
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">about</router-link>
    <br>
    <input type="text" v-model="password">
    <div v-once>{{password}}</div>
    <div>{{password}}</div>
    <div v-text="password"></div>
    <div v-html="htmlcode"></div>
    <div v-pre>{{htmlcode}}</div>
    <div :title="btn">按钮</div>
    <OneCom></OneCom>
    <OneCom><div>Hello wolrd!</div></OneCom>
    <OneCom :msg="msg"></OneCom>
    <router-view />
  </div>
</template>
<style>
</style>
<script>
import OneCom from './components/OneCom.vue';
  export default{
    data(){
      return{
        password: "默认密码：123",
        htmlcode: "<i>Hi, Dave</i>",
        msg:'www.php.cn',
        btn: "button"
      };
    },
    methods: {
      clicked(){
        console.log("hi dave");
      },
      sayhi(){
        console.log("Hahaha");
      }
    },
    components:{
      OneCom,
    }
  }
</script>

OneCom.vue

<template>
    <div>
        this is one com.
    </div>
    <div>{{msg}}</div>
    <div>{{getmsg()}}</div>
    <slot></slot>
</template>
<script>
    export default{
        props:['msg'],
        methods:{
            getmsg(){
                this.$parent.sayhi();
            }
        }
    }
</script>
<style>
</style>

相关推荐