Vue简单使用

1. 使用Vue

"app">
    
{{msg1}}
    
{{msg2}}

2. v-cloak  v-text  v-html

    
        "utf-8">
        
        
    
    
        
"app">
            
            
{{msg}}
            
"msg">456
            
            
            
{{msg1}}
            
"msg1">
            
"msg1">456
            
        
        
        
    

3. v-bind

    
        "utf-8">
        
        
    
    
        
"app">
    
    
    "msg">123

    
    
    "msg">456

    
    
    
    
class="['thin', 'italic', 'active']">这是一个大宝贝
    
    
class="['thin', 'italic', flag?'active':'']">这是一个大宝贝
    
    
class="['thin', 'italic', {'active':true}]">这是一个大宝贝
    
    
class="{thin: true, italic: true, active: false}">这是一个大宝贝
    
    
class="objClass">这是一个大宝贝
    
    
    
    
"{color:'red', fontSize:'40px', 'font-weight':'200', 'backgroundColor':'blue'}">这是一个大宝贝
    
    
这是一个大宝贝
    
    
"[hlStyleObj, hlStyleObj1]">这是一个大宝贝



    

 

4. v-on

"app">
    
{{ msg }}
    
    "reverseMessage">点击
    
    
    "go">{{ msg1 }}

5 时间修饰符  .stop   .once   .prevent   .self   .capture

"app">
    
class="inner" @click="fun1">
        
        
        "submit" @click.stop="fun2" value="12">
        
        "http://www.baidu.com" @click.stop.prevent="fun3">百度
    
    
    
class="inner" @click.capture="fun1">
        "submit" @click="fun2" value="12">
    
    
    
class="inner" @click.self="fun1">
        "submit" @click="fun2" value="12">
    
    
    
class="inner" @click.once="fun1">
        "submit" @click="fun2" value="12">
    

6 v-model 实现双向绑定

    
        "utf-8">
        
    
    
"app">
    
    
    
    姓: "text" v-model='first_name'>
    名: "text" v-model='last_name'>
    
{{full_name}}



    

7 v-for

    
        "utf-8">
        
    
    
        
"app">
            
            
for="ls in lst"> {{ls}} 
            
            
for="(ls, i) in lst"> 索引:{{i}}-- 值:{{ls}} 
            
            
for="ls in dic"> {{ls.id}}{{ls.name}} 
            
            
for="(ls, i) in dic"> {{ls.id}}{{ls.name}} {{i}} 
            
            
for="(val, key, i) in user">{{val}} {{key}} {{i}}
            
            
for="count in 10"> {{count}} 
        
        
        
    

 8 v-for   :key的使用

    
        "utf-8">
        
    
    
        
"app">
            for="">id:
                "text" v-model="id">
            
            name:
                "text" v-model="name">
            
            "button" value="提交" @click="go">
            
            
            
            
for="ls in lst" :key='ls.id'>
            "checkbox">{{ls.id}} ==> {{ls.name}}
        
        
        
    

9 v-if  v-show

    
        "utf-8">
        
    
    
        
"app">
            
            
            
            
            
            
            
"true">123
            
"false">456
            
if="true">789
            
if="false">100
        
        
        
    

 

转载于:https://www.cnblogs.com/yuyafeng/p/11099951.html