vue阶段总结（vue基础）

目录

1.什么是vue

2.什么是mvc和mvvm

3.框架和库的区别

4.插值表达式

5.vue指令防止页面闪烁

6.vue指令v-html和v-text的区别

7.vue指令-属性绑定及简写

8.vue指令-事件绑定及简写

9.vue事件修饰符

10.vue指令-双向数据绑定

11.vue指令-循环渲染

12.vue指令-显示隐藏

13. vue指令-v-for为什么设置key

14.vue绑定class方式 

15.vue绑定style方式 

16.vue过滤器全局和局部声明方式及使用 

17.vue键盘修饰符使用 

18.vue键盘修饰符设置别名

19.vue自定义指令全局和局部声明方式及使用

 20.vue生命周期钩子函数有哪些？

vue生命周期钩子函数各阶段特点，什么作用？

21.vue-resource如何发送get，post请求

 22.vue-resource发送post请求第三个参数写什么

23.axios发送get，post请求

24.axios发送post请求使用内置参数对象是什么

 在post请求时，

请求头为json字符串和对象时，直接转为json对象即可

请求头为application/x-www-form-urlencoded时，创建一个URLSearchParams对象

请求头为multipart/form-data 时，创建一个FormData对象

25.vue中过渡动画类名有哪些 

26.vue中过渡动画结合第三方插件使用

27.vue中过渡动画中钩子函数的使用

28.vue中如何设置v-for列表动画

29.vue中如何声明组件

30.vue中如何父组件给子组件传值

31.vue中如何子组件给父组件传值 

32.vue中如何使用插槽，两种插槽的区别

33.前端路由和后端路由的区别

 34.vue中如何使用路由

35.路由跳转两种方式，声明式，函数式 

36.路由传参两种方式，声明式，函数式

37.路由嵌套 

 38.路由高亮

 39.路由重定向

40.ref的使用 

 41.属性计算，属性监听

---

1.什么是vue

vue是一套构建用户界面的渐进式框架，与其他重量级框架不同，vue采用自底向上增量开发的设计，vue的核心库只注视图层，不仅易于上手，还便于与第三方库或者既有项目整合

2.什么是mvc和mvvm

mvc是后端的分层开发概念

mvvm是前端视图层的概念，主要关注视图层分离，也就是说：mvvm把前端的视图层，分为了三部分Model、View、ViewModel

3.框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性比较大，项目如果需要更换框架，则需要重新架构整个项目。

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

4.插值表达式

插值表达式{{}}，可以在前后插入一些内容

5.vue指令防止页面闪烁

v-cloak：在vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：防止页面闪烁

6.vue指令v-html和v-text的区别

v-html可以识别富文本

7.vue指令-属性绑定及简写

v-bind指令，可以直接简写为冒号

8.vue指令-事件绑定及简写

v-on指令，可以简写为@

9.vue事件修饰符

1. .stop   阻止冒泡
2. .prevent   阻止默认事件
3. .capture   添加事件监听转为捕获模式
4. .self   只当事件在该元素本身（比如不是子元素）触发时触发回调
5. .once   事件只触发一次

10.vue指令-双向数据绑定

v-model   ：作用：数据双向绑定

                ：注意：只能绑定表单控件

11.vue指令-循环渲染

v-for

1. 遍历数组，参数(item,index) in list
2. 遍历对象，参数(value,key,index) in list
3. 遍历数字，num in 10 (1~10)
4. key在使用v-for的时候都需要去设置key 

• 让界面元素和数组里的每个记录进行绑定
• key只能是字符串或者数字
• key必须是唯一的

12.vue指令-显示隐藏

v-if与v-show

1. 区别：
   1. v-if删除dom元素
   2. v-show设置display:none
2. 应用场景：
   1. v-if只修改一次的时候可以使用v-if
   2. v-show频繁切换的时候可以使用v-show

13. vue指令-v-for为什么设置key

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

14.vue绑定class方式 

1. 数组
2. 三木表达式
3. 数组内置对象（对象的键是样式的名字，值是Boolean类型）
4. 直接通过对象

15.vue绑定style方式 

1. 直接在元素上通过 :style 的形式，书写样式对象
2. 将样式对象，定义到 data 中，并直接引用到 :style 中
   1. 在data上定义样式
   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中
3. 在 :style 中通过数组，引用多个 data 上的样式对象
   1. 在data上定义样式
   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

16.vue过滤器全局和局部声明方式及使用 

http://t.csdn.cn/3Vci4

17.vue键盘修饰符使用 

http://t.csdn.cn/3Vci4

18.vue键盘修饰符设置别名

http://t.csdn.cn/3Vci4

19.vue自定义指令全局和局部声明方式及使用

http://t.csdn.cn/3Vci4

 20.vue生命周期钩子函数有哪些？

vue生命周期钩子函数各阶段特点，什么作用？

http://t.csdn.cn/H4I8r

21.vue-resource如何发送get，post请求

安装方法

使用 cdn:

   

1. 直接在页面中，通过script标签，引入vue-resource的脚本文件；
2. 注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件

get请求

getInfo() { // get 方式获取数据
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
  console.log(res.body);
})
}

 post请求

postInfo() {
var url = 'http://yapi.shangyuninfo.com/mock/36/web02/list/goods/category';
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
  console.log(res.body);
});
}

 22.vue-resource发送post请求第三个参数写什么

/参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded

写为{ emulateJSON: true }

23.axios发送get，post请求

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装方法

使用 cdn:

src="https://unpkg.com/axios/dist/axios.min.js">

或

src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js">

使用 npm:

npm install axios

get请求和post请求

  
  
  
  
  
  
  
  
  


  

    
      

        

          

            
            
          
        
        
        

      
        
        

        

      
      
      
      

         ---{{item.subjectTitle}}---
      
      
      

          

            

              
                

                
{{item.courseTitle}}
                
共{{item.subSectionNum}}节课|{{item.participationsCount}}人报名
                

                   免费
                    {{item.coursePrice}}  {{item.discountPrice}}
                   {{item.coursePrice}}
                
              
            
          
      




    

      ------{{item.dictLabel}}------
    

  


  

24.axios发送post请求使用内置参数对象是什么

 在post请求时，

1. 请求头为json字符串和对象时，直接转为json对象即可

2. 请求头为application/x-www-form-urlencoded时，创建一个URLSearchParams对象

3. 请求头为multipart/form-data 时，创建一个FormData对象

25.vue中过渡动画类名有哪些 

1.     .v-enter
2.     .v-enter-to
3.     .v-enter-active
4.     .v-leave
5.     .v-leave-to
6.     .v-leave-active

26.vue中过渡动画结合第三方插件使用

导入动画类库：

定义 transition 及属性：

 

     

第一军团没有秘密

 

27.vue中过渡动画中钩子函数的使用

定义 transition 组件以及三个钩子函数：

 
    @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
   

OK

 

定义三个 methods 钩子方法：

methods: {

      beforeEnter(el) { // 动画进入之前的回调
        el.style.transform = 'translateX(500px)';
      },
      enter(el, done) { // 动画进入完成时候的回调
        el.offsetWidth;
        el.style.transform = 'translateX(0px)';
        done();
      },
      afterEnter(el) { // 动画进入完成之后的回调
        this.isshow = !this.isshow;
      }

}

定义动画过渡时长和样式：

.show{

transition: all 0.4s ease;

}

28.vue中如何设置v-for列表动画

 定义过渡样式：

 

定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

        点我

       

           

                {{item}}

           

       

   

定义 VM中的结构：

const vm = new Vue({

        el: '#app',

        data: {

            flag:true

        },

        methods: {

        },

    })

 

    
    
    
    
    
    


    

         点我
        
            

                {{item}}
            
        
    


    

29.vue中如何声明组件

http://t.csdn.cn/kGV9p

30.vue中如何父组件给子组件传值

31.vue中如何子组件给父组件传值 

32.vue中如何使用插槽，两种插槽的区别

http://t.csdn.cn/N3Zcs

33.前端路由和后端路由的区别

1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2. 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

 34.vue中如何使用路由

1. 路由的安装

   

路由的基本使用

1. 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2. 创建路由new VueRouter(),接受的参数是一个对象
3. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4. path属性是url的地址,component属性就是显示的组件（传组件的对象）
5. 创建的路由需要和vue实例关联一下
6. 路由到的组件显示在哪个位置

案例

    
    
    
    
    
    
    

    
    


    


        

index 
index 
去详情 
 q去详情页
 个人中心页


    
    

    
    


    

35.路由跳转两种方式，声明式，函数式 

声明式：直接写在to后面

去详情2222

函数式

去详情页

 // 函数式跳转

            todetail(){

                this.$router.push({path:'/detail'})

                this.$router.push({path:'/mine',query:{id:104,name:'lisi'}})

            },

36.路由传参两种方式，声明式，函数式

        1.通过query的方式在url后加?参数名=参数的值

        获取参数：$route.query.参数名

        2.使用浏览器参数的方式传递参数

1. 设置路由的时候/路由地址/:参数名
2. 获取参数$route.params.参数名

37.路由嵌套 

1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2. 这个children的组件就会渲染在它父组件的中

    
    
    
    
    
    
    

    
    


    


        

index 
index 
去详情 


 q去详情页
 个人中心页


    

    

    

    
    

    


    

 38.路由高亮

选中路由高亮

1. 使用默认的样式直接设置router-link-active
2. 自定义样式配置 linkActiveClass:'自定义的类名'

 39.路由重定向

redirect可以进行路由的重定向

                 // 路由重定向
                {
                    path:'/',
                    redirect:'/index'
                },
     

40.ref的使用 

获取dom节点

1. 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2. 加上ref之后，在$refs属性中多了这个元素的引用。
3. 通过vue实例的$refs属性拿到这个dom元素。

获取组件

1. 给组件记上ref属性，可以理解为给组件起了个名字。
2. 加上ref之后，在$refs属性中多了这个组件的引用。
3. 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

 41.属性计算，属性监听

 Watch用法

监听data中属性的改变：

   +
   =
  {{fullName}}




监听路由对象的改变：

  登录
  注册

  

Computed用法

默认只有getter的计算属性：

   +
   =
  {{fullName}}




定义有getter和setter的计算属性：

  
  
  
  

  {{fullName}}

 method、computed和watch的区别

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2. methods方法表示一个具体的操作，主要书写业务逻辑；
3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体