4.vue与webstorm

目录：

1. vue简介 

2. 在webstorm中创建工程
2. vue的使用
3. vue中常用的指令
4. axios发送异步请求

---

1. vue简介

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程

2. 在webstorm中创建工程

2.1引入vue.js文件

这里我们可以从官网上进行下载：如下链接

安装 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/installation.html

2.2body创建一个div标签

    

        {{msg}}
    

2.3创建自己的js代码

2.4 el属性:

把当前vue对象挂载到指定的标签元素上，使其vue生效。

---

2. vue指令

2.1 v-text 和v-html

设置标签的文本值(textContent)

    
    
    


    

          {{msg}}


          你喜欢什么?

           
          你喜欢什么?
    

2.2 v-on基础

为元素绑定事件

    
    
    


    

          {{msg}}

          点击
        
          点击2
    

---

2.3 v-show 和v-if

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

    
    
    


    

          
        

        
        
        点击
    

2.4 v-bind

设置元素的属性

    
    
    
    


    

          
          


        
         


           点击
    

2.5 v-for与@keyup.enter

循环数据与绑定enter

    
    
    


    

         

             
             

                 {{item}}--->{{index}}
             
         

         

               

                    
姓名
                    
年龄
                    
性别
                    
操作
               
              

                   
{{item.name}}
                   
{{item.age}}
                   
{{item.sex}}
                   

                       删除
                       编辑
                   
              
         


         
    

2.6 v-model

获取和设置表单元素的值. input select textarea

    
    
    


    

           
           
           {{name}}
           点击
    

3. vue中常用的指令

v-text: -----v-html

v-on:-----@

v-show:-----v-if

v-bind: 标签属性绑定----:

v-for: 循环

v-model:表单元素的双向绑定

---

4. vue结合axios以及后台代码

我们可以进入官网导入CDN：

我们只需粘贴 https://unpkg.com/axios/dist，进行粘贴即可

    
    
    
    




    

        

            
学号
            
学生姓名
        
        

            
{{item.sid}}
            
{{item.sname}}
        
    
    
        搜 索