Vue基础模板语法大全

模板语法

1. data(存全局变量) 与 直接嵌入JS代码

   <template>
     <div>
       <div> data:{{msg}}</div>
       <div> {{num + 1}}</div>
       <div v-html="raw"></div>
       <div v-bind:class="color"></div>
       <div v-on:click="say('hi')">点击</div>
       <div @click="change()">修改颜色</div>
       <div>{{msg | capitalize}}</div>
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
                 msg:'Hello World',
                 num:2,
                 raw:'<span>div的子标签</span>',
                 color:'red',
   
             }
         },
         methods: {
             change(){
                 this.color = 'blue';
             },
             say(h){
                 alert(h);
             },
         },
         filters: {
             capitalize(){
                 return '123';
             }
         }
     }
   </script>
   

    - data()是函数 methods和filters是对象
    - data中放全局变量 注意：是放在return中 
    - v-html 添加子标签 用 = 
    - v-on: 的简写为 @
    - {{msg | capitalize}}为过滤器
   

2. 计算属性computed（简化模板）

   <template>
     <div>
       <div>{{msg.split('').reverse().join('')}}</div>
       <div>{{re}}</div>
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
                 msg:'Hello World',
             }
         },
    
         computed: {
             re(){
                 return this.msg.split('').reverse().join('');
             }
         }
     }
   </script>
   

3. v-bind（css与style绑定） 三种

   <template>
     <div>
       <div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>
       <div :class="classObject"></div>
       <div :class="[activeClass, errorClass]"></div>
   
       <div :style="{'color': activeColor}"></div>
       <div :style="styleObject"></div>
       <div :style="[baseStyle, newStyle]"></div>
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
                 isActive:true,
                 hasError:false,
                 classObject: {
                     'active':true,
                     'text-danger':false
                 },
                 activeClass:'active',
                 errorClass:'text-danger',
   
                 activeColor:'black',
                 fontSize:30,
                 styleObject: {
                     color:'red',
                     fontSize:'40px'
                 },
                 baseStyle: {
                     color:'red'
                 },
                 newStyle: {
                     fontSize:'40px'
                 }
             }
         }
   
     }
   </script>
   

4. 条件渲染 v-if

   <template>
     <div>
       <div v-if="bool">yes</div>
       <div>==========================</div>
       <div v-if="type === 'A'">A</div>
       <div v-else-if="type === 'B'">B</div>
       <div v-else>C</div>
       <div>==========================</div>
       <div v-show="isShow">123</div>
   
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
                 bool:true,
                 type:'C',
                 isShow:true
             }
         }
     }
   </script>
   

5. 列表渲染

   <template>
     <div>
       <ul id="example">
         <li v-for="item in items">{{item.msg}}</li>
         <li v-for="mi in mis">{{mi}}</li>
         <li v-for="(mi,index) in mis">{{index}} - {{mi}}</li>
         <li v-for="(value,key) in obj">{{key}} : {{value}}</li>
       </ul>
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
                 items:[
                     {msg:'foo'},
                     {msg:'bar'}
                 ],
                 mis:[
                     'qwq',
                     'cdc'
                 ],
                 obj: {
                     num1:'11',
                     num2:'22'
                 }
             }
         }
     }
   </script>
   

6. 事件处理器

   	<template>
   	  <div>
   	    <button @click="counter += 1">增加一</button>
   	    <p>{{counter}}</p>
   	    <button @click="greet('I am greet')">点击</button>
   	    <!-- stop阻止往上冒泡 -->
   	    <div @click="dothis2()">
   	      <button @click.stop="dothis()">
   	        dothis
   	      </button>
   	    </div>
   	  </div>
   	
   	</template>
   	<script>
   	  export  default{
   	      data(){
   	          return{
   	              counter:0
   	          }
   	      },
   	      methods: {
   	          greet(h){
   	              alert(h)
   	          },
   	          dothis2(){
   	              alert('dothis2')
   	          },
   	          dothis(){
   	              alert('dothis')
   	          },
   	      }
   	  }
   	</script>
   

7. DOM操作

   <template>
     <div>
       <div ref="head"></div>
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
                 counter:0
             }
         },
         mounted(){
             //VUE中的dom是虚拟dom 只有在mounted中dom才已经生成
             this.$refs.head.innerHTML = 'helloworld';
         }
     }
   </script>
   

8. 过渡效果

   <template>
     <div>
       <div id="demo">
         <button @click="show = !show">
           Toggle
         </button>
         <transition name="fade">
           <p v-if="show">hello</p>
         </transition>
   
       </div>
     </div>
   </template>
   <script>
     /*
     从显示到隐藏 leave  leave-active  leave-to 三种状态
     从隐藏到显示 enter  enter-active  enter-to 三种状态
      */
     export  default{
         data(){
             return{
                 show:true
             }
         },
   
     }
   </script>
   <style>
     .fade-leave .fade-enter-to{opacity:1}
     .fade-leave-active .fade-enter-active{transition: opacity 10s}
     .fade-leave-to .fade-enter{opacity:0}
   
   </style>
   

9. 路由

   <template>
     <div>
       <router-link to="/demo"></router-link>
       <router-link :to="{name:'demo', params:{userId:456}}"></router-link>
       <router-link :to="{path:'/demo', params:{userId:456},
       query:{plan:'private'}}"> </router-link>
   
       <button @click="toURL()"></button>
     </div>
   </template>
   <script>
     export  default{
         data(){
             return{
             }
         },
         methods: {
             toURL(){
                 //this.$router.push({path:'/demo'})
                 //this.$router.push({name:'/demo', params:{userId:456}})
                 this.$router.push({path:'/demo', params:{userId:456},
                 query:{plan:'private'}})
             }
         }
     }
   </script>
   

   alert(this.$route.params.userId)
   

    - 接收页面传来的参数
   

10. 状态管理vuex（全局状态管理，所有页面共享数据）
    1. 首先安装vuexnpm install vuex
    2. 在src目录下新建src/store/index.js
    3. main.js中引入storeimport store from './store'，并在new Vue中加入store
    4. 在新的页面中就可以使用全局数据了

       <template>
         <div>
           <div>{{msg}}</div>
           <button @click="change()">点击</button>
         </div>
       </template>
       <script>
         export  default{
             data(){
                 return{
                     msg:'123',
                 }
             },
             methods: {
                 change(){
                     //vuex取数据
                     this.msg = this.$store.state.count;
                     //修改公共数据
                     this.$store.dispatch('inc',100);
                     this.msg=this.$store.state.num;
                 }
             }
         }
       </script>