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