vue 基础模板语法

周大胖子

1. <template>
2.   <div id="app">
3.     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
4.     <hr>
5.       <!-- 最简单的数据绑定 -->
6.       {{msg2}}
7.     <hr>
8.       <!-- html输出。利用v-html -->
9.       <span v-html="laomo"></span>
10.     <hr>
12.       <!-- 简单的一个循环 -->
13.     <ol>
14.       <li v-for="item in arr">
15.         {{item}}
16.       </li>
17.     </ol>
18.     <hr>
20.       <!-- 带索引值的一个循环 -->
21.     <ol>
22.       <li v-for="(item,key) in arr">
23.         {{item}}-------{{key}}
24.       </li>
25.     </ol>
26.     <hr>
28.     <!-- 控制class -->
29.     <p :class="{'red':!a}">class的控制</p>
30.     <p :class="{'red':a,'blue':!a}">class的控制2</p>
31.     <hr>
33.     <!-- 循环控制的语法 给第一个和第三个分别加样式-->
34.     <ol>
35.       <li v-for="(item,key) in arr" :class="{'red':key==0 ,'blue':key==2}" >
36.         {{item}}-------{{key}}
37.       </li>
38.     </ol>
39.     <hr>
41.     <!-- 条件判断语句 通过初始的 seen 是false 还是 true 来控制 这个p 显示不显示 -->
42.     <p v-if="seen">现在你看到我了</p>
43.     <hr>
45.     <!-- 绑定属性利用v-bind -->
46.     <div v-bind:title="lmtitle">鼠标移入</div>
47.     <!-- 缩写就是 <div :title="lmtitle">鼠标移入</div> -->
48.     <hr>
49.    
50.     <!-- 绑定事件使用v-on 这个目前是错的-->
51.     <div v-on:click="abc()">绑定点击事件 </div>
52.     <div @click="ad()">简写绑定点击事件 </div>
54. <!--
55.     <HelloWorld msg="Welcome to Your Vue.js App" laomo="事实上"/> -->
56.   </div>
57. </template>
59. <script>
60. import HelloWorld from './components/HelloWorld.vue'
62. function abc(){
63.   alert(1)
64. }
65. export default {
66.   
67.   data(){     //业务逻辑定义的数据
68.     return {
69.        msg2:'哈哈哈'
70.        ,laomo:'<h2>apppppp<h2>'
71.        ,arr:['one','two','three']
72.        ,lmtitle:'这是一个title的值'
73.        ,seen:false
74.        ,a:false
75.     }
76.    
77.   }
78.   ,methods:{        //存放VUE的方法
79.     abc:function(){
80.       // alert(1)
81.       // 获取数据
82.       alert(this.msg2)
83.     },
84.     ad:function(){
85.       alert(this.arr)
86.     }
87.   }
88.   ,name: 'app',
89.   components: {
90.     HelloWorld
91.   }
92.   
93. }
94. </script>
96. <style>
97. #app {
98.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
99.   -webkit-font-smoothing: antialiased;
100.   -moz-osx-font-smoothing: grayscale;
101.   text-align: center;
102.   color: #2c3e50;
103.   margin-top: 60px;
104. }
105. .red{
106.   color:red;
107. }
108. .blue{
109.   color:blue;
110. }
111. </style>

复制代码

一个简单的备份