vue入门学习

vue入门学习

vue指令

v-text：设置标签的文本值

无论标签内部任何内容都会被覆盖，而使用插值表达式{{}}则可以动态更改标签的文本值

{{}}中支持运算，如字符串拼接

    

        {{ message }} honey
        
honey
    
    
    

v-html：设置标签的innerHtml

相对于v-text来说，v-html能够解析html标签

v-on：为元素绑定事件

v-on:method可以简写为@method

在方法中调用data中的数据，需要使用this关键字

    

        
        
        
        
{{ food }}
    
    
    

v-on补充：

    

        
        请输入: 
    
    
    

事件绑定时可以传入参数；绑定的事件可以通过.加以限制，如上面代码的@keyup.enter

v-show：根据表达式的真假，切换元素的显示和隐藏

    

        隐藏或显示图片
        累加年龄
        
        
    
    
    

根据表达式的真假，切换元素的显示和隐藏

    

        切换显示状态
        
mysql是怎样运行的 -- v-if修饰
        
mysql是怎样运行的 -- v-show修饰
    
    
    

与v-show的区别
v-show：只是隐藏了文本内容，标签至始至终在那里；v-if：隐藏了整个标签
若是频繁切换，一般使用v-show，v-if更加消耗性能

v-bind：设置元素的属性

v-bind:attribute 简写为:attribute

绑定属性支持字符串拼接

类属性绑定：1. 三元表达式 2. {attribute:true/false}

v-for:循环数据

 

        增加数据
        移除数据
        

            

                {{ item.name }}
            
            

               {{ index+1 }} {{ item.name }}
            
        
    
    
    

v-model：获取和设置表单元素的值

    

        修改message
       
       
{{ message }}
    
    
    

双向数据绑定: 修改表单数据与修改message的值是同步的

网络应用：axios

功能强大的网络请求库

//请求方式
axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key1:value1,key2:value2}).then(function(response){},function(err){})

axios的基本使用

axios结合vue使用

 

        
        

            {{ joke }}
        
    
    
    

    

axio回调函数中的this已经改变了，无法访问到data中的数据，因此先把this保存起来，以便在回调函数中直接使用保存起来的this