vue知识点

1、什么是vue vue js是一套构建用户界面的渐进式框架、 2、框架和库的区别 框架是一套完整的解决方案;对项目的侵入性

1、什么是vue

         vue.js是一套构建用户界面的渐进式框架、

2、框架和库的区别

         框架是一套完整的解决方案;对项目的侵入性较大

         库提供某个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,很容易切换到其他库实现需求

3、mvc和mvvc的区别

         mvc是后端分层开发概念:

                   m:model,模型层,与数据库连接

                   v:view,视图层,界面展示、界面交互,用户看到并与之交互的界面

                   c:controller,调度层,将用户输入的指令和数据传递给model返回给view

         mvvc是前端视图层的概念:

                   m:model,业务逻辑、数据

                   v:view,界面展示

                   vm:viewModel,链接view和model

4、插值表达式

         {{}}    

6、vue指令界面防止闪烁

         v-cloak 

[v-cloak]{

display:none

}

7、v-html,v-text的区别

         v-html可以解析富文本

         v-text不可以解析富文本

8、属性绑定

         v-bind   简写  :

9、vue指令-事件绑定及简写

         v-click    简写  @

10、vue事件修饰符

         .self 只有触发自身时触发

         .prevent 阻止默认事件

         .once 只触发一次

         .stop 阻止冒泡

         .capture 设置捕获

11、vue指令-双向数据绑定

         v-model:value = ’’

         v-model = ‘’

12、vue指令-循环渲染  v-for

13、vue指令-显示隐藏   

v-if(通过删除和添加DOM元素进行显示和隐藏。用于切换次数少的时候。如果多次切换,会很消耗性能)  

v-show(通过删除和添加display:none样式进行显示和隐藏。用于切换次数多的时候)

14、vue指令-v-for如何遍历对象、数组、数字

         遍历数组:v-for='(item,index) in list' :key=''

         遍历对象:  v-for='(value,key,index) in person' :key=''

         遍历数组对象: v-for='(item,index) in objlist' :key=''

         遍历数字: v-for = 'index in 10' :key=’index’

15、vue指令-v-for为什么设置key

         让界面元素和数组的每个记录进行绑定,提高重排效率

         key只能是字符串或者数字

         key必须是唯一的

16、vue指令-v-if和v-show的区别

         v-if的实现方式是删除dom元素,适用于切换次数少的情况

         v-show的实现方式是设置display:none,适用于频繁切换的情况

17、vue绑定class方式

<!-- data中定义classRed -->
        <div :class='classRed'>:class='classRed'</div>
        <!-- 数组 -->
        <div :class=[classRed]>:class=[classRed]</div>
        <!-- true/false判断 -->
        <div :class={boxRed:true}>:class={boxRed:true}</div>
        <!-- 三目 -->
        <div :class='1==1?"boxRed":"box"'>:class='1==1?"boxRed":"box"'</div>
        <!-- 调用函数 -->
        <div :class=getClass()>:class=getClass()</div>
    data: {
            classRed:"boxRed"
        },
        methods: {
            getClass(){
                return "boxRed"
            }
        },

18、vue绑定style方式

:style = ‘fs50’
:style = ‘{fontSize:fs40}’
:style = ‘[fs50]’
:style = ‘fontSize’
   data:{
         fs50:{
       fontSize:”50px”
   },
     fs40:”40px”,
     fontSize:’60px’
     }

19、vue过滤器全局和局部声明方式及使用

使用:{{变量 | 过滤器名字}}

全局定义:

通过Vue提供的filter方法定义:Vue.filter()

参数1:过滤器的名字

参数2:过滤器执行函数

过滤器名为changeword 只执行函数返回值将大聪明用***替代

19、vue过滤器全局和局部声明方式及使用

使用:{{变量 | 过滤器名字}}

全局定义:

通过Vue提供的filter方法定义:Vue.filter()

参数1:过滤器的名字

参数2:过滤器执行函数

 私有定义

filters这个是实例化Vue的一个参数,和data,methods平级的,里面放的就是我们这个实例的私有过滤器。

20、vue键盘修饰符使用

         注册一个监听按键事件

                   1、监听所有按键:v-on:keyup

                   2、监听指定按键:v-on:keyup.按键码

21、vue键盘修饰符设置别名

         设置112别名为f1

         Vue.config.keyCodes.f1 = 112

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

  1、全局定义

  Vue.directive(参数一:名字不带V-  参数二 对象 )
  对象中三个钩子函数{
    一、bind 只调用一次,指令第一次绑定到元素时调用,用于初始化
    二、inserted 元素已经渲染到界面上之后执行
    三、update 元素更新时执行
  }

         2、局部定义

         局部指令directives(注意多个s),与data平级,为一个对象,对象中的对象也有bind、inserted、update三个钩子函数,多一个focus,数据渲染到页面上后触发

20、vue键盘修饰符使用

         注册一个监听按键事件

                   1、监听所有按键:v-on:keyup

                   2、监听指定按键:v-on:keyup.按键码

21、vue键盘修饰符设置别名

         设置112别名为f1

         Vue.config.keyCodes.f1 = 112

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

  1、全局定义

  Vue.directive(参数一:名字不带V-  参数二 对象 )
  对象中三个钩子函数{
    一、bind 只调用一次,指令第一次绑定到元素时调用,用于初始化
    二、inserted 元素已经渲染到界面上之后执行
    三、update 元素更新时执行
  }

         2、局部定义

         局部指令directives(注意多个s),与data平级,为一个对象,对象中的对象也有bind、inserted、update三个钩子函数,多一个focus,数据渲染到页面上后触发

23、vue声明周期钩子子函数有哪些?各阶段作用及特点

beforeCreate 拿不到data和methods,一般用于重定向
created 能拿到data和methods,一般用于接口请求,数据初始化
beforeMount dom元素渲染前,此时页面数据尚未渲染
mounted dom元素渲染完毕后,一些依靠dom的操作在此进行,例如swiper,echarts
beforeUpdate 页面更新前
updated 页面更新后
beforeDestroy 销毁前,一般用于清除计时器、事件监听和属性监听
destroyed 销毁后

25、vue-resource如何发送get,post请求

直接在页面中,通过script标签,引入vue-resource的脚本文件;

注意:引用的先后顺序是 - 先引用Vue的脚本文件,再引用vue-resource的脚本文件

Get:
this.$http.get(‘url’).then(res => {})
post:
         // 参数1: 要请求的URL地址
        // 参数2: 要发送的数据对象
        // 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(‘url’,请求体,{emulateJSON:true}).then(res => {})

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

  // 参数1: 要请求的URL地址
  // 参数2: 要发送的数据对象
  // 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
27、axios发送get,post请求
1. axios.get(地址).then((res) => { ... })
2. axios.post(地址,请求体).then((res)=>{...})
28、axios发送post请求使用内置参数对象是什么
JSON,
 URLSearchParams
FromDate

29、控制vue动画的六个类名

         .v-enter .v-enter-to .v-enter-active

         .v-leave .v-leave-to .v-leave-active

         自定义属性名name

         动画进入三个阶段 .自定义属性名-enter → .自定义属性名-enter-to → .自定义属性       名-enter-active

         离开三个阶段 .自定义属性名-leave → .自定义属性名-leave-to → .自定义属性名- leave-active

30、vue中过渡动画结合第三方插件使用

         1.引入animate.css

2.<transition enter-active-class(leave-active-class)=“animate-animated 动画名称”></transition>

(3的版本不加前缀,4版本要加)

31、vue中过渡动画中钩子函数的使用

         @before-enter(leave)=‘beforeEnter’    beforeEnter(el){el.style.transform=“”}   动画之前进入之前

 

         @enter=‘enter’     enter(el,done){el.style.transform=“” done()必须,表示该动作已完成}  动画进入完成

         @after-enter = ‘after’   after(el){}  动画进入完成之后

32、vue中如何设置v-for列表动画

         <transition-group tag=‘li’>

                   <li  v-for=(item,index) in list  :key=‘index’>{{item}}</li>

</transition>

平缓柔和

.v-move{transition = all 0.8s ease }  .v-leave-active{position:absoluate}

33、全局声明组件的几种方式

    一、var first = Vue.extend({template:'内容'})
                   Vue.component('组件名',组件内容)
   二、Vue.component('组件名',{
                   template:'内容'})
   三、  <script type='template' id="third">
           <h1>第三种方式</h1>
           </script>
             Vue.component('组件名',{template:'#third'})
    四、<template id="forth">
             <h1>第四种方式</h1>
            </template>
          Vue.component('组件名',{template:'#forth'})

34、结合代码说明父组件如何给子组件传值

在father中给子组件传值

          <div id='father'>

                            <son name='ls'></son>

                   </div>

子组件props属性接收传值

  props:{ name:String,

                name:[String,Number],

                name:{

            type:String

            default:‘’(默认值)

          }}

35、vue中如何子组件给父组件传值

1、子组件created中this.$emit两个参数(要传给谁(自定义事件类型),要传的信息)

         this.$emit('send-msg-to-father',this.sonmsg)

2、@定义一个方法,用于接收son传过来的信息

         <son @send-msg-to-father='getsonmsg'></son>

3、得到son传过来的信息,固定参数data

         getsonmsg(data){}

4、父元素data中定义数据用来接收使用来自son的信息

         usesonmsg:''

5、将得到的data值(这里的data是自定义方法中的data)传给data中定义好的数据中使用

         this.usesonmsg = data

6、使用son传来的信息

         {{usesonmsg}}

36、vue中如何使用插槽,两种插槽的区别

<slot></slot>
具名插槽
<slot name='top'></slot>

具名插槽使用

 <template v-slot:top>
           <div class="red">
                    具名插槽上
           </div>
  </template>

37、前端路由和后端路由的区别

  1. 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源

  2. 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;

  3. 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由

38、vue中如何使用路由

         1、引入VueRouter放在Vue引入之下
         2、创建路由实例
         let mine = {template: '#index'}
        // 2、创建路由实例
        const router = new VueRouter({
                   // 3、创建映射关系
            routes: [
                    path: '/index',
                    component: index
                }
            ],
        })
    4、建立联系,将路由挂在在vue实例上
      const vm = new Vue({
              el: '#app',
              data: {
              },
              // 4建立联系,将路由挂载在vue实例上
              // router:router,
              // 简写router
              router,
          })
         5、展示位置/声明组件

39、路由跳转两种方式,声明式,函数式

      声明式
<router-link to="/father">声明式跳转</router-link>
         函数式
复制代码
<button @click="toFather">跳转到father</button>
toFather() {
        this.$router.push('/father')
}

40、路由传参两种方式,声明式,函数式

//声名式query传参
<router-link :to='{path:"/father/son",query:{courseId:103}}'>路由嵌套</router-link>
//声明式params传参 name与声明routes中name一致,且params传参时浏览器url必须加入参数才能正常显示
<router-link :to='{name:"Son",params:{courseId:105,courseTitle:"从入门到如土"}}'>跳转son</router-link>
//函数式query传参
// this.$router.push({path:"/home",query:{courseId:200,title:300}})
//函数式params传参
this.$router.push({ name: "Home", params: { courseId: 200, title: 300 } })

41、路由嵌套

<template id="home">
       <div>
           首页
           <button @click="tologin">点我跳转</button></button>
           <router-view></router-view>
       </div>
   </template>
        const router = new VueRouter({
           //  3.创建映射关系
           routes: [
               {
                   path: "/userInfo",
                   component: userInfo
               }, {
                   path: "/login/:userid/:name",
                   component: login,
                   name: "namelogin"
               }, {
                   path: "/home",
                   component: home,
                   children: [{
                       path: "son",
                       component: son
                   }]
               },
               // 重定向
               {
                   path: "/",
                   redirect: "/home"
               }
           ],
           linkActiveClass: "myactive"
       })

42、路由高亮

被匹配到的路由的router-link上会有个router-link-active的样式,我们通过设置这个样式设置激活标签的样式

在实例化路由的时候配置 linkActiveClass: "myactive"

43、路由重定向

// 重定向
               {
                   path: "/",
                   redirect: "/home"
               }

44、ref的使用

  1、给标签设置ref属性

         2、this.$refs.属性名

45、属性计算,属性监听

 // 计算属性  不能和data中数据重复
            computed: {
                // 默认只有getter
                allname(){
                    return this.firstname + '-' + this.lastname
                }
            }

46、vue-cli使用,如何创建和启动项目,项文件结构

选择要创项目的的文件夹cmd或者    vue create 项目名

启动项目:npm run serve

Node_model 第三方依赖 public 静态资源(不进行编译)src源代码  gitignore不上传 babel es6降级文件  package.json 项目文件  readme.md 运行指令  assets静态资源(进行编译)

47、使用第三方ui组件

         1.安装 npm i –save ant-design-vue  2.引入放入main.js中

         全局 import Autd from ‘ant-design-vue’

         Vue.use(Antd) 

         局部 例如:那个组件用就在那引入import {message} from ‘ant-design-vue’

48、覆盖ui组件样式  /deep/类名

49、什么是vuex   专为vue.js应用开发的状态管理模式

50、为什么用vuex,解决了什么问题

         进行统一的状太管理,解决不同组件共享数据的问题

         不同视图需要变更同一状态的问题

         使用vuex之后,状态变化更清晰

51、vuex的核心模块

①state:定义全局状态

②getters:对全局状态进行加工(计算),并不会改变状态值

③mutations:同步修改全局状态

④actions:异步修改全局状态,一般用于请求接口

⑤modules:将store模块化

54、什么是同源策略,什么是跨域

         浏览器的安全策略

跨域:指的是浏览器不能执行其他网站的脚本

         协议、主机(ip或者域名)、端口 3者一致则同源

55、如何解决跨域

  1、后端直接放开

  2、JSONP

  3、配置代理

 module.exports = {
      devServer: {//不设置 重写  http://wkt.myhope365.com/weChat
          //设置重写   http://wkt.myhope365.com
          proxy: {
              //代理名称
              '/course-api': {     //这里最好有一个 /
                  target: 'http://wkt.myhope365.com',  // 后台接口域名
                  changeOrigin: true,  //是否跨域
                  //路径重写
                  pathRewrite:{
                      '^/course-api':''
                  }
              },
          }
      }
  }

56、代理如何配置,各个配置项什么意思

在vue.confie.js中写

devServer:{
         proxy:{
                   ‘/api’ (代理名称):{              
                            target:        后端接口域名
                            changeOrigin:true 什么跨域
                            pathRewrite:{‘^/api’:’’}} 路径重写
}

57、如何封装axios,好处是什么

达到扩展和易用的目的

如何封装axios:1.引入axios  2.使用自定义配置文件  3.添加请求/响应拦截器  4导出

您可能有感兴趣的文章
Vue基础知识简介

vue基础语法

vue如何实现键盘输入支付密码功能

Vue 框架基础知识(一)

Vue 是什么?