河间市网站建设价格,佛山外贸网站建设报价,百度信息流怎么收费,信息查询app1.什么是mvvm模式#xff0c;谈谈你的理解#xff1f; MVVM - Model View ViewModel#xff0c;数据#xff0c;视图#xff0c;视图模型view 可以通过 事件绑定 的方式影响 model#xff0c;model 可以通过 数据绑定 的形式影响到view#xff0c;viewModel是把 model 和…1.什么是mvvm模式谈谈你的理解 MVVM - Model View ViewModel数据视图视图模型view 可以通过 事件绑定 的方式影响 modelmodel 可以通过 数据绑定 的形式影响到viewviewModel是把 model 和 view 连起来的桥梁这样就实现了数据的双向绑定。2.vue构建初始化工程的步骤vuecli3终端执行1.npm install -g vue/cli2.vue create hello-world3.cd hello-world4.npm run serve3.列举几个vuecli 项目目录中文件夹以及它们的作用|-- dist # 打包后文件夹 |-- public # 静态文件夹 | |-- favicon.ico | |-- index.html #入口页面|-- src # 源码目录 | |--assets # 模块资源| |--components # vue组件| |--views # 视图文件| |--App.vue # 公共主组件| |--main.js # 入口文件加载公共组件| |--router.js # 路由配置|-- vue.config.js # 配置文件 |-- .gitignore |-- babel.config.js # babel语法编译 |-- package.json # 项目基本信息 npm包管理4.谈谈vuecli如何解决本地调用api的跨域问题以vuecli3为例配置vue.config.js中的proxymodule.exports {devServer: {proxy: {/api: {target:http://xxxxxx,//api地址changeOrigin:true, //是否跨域secure: false, //https改为truepathRewrite: {^/api : },}},host: localhost, // can be overwritten by process.env.HOSTport: 8080, },publicPath: ./, }5.vue.js 的优点渐进式框架只关注视图层mvvm架构模式实现数据的双向绑定数据驱动组件系统体积小速度快 。6.vue.js双向绑定的原理利用Object.defineProperty()这个方法重新定义了对象获取属性值get和设置属性值set的操作来实现的。7.vue页面不重新渲染或者调用this.$forceUpdate()方法8.请谈谈你对vue.js 生命周期的理解1.什么是vue.js的生命周期Vue 实例有一个完整的生命周期也就是从开始创建、初始化数据、编译模版、挂载 Dom - 渲染、更新 - 渲染、卸载等一系列过程我们称这是 Vue 的生命周期。2.各个生命周期的作用9.在那个生命周期下调用异步请求mounted和created下都可以本人建议是在created下调用。10.为什么vue中组件里面的data是一个函数而不是一个对象呢因为组件可能被用来创建多个实例如果data仍然是一个纯粹的对象则所有的实例将共享引用一个数据对象通过提供data函数每次创建一个新的实例之后我们能够调用data函数从而返回一个全新的副本数据对象这样每一个实例都有自己私有的数据空间不会互相影响11.vue-router路由模式有几种请谈谈你对它们的理解常用的路由模式有hash和history最直观的区别是hash模式url上会携带有一个#而history不携带hash:即地址栏URL中的#符号它的特点在于hash值虽然出现在URL中但不会被包括在HTTP请求中对服务端完全没影响因此改变hash值不会重新加载页面。history:利用了HTML5 History interface 中新增的pushState() 和 replaceState()方法。这两个方法应用于浏览器历史记录栈提供了修改历史记录的功能执行修改时虽然改变了URL但是不会立即的向服务端发起请求。因此可以说hash和history模式都属于浏览器自身的特性vue-router只是利用了这两个特性来实现前端路由但是在history模式下会出现刷新404的问题对于这个问题我们只需要在服务器配置nginx如果URL匹配不到任何静态资源就跳转到默认的index.htmllocation /{root /data/nginx/html;index index.html index.htm;if (!-e $request_filename) {rewrite ^/(.*) /index.html last;break;}}12.vue-router传参方式以及如何获取参数通过router.js文件中配置path的地方动态传递参数/detail/:id传递的时候 this.$router.push({name:,params:{id:}})获取的时候 this.$route.params.id或者用query的方式 this.$route.query.id13.vue-router有几种常用的路由守卫谈谈他们各自的作用守卫的种类全局前置守卫const router new VueRouter({ ... })router.beforeEach((to, from, next) {// ...
})全局后置守卫router.afterEach((to, from) {// ...
})全局解析守卫在 2.5.0 你可以用 router.beforeResolve 注册一个全局守卫;
这和 router.beforeEach 类似;
区别是在导航被确认之前同时在所有组件内守卫和异步路由组件被解析之后解析守卫就被调用。路由独享守卫const router new VueRouter({routes: [{path: /,component: Index,beforeEnter: (to, from, next) {// ...}}]
})14.如何使用vuex第一步安装npm install vuex -S第二步创建store.jsimport Vue from vue;
import Vuex from vuex;
Vue.use(Vuex);
//创建Vuex实例对象
const store new Vuex.Store({strict:debug,//在不是生产环境下都开启严格模式state:{},getters:{},mutations:{},actions:{}
})
export default store;第三步注入vueximport Vue from vue;
import App from ./App.vue;
import store from ./store;
const vm new Vue({store:store,render: h h(App)
}).$mount(#app)15.vuex中有几个核心属性分别是什么一共有5个核心属性分别是:state 唯一数据源,Vue 实例中的 data 遵循相同的规则getters 可以认为是 store 的计算属性,就像计算属性一样getter 的返回值会根据它的依赖被缓存起来且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象你可以以属性的形式访问这些值。const store new Vuex.Store({state: {todos: [{ id: 1, text: ..., done: true },{ id: 2, text: ..., done: false }]},getters: {doneTodos: state {return state.todos.filter(todo todo.done)}}
})store.getters.doneTodos // - [{ id: 1, text: ..., done: true }]mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发const store new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count}}
})store.commit(increment)action Action 类似于 mutation不同在于Action 提交的是 mutation而不是直接变更状态Action 可以包含任意异步操作const store new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count}},actions: {increment (context) {context.commit(increment)}}
})module 由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。为了解决以上问题Vuex 允许我们将 store 分割成模块module。const moduleA {state: () ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}const moduleB {state: () ({ ... }),mutations: { ... },actions: { ... }
}const store new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // - moduleA 的状态
store.state.b // - moduleB 的状态16.axios请求代码应该写在组件的methods中还是vuex的actions中如果请求来的数据是不是要被其他组件公用仅仅在请求的组件内使用就不需要放入vuex 的state里。如果被其他地方复用这个很大几率上是需要的如果需要请将请求放入action里方便复用。17.从vuex中获取的数据能直接更改吗从vuex中取的数据不能直接更改需要浅拷贝对象之后更改否则报错18.vuex中的数据在页面刷新后数据消失用sessionstorage 或者 localstorage 存储数据存储 sessionStorage.setItem( 名, JSON.stringify(值) )
使用 sessionStorage.getItem(名) ---得到的值为字符串类型用JSON.parse()去引号19.mutation和action有什么区别action 提交的是 mutation而不是直接变更状态。mutation可以直接变更状态action 可以包含任意异步操作。mutation只能是同步操作提交方式不同action 是用this.store.dispatch(ACTION_NAME,data)来提交。
mutation是用this.$store.commit(SET_NUMBER,10)来提交接收参数不同mutation第一个参数是state而action第一个参数是context其包含了{state, // 等同于 store.state若在模块中则为局部状态rootState, // 等同于 store.state只存在于模块中commit, // 等同于 store.commitdispatch, // 等同于 store.dispatchgetters, // 等同于 store.gettersrootGetters // 等同于 store.getters只存在于模块中
}20.在v-model上怎么用Vuex中state的值需要通过computed计算属性来转换。input v-modelmessage
// ...
computed: {message: {get () {return this.$store.state.message},set (value) {this.$store.commit(updateMessage, value)}}
}21.请谈谈watch,computed以及methods的区别computed一般是一个依赖值衍生新的值值结果会被缓存除非依赖值发生变化才会重新计算( eg购物车结算 )watch一般监听一个对象键值是需要观察的变量或者表达式键值对应是回调函数主要是负责监听某些特定数据的变化从而进行某些具体的业务逻辑methods方法表示一个具体的操作负责书写主要业务逻辑22.说出几个vue.js常用指令v-modelv-forv-textv-htmlv-onv-bindv-ifv-showv-cloak畅所欲言...23.v-show与v-if有什么区别v-if 是真正的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建也是惰性的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 的 display 属性进行切换。 所以v-if 适用于在运行时很少改变条件不需要频繁切换条件的场景v-show 则适用于需要非常频繁切换条件的场景。24.class和style如何动态绑定1.Class 可以通过对象语法和数组语法进行动态绑定对象语法div v-bind:class{ active: isActive, text-danger: hasError }/divdata: {isActive: true,hasError: false
}数组语法div v-bind:class[isActive ? activeClass : , errorClass]/div data: { activeClass: active, errorClass: text-danger
}2.Class 可以通过对象语法和数组语法进行动态绑定对象语法 div v-bind:style{ color: activeColor, fontSize: fontSize px }/div data: { activeColor: red, fontSize: 30 } 数组语法 div v-bind:style[styleColor, styleSize]/div data: { styleColor: {color: red}, styleSize:{fontSize:23px}
}25.vue事件修饰符以及各个的作用.stop:阻止事件冒泡 .native:绑定原生事件.once:事件只执行一次 .self 将事件绑定在自身身上相当于阻止事件冒泡 .prevent:阻止默认事件 .passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用26.vue中获取dom的方式在标签中加上refdom然后在代码中this.$refs.dom这样就拿到了页面元素例如div classbox refmyBox你好/div让你好的颜色显示为红色this.$refs.myBox.style.color red27.vue中$nextTick的使用vue中DOM的异步更新提前获取更新之后的DOM this.$nextTick((){})28.vue初始化页面会出现闪动问题该如何解决在App.vue 根dom上面加一个v-cloakcss内加一个[v-cloak] { display: none}29.vue如何优化页面加载UI组件库尽量使用cdn的方式引入配置路由懒加载的方式增加loading图,提升用户体验30.v-on可以监听多个方法吗可以监听多个不同类型的方法不可以监听同一种事件31.列举vue组件通信的几种方式32.父组件和子组件生命周期执行的顺序1.加载渲染过程 父 beforeCreate - 父 created - 父 beforeMount - 子 beforeCreate - 子 created - 子 beforeMount - 子 mounted - 父 mounted 2.子组件更新过程 父 beforeUpdate - 子 beforeUpdate - 子 updated - 父 updated 3.父组件更新过程 父 beforeUpdate - 父 updated 4.销毁过程 父 beforeDestroy - 子 beforeDestroy - 子 destroyed - 父 destroyed33.父组件可以监听到子组件的生命周期吗hook:监听的生命周期 自定义事件名// Parent.vueChild hook:mounteddoSomething /Child doSomething() { console.log(父组件监听到 mounted 钩子函数 ...);},
// Child.vue mounted(){ console.log(子组件触发 mounted 钩子函数 ...);},
// 以上输出顺序为
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ... 34.vue引入组件的步骤1.script 里面用import 引入组件2.在export default里面用components:{}注册组件名字3.在template中挂载组件35.谈谈对keep-alive的了解一般是用来配合路由缓存组件36.ES6常用知识点https://www.cnblogs.com/ainyi/p/8537027.html37.谈谈你对深浅拷贝的理解本质区别在于复制的是引用还是复制的实例所谓浅拷贝是仅仅复制了引用换句话说复制的变量和被复制的指向是同一个引用彼此之间操作会互相影响深拷贝是将原对象层级属性一一复制相当于直接复制的实例形成两个独立的对象彼此操作不会互相影响实现深拷贝的方式一般有递归遍历es6 实现数组深拷贝的方法 var arr2 [...arr1] or var arr2 Array.from(arr1) 或者是通过json对象来实现var newObjJSON.parse(JSON.stringfy(obj))38.说出你了解的前端安全问题以及解决方案xss跨站脚本攻击CSRF跨站请求伪造sql注入https://blog.csdn.net/m0_48446542/article/details/108271860.......未完待续
