vue入門例子

時間 2019-11-12

標籤 vue 入門例子简体版

原文原文鏈接

vue入門例子

一、聲明示渲染　　　　　　　 {{message}}vue

二、綁定事件　　　　　　　　　　 v-bindapp

三、控制切換一個程序是否顯示 v-ifthis

四、渲染循環 v-forspa

五、點擊事件 v-on3d

六、雙向數據綁定　　　　　　 v-modelcode

1、聲明示渲染 {{message}} 例：

 1 <template>
 2   <div id="app">
 3     <h1>
 4         <p>{{message}}</p>
 5     </h1>
 6   </div>
 7 </template>
 8 
 9 <script>
10 export default { 11   name: 'app', 12  data(){ 13     return{ 14       message:'我最棒！'
15  } 16  }, 17 } 18 </script>
19 
20 <style scoped>
21 #app { 22   text-align: center; 23  color: red; 24   margin-top: 60px; 25   font-size: 60px; 26 } 27 </style>

　　效果以下：blog

2、綁定事件 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>

　　顯示效果以下：事件

　　請把鼠標懸停幾秒，會有提示信息。ip

3、控制切換一個程序是否顯示 v- for 例：

 1 <template>
 2   <div id="app">
 3     <h1>
 4         <p v-if="showMsg">你們好！</p>
 5     </h1>
 6   </div>
 7 </template>
 8 
 9 <script>
10 export default { 11   name: 'app', 12  data(){ 13     return{ 14       showMsg:true
15  } 16  }, 17 } 18 </script>
19 
20 <style scoped>
21 #app { 22   text-align: center; 23  color: red; 24   margin-top: 60px; 25   font-size: 60px; 26 } 27 </style>

　　效果以下：input

4、渲染循環 v-for 例：

 1 <template>
 2   <div id="app">
 3     <h3>
 4       <ol>
 5         <li v-for="list in lists">{{list.text}}</li>
 6       </ol>
 7     </h3>
 8   </div>
 9 </template>
10 
11 <script>
12 export default { 13   name: "app", 14  data() { 15     return { 16  lists: [ 17         { text: "天氣晴朗，陽光明媚" }, 18         { text: "適合約會！" }, 19         { text: "不是嗎？" } 20  ] 21  }; 22  } 23 }; 24 </script>
25 
26 <style scoped>
27 #app { 28   text-align: center; 29  color: red; 30   margin-top: 60px; 31   font-size: 60px; 32 } 33 </style>

　　效果以下：

5、點擊事件　　 v-on: 例：

 1 <template>
 2   <div id="app">
 3     <h1>
 4         <p>{{message}}</p>
 5     </h1>
 6     <button v-on:click='msg'>素素最美！</button>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default { 12   name: 'app', 13  data(){ 14     return{ 15       message:'素素最棒！'
16  } 17  }, 18  methods:{ 19       msg:function(){ 20         this.message = this.message.split('').reverse().join('') 21  } 22  } 23 } 24 </script>
25 
26 <style scoped>
27 #app { 28   text-align: center; 29  color: red; 30   margin-top: 60px; 31   font-size: 60px; 32 } 33 </style>

　　點擊按鈕以後，字母能夠反轉，變爲

6、雙向數據綁定 v-model 例：

 1 <template>
 2   <div id="app">
 3     <h1>{{msg}}</h1>
 4     <input v-model="msg">
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default { 10   name: "app", 11  data() { 12     return { 13       msg:'海闊天空！'
14  }; 15  } 16 }; 17 </script>
18 
19 <style scoped>
20 #app { 21   text-align: center; 22  color: red; 23   margin-top: 60px; 24   font-size: 60px; 25 } 26 </style>