vue基本命令使用说明

前言

写此文章的目的主要是为了记录一下自己的学习过程便于日后用来查漏补缺 也希望能够帮助到一部分,如果在浏览的过程中您发现了错误希望您的及时帮忙改正，在此感谢！

vue的基本语法

本文是基于vue.js的方法来记录,首先做的是创建一个js文件夹，引入vue.js文件,点此下载(提取码:tfgn)

一、vue实例

    
    
    vue实例


    
        
        


  

    // 声明一个vue实例，vue的使用鼓励使用数据处理,不提倡操作dom
    var vm = new Vue({ 
        el:"#app",   //el 挂载点,让vue实例接管着标签,与id为app的元素做绑定,也就是用此实例在#app内部生效
        data:{   //data vue里存放数据的地方,咱们先从data说起。
        }
    })

二、v-text与v-html和插值表达式{{ }}

将这三个放在一块是因为功能相似，容易分清不同的地方

先来看一个运行结果

    
    
    
    v-text与v-html和插值表达式{{ }}
    


    
        
            ====
             {{msg }} =====
            ====
            
    


    var vm = new Vue({
        el:"#app",
        data:{
            msg:" 我是 h1 "
        }
    })

三、v-if与v-show

看运行结果

    
    
    
    v-if与v-show
    


    
        
        显示v-if
        显示v-show
        隐藏v-if
        隐藏v-show
        cccc
    


    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        }
    })

四、v-bind

    
    
    
    v-bind
    


    .red{
        color:#0a99ff;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic;
    }
    .active {
        letter-spacing: 0.5em;
    }


    
        
         
        
       茕茕孑立沆瀣一气踽踽独行醍醐灌顶
       
       茕茕孑立沆瀣一气踽踽独行醍醐灌顶
       
       茕茕孑立沆瀣一气踽踽独行醍醐灌顶
       
       茕茕孑立沆瀣一气踽踽独行醍醐灌顶
       
       茕茕孑立沆瀣一气踽踽独行醍醐灌顶
       
       茕茕孑立沆瀣一气踽踽独行醍醐灌顶
    


    var vm = new Vue({
        el:"#app",
        data:{
            flag:true,
            classObj: {'red':true, thin:true, italic:false,active:false},
            styleObj1:{color:'red', 'font-weight':200},
            styleObj2:{'font-style':'italic'}
        },
    })

五、v-model

    
    
    
    v-bind
    
  

    
        {{ msg }}
        
        
        
        
    


    var vm = new Vue({
        el:"#app",
        data:{
           msg:"茕茕孑立沆瀣一气"
        },
    })

六、v-for

    
    
    
    v-bind
    


    
        
        {{item.id}}------{{item.name}}
        
        {{item.id}}------{{item.name}}---------{{index}}---{{i}}
    


    var vm = new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:'zs1'},
                {id:2,name:'zs2'},
                {id:3,name:'zs3'},
                {id:4,name:'zs4'}
                ],
        },
    })

七、v-on

    
    
    
    v-bind
    


    
       {{msg}}
        
       点击事件
    


    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            btn:''
        },
        methods: {
            // 函数有两种如下两种定义方法,推荐第一种
            btn(){
                this.msg='触发了事件绑定!'
            },
            btn: function(){
                this.msg  = '第二种定义'
            }
        },
    })