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框里输入一些东西，查看效果，例：