vue入门例子
1、声明示渲染 {{message}}
2、绑定事件 v-bind
3、控制切换一个程序是否显示 v-if
4、渲染循环 v-for
5、点击事件 v-on
6、双向数据绑定 v-model
一、声明示渲染 {{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>
效果如下：
二、绑定事件 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 例：
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>
效果如下：
四、渲染循环 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>
效果如下：
五、点击事件 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>
点击按钮之后，字母可以反转，变为
六、双向数据绑定 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>
效果如下：
尝试在input框里输入一些东西，查看效果，例：
