vue入门例子

vue入门例子

1、声明示渲染      　　　　　　　  {{message}}

2、绑定事件　　　　　　　　　　 v-bind

3、控制切换一个程序是否显示        v-if

4、渲染循环                                   v-for

5、点击事件                                   v-on

6、双向数据绑定    　　　　　　    v-model

一、声明示渲染   {{message}}     例：

<template>
  <div id="app">
    <h1>
        <p>{{message}}</p>
    </h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      message:'我最棒！'
      }
    },
}
</script>

<style scoped>
#app {
  text-align: center;
  color: red;
  margin-top: 60px;
  font-size: 60px;
}
</style>

　　效果如下：

二、绑定事件      v-bind       例：

<template>
  <div id="app">
    <h1>
        <p v-bind:title="msg">
          鼠标悬停几秒，查看动态绑定的提示信息！
        </p>
    </h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      msg: '今天你吃早餐了吗' + new Date().toLocaleString()
      }
    },
}
</script>

<style scoped>
#app {
  text-align: center;
  color: red;
  margin-top: 60px;
  font-size: 60px;
}
</style>

　　显示效果如下：

　　请把鼠标悬停几秒，会有提示信息。

三、控制切换一个程序是否显示   v- for      例：

<template>
  <div id="app">
    <h1>
        <p v-if="showMsg">大家好！</p>
    </h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      showMsg:true
      }
    },
}
</script>

<style scoped>
#app {
  text-align: center;
  color: red;
  margin-top: 60px;
  font-size: 60px;
}
</style>

　　效果如下：

 

 

四、渲染循环        v-for       例：

<template>
  <div id="app">
    <h3>
      <ol>
        <li v-for="list in lists">{{list.text}}</li>
      </ol>
    </h3>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      lists: [
        { text: "天气晴朗，阳光明媚" },
        { text: "适合约会！" },
        { text: "不是吗？" }
      ]
    };
  }
};
</script>

<style scoped>
#app {
  text-align: center;
  color: red;
  margin-top: 60px;
  font-size: 60px;
}
</style>

　　效果如下：

五、点击事件　　 v-on:      例：

<template>
  <div id="app">
    <h1>
        <p>{{message}}</p>
    </h1>
    <button v-on:click='msg'>素素最美！</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      message:'素素最棒！'
      }
    },
    methods:{
      msg:function(){
        this.message = this.message.split('').reverse().join('')
      }
    }
}
</script>

<style scoped>
#app {
  text-align: center;
  color: red;
  margin-top: 60px;
  font-size: 60px;
}
</style>

　　点击按钮之后，字母可以反转，变为

 

 

 

六、双向数据绑定       v-model    例：

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <input v-model="msg">
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg:'海阔天空！'
    };
  }
};
</script>

<style scoped>
#app {
  text-align: center;
  color: red;
  margin-top: 60px;
  font-size: 60px;
}
</style>

　　效果如下：

 

 　　尝试在input框里输入一些东西，查看效果，例：

 

有疑问，请加qq学习群：910316886