vue中在进入/离开的过渡中,有那几个类名?

v-enter:定义进入过渡的开始状态;v-enter-active:定义进入过渡生效时的状态;

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态;v-leave: 定义离开过渡的开始状态。

v-leave-active:定义离开过渡生效时的状态;v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态

vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果?

条件渲染 (使用 v-if);

条件展示 (使用 v-show);

动态组件; 组件根节点

列出vue中与列表元素相关的修饰符,并简要说明其作用?

(1).lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。使用 lazy 修饰符,从而转变为使用 change 事件进行同步

(2).number 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符。

(3).trim 如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符。

简要说明在vue中v-model指令的作用?

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。

根据控件类型v-model自动选取正确的方法更新元素 。

它负责监听用户的输入事件以更新数据。

vue中动态样式绑定(class)的方式都有哪些?

对象方法:

   :class="{ 'active': isActive }"

   :class="{'active':isActive==-1}"
复制代码

或者

   :class="{'active':isActive==index}"
复制代码

绑定并判断多个

   :class="{ 'active': isActive, 'sort': isSort }"
复制代码

第二种(放在data里面)


   :class="classObject"

   data() {

       return {

            classObject:{ active: true, sort:false }

       }

   }
复制代码

数组方法


   :class="[isActive,isSort]"

   data() {

       return{

           isActive:'active',

           isSort:'sort'

       }

   }

   :class="[isActive?'active':'']"

   :class="[isActive==1?'active':'']"
复制代码

说明vue等单页面应用及其优缺点?

优点:Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合 的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、 组件化、轻量、简洁、高效、快速、模块友好。

缺点:不支持低版本的浏览器,最低只支持到IE9;

不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);

第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。
复制代码

如何让css只在当前组件中起作用?

在当前组件style标签中添加 scoped

vuex是什么?怎么使用?哪种功能场景使用它?

是状态管理,在main.js引入store,注入。只用来读取的状态集中放在store中;

改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。

场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

请列出使用axios时,get和post提交数据的方式?

  1. get可以直接把数据以?加&符号的方式直接拼接到url地址上

  2. axios.get(url,data)、axios({method:'get',url:请求地址,params:{提交的数据}})

  3. axios.post(url,data)、axios({method:'post',url:'请求地址'},data:{提交的数据})

axios是什么?怎么使用?


//请求后台资源的模块
   //使用npm install axios -s 来安装
   //在main.js入口文件中引用:import axios from {axios}
   //将axios挂载到vue实例上:vue.prototype.$axios = axios
   //在config文件夹中的index.js中的Dev中填写
   ProxyTable:{
   ‘/api’:{
   Target:’代理服务器的目标地址’,
   changeOrigin: true,
   PathRewrite: {“^/api”:” ”}
   }
   }
  // 在需要调用后台资源的组件中进行使用this.$axios({
   Url: ‘/api/地址’,
   Method:’post’,//post请求必须设置
   Params:{要传的参数}//post要将params设置为data
   }).then(res=>{}).catch(err=>{})

作者:颉旺飞
链接:https://juejin.cn/post/6901813424796860430
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
posted on 2020-12-03 08:47  颉旺飞  阅读(390)  评论(0编辑  收藏  举报