![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue框架
文章平均质量分 64
cjx177187
这个作者很懒,什么都没留下…
展开
-
Vue3.0
4.1 Composition API (组合API)vue3.0更好的支持TypeScript。 4.2 新的内置组件。 2.1 性能的提升。 4.3 其他改变。原创 2022-09-26 17:27:02 · 220 阅读 · 0 评论 -
Vuex(State、Getter、Mutation、Action)
Action 提交的是 mutation,而不是直接变更状态。属性,并在属性中定义修改值的函数,后面使用时就可以将函数名直接当作变量来使用。getter就就像是store的计算属性,它会传入state对象供我们操作。//如果fnAsync函数是一个异步业务函数,就会导致更新失败。就类似于之前的Data,但是这个state全局都可以使用。它才会去帮我们通知所有使用数据的组件更新数据 刷新。中的函数来进行修改仓库中的值。页面上使用语句------"我就是所有共享的数据""box2修改的值""box2修改的值"原创 2022-09-26 17:19:57 · 479 阅读 · 0 评论 -
--引入方式--
"我就是所有共享的数据"原创 2022-09-26 17:19:25 · 101 阅读 · 0 评论 -
---Vue仓库--
1.为了方便实现组件之间的数据共享,Vuex是他们团队借鉴了redux,用来实现vue组件全局状态(数据)管理的一种机制.如果你实在不知道开发中什么数据才应该保存到Vuex中,那你就先不用Vuex,需要的时候自然就会想到它。存储在 vuex中的数据都是响应式的,能够实时保持数据与页面的同步。一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可.能够在vuex中集中管理共享的数据,易于开发和后期维护。原创 2022-09-26 17:18:27 · 176 阅读 · 0 评论 -
-路由守卫-
出发路由,预备从当前组件离开,判断路由变化,判断组件是否重用,判断新路由初始化,判断组件初始化,路由与组件初始化完毕,路由组件重定向完毕。,组件被激活,使用不了this,故构造指定该next 可以接收一个回调函数接收当前vm 实例----路由传参获取参数,得到初始化数据。,组件重用时被调用----路由传参获取参数,避免增添watch 开销。a,路由鉴权-----用户体验:界面,功能,bug,效率,权限。3)组件内部生命周期守卫----针对组件。,路由初始化(组件未初始化)----原创 2022-09-26 17:17:46 · 57 阅读 · 0 评论 -
路由----初始
前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue 就像jQuery和dom操作一样。// history底层是切换组件得方式是使用H5的windows.history的技术,当地址栏的history状态发生变化时,// hash切换组件得方式是使用是的老技术Hash值,当地址栏的hash发生变化时,//注意:子路由中的匹配地址不要在前面加/ 否则就会认为是根路由。原创 2022-09-26 17:17:09 · 49 阅读 · 0 评论 -
Vue----全局组件和局部组件
1.全局组件:组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符。2.局部组件:一个vm实例可以有多个局部组件,但是只能供当前vm实例使用。(filter举例,不只filter只要是Vue里面的方法都是可以用的)(不会报错,但是只能使用一次 多次使用只显示第一个)只有当前组件拥有的功能(指令,过滤器,组件)所有组件共同的功能(指令,过滤器,组件)没有单文件组件时不能使用单标签。注册的组件不要跟系统标签同名。原创 2022-09-14 17:55:42 · 119 阅读 · 0 评论 -
Vue----全局组件和局部组件
1.全局组件:组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符。2.局部组件:一个vm实例可以有多个局部组件,但是只能供当前vm实例使用。(filter举例,不只filter只要是Vue里面的方法都是可以用的)(不会报错,但是只能使用一次 多次使用只显示第一个)只有当前组件拥有的功能(指令,过滤器,组件)所有组件共同的功能(指令,过滤器,组件)没有单文件组件时不能使用单标签。注册的组件不要跟系统标签同名。原创 2022-09-11 14:49:07 · 385 阅读 · 0 评论 -
Vue----组件
点击原创 2022-09-11 14:45:11 · 94 阅读 · 0 评论 -
Vue----生命周期函数
答:create() beforeCreate() mounted() berforeUpdate() updated() beforeDestroy()相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数。2.如果VM的数据源发生变化,会让内存中生成新的NVode 新的NVode会和旧的VNode作比较然后更新,它通过底层的render函数。// 更新的是data,这时候还没有刷新UI,它会找一个合适的时机去刷新UI。原创 2022-09-11 14:43:46 · 196 阅读 · 0 评论 -
Vue----自定义指令
以一个input元素自动获得焦点为例,当页面加载时,使用autofocuse可以让元素将获得焦点 ,但是autofocuse在移动版Safari上不工作,现在注册一个使元素自动获取焦点的指令。只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。然而,有的情况下,仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。// 所绑定的节点的元素的容器中的数据发生变化时就执行。一个对象,包含指令名称及该指令所绑定的表达式信息。指令注册类似于组件注册,包括。原创 2022-09-11 14:43:00 · 61 阅读 · 0 评论 -
Vue----数据源中数组的操作
会发现其实数组中的元素是改变了的,只是页面没有刷新所以就没有渲染到页面上。因为对于对象取成员官方是做了劫持的,但是数组取下标正好官方没有做劫持。原因很简单,数组的下标是可以有无限个的,换句话说就是劫持不过来。运行代码,点击按钮会发现页面上第一个元素并没有被改变,但是数组中的元素改变了吗?当然不是我们可以使用数组的方法来修改其元素。或者利用数组取下标的方式修改元素后,刷新页面。// 修改第一个元素的值。// 修改第一个元素的值。// 修改第一个元素的值。// 修改第一个元素的值。>改变第一个元素原创 2022-09-11 14:42:09 · 289 阅读 · 0 评论 -
面试题:computed watch data filter
会把计算结果缓存起来,并监听我们呢计算过得数据源,如果被监听的数据源发生了变化,才会重新计算。会把计算结果缓存起来,并监听我们呢计算过得数据源,如果被监听的数据源发生了变化,才会重新计算。:===>必须同名 默认只能监听data的第一层 可以设置深度监听。:====>vm劫持 ,同名有优先级 名字不用_和$打头 如果使用Vue判定为官方关键字就不会劫持。:====>vm劫持 同名优先级 函数和事件中使用。:====>vm劫持 同名优先级 函数和事件中使用。答:计算属性,方法,数据源。原创 2022-09-11 14:41:29 · 130 阅读 · 0 评论 -
Vue----属性侦听器
改变指定按钮颜色:将class属性进行绑定,添加一个改变后的的样式类名,并设置为false.监听器监听到后将其设置为true。watch:{x(){}} //x就是监听了data中的x属性的一个监听器。computed:{xx(){}}, //xx就是一个计算属性。向下滑动内容使内容上方的按钮(动态添加)根据滑动到的内容显示选中的颜色。利用监听器,当内容滑动到一定的高度时就改变指定按钮的背景颜色。data:{x:12},//vm的数据源。methods:{},//方法。filter:{},//过滤器。原创 2022-09-11 14:40:24 · 204 阅读 · 0 评论 -
Vue计算属性案例-----菜单页面计算
/ 当删除完所有菜品时刷新页面,结束退出函数。// 当count数量减少为-1时移除菜品。当数量减为0时再次点击减少按钮就移除菜品。>单价:{{el.price}}-- 添加和减少按钮 -->>总价:{{total}}元菜品数量变化后计算出总价格。-- 菜品图片 -->实现菜品数量的添加和减少。>购物车页面计算原创 2022-09-11 14:39:33 · 238 阅读 · 0 评论 -
Vue----计算属性
计算属性会把使用到的data中的属性缓存起来,防止页面发生大量重复计算,提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性methods方法没有计算结果缓存起来,data任何数据发生改变,方法都会被重新调用一遍 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用。//比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性。//1.如果是修改了data中监听的某个的属性值 计算属性就会运行。原创 2022-09-11 14:38:46 · 346 阅读 · 0 评论 -
Vue----过滤器(filter)
filter主要用于数据展示之前的处理过滤器只能用在v-bind或者插值表达式中。过滤器只能用在v-bind或者插值表达式中。过滤器只能用在v-bind或者插值表达式中。-- 过滤器用法 需要过滤的元素|过滤函数 -->-- 过滤器用法 需要过滤的元素|过滤函数 -->原创 2022-09-11 14:38:02 · 352 阅读 · 0 评论 -
新浪微博案例
利用for循环写出新浪页面思路:利用for循环,建立多个盒子 利用点语法取出用户头像、名称、微博内容、微博插图的内容进行渲染 由于微博插图有多个,所以需要在for循环中嵌套一个循环取出每一个插图的src并渲染到页面上去,这里装微博插图的盒子要设置成弹性盒子,方便排版注意:在使用数据中的图片地址时,img标签中要对src属性进行绑定 渲染用户是否在线(online_status的值)时,值为1则为在线,为0则为不在线;那么就要设置两个class的值,在线将盒子背景变为绿色,不在线将盒子背原创 2022-09-10 15:38:23 · 460 阅读 · 1 评论 -
Vue-----循环渲染
如果if和for套在一层,数据容器发生变化时,if会重新判断一遍嵌套的写法 数据容器变化时 if只判断新增的数据这样当arr 数组某一项数据发生变化时,只对新增的数据进行v-if 判断,节约渲染效率。这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中解决方案:wx采用的是block元素 vue呢?这样引起的问题是:arr 数组新增一项数据时,会对每一项再做一遍v-if 循环,然后for 循环渲染。// 让数据跟真实的dom-----关联 使之不发生渲染混乱的关系。原创 2022-09-10 15:37:45 · 854 阅读 · 0 评论 -
Vue----条件渲染
/1.使用的变量为true就显示,false就隐藏。//2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果。//3.v-if的做法是删除节点,v-show做法是操作css的display:none。v-if具有较高的 切换消耗,常常用在用户不常切换的模块。v-show具有较高的性能消耗,常常用在频繁切换的模块中。display:none 脱离文档流。v-if 删除节点。根据它们底层的设计不一样有各自的使用场景。原创 2022-09-10 15:37:07 · 81 阅读 · 0 评论 -
MVC和MVVM的区别
(1)MVC在实际应用开发场景中,开发者常用的一种设计模式是MVC(eg:node(后端)中的MVC设计模式):(2)MVVM。原创 2022-09-10 15:36:16 · 319 阅读 · 0 评论 -
vue介绍
由于低级浏览器不 支持 CSS3,但 CSS3 的效果又太优秀不忍放弃,所以在高级浏览中使用 CSS3 而低级 浏览器 只 保证最基本的功能。关键的区别 是他们所侧重的内容,以及这种不同造成 的工作流程的差异 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高 级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。Vue.js是前端的主流框架之一,和Angular.js、React.js并称为前端三大主流框架。原创 2022-09-10 15:35:11 · 150 阅读 · 0 评论 -
Vue----数据绑定
1.自己实现,vue可以自己实现(没必要) 微信开发可以自己实现(只能自己实现)利用input事件,用户交互的时候,获取用户输入的值,然后把值绑定到data容器中。如果用户操作DOM,改变了页面,反之也会让数据容器中的数据的值改变。如果变量变了也会让页面刷新(DOM操作让页面改变):只能由代码改变UI或者只能由UI改变代码。:代码改变UI,UI也能改变代码。双向数据绑定的实现: 2种方式。2.系统指令:v-model。什么是双向数据绑定?原创 2022-09-10 15:34:05 · 153 阅读 · 0 评论 -
Vue--样式绑定
组件或者模块得切换====>动态组件 v-if/v-show。也可以直接在style里面使用多个变量对象,或者直接写上对象。做切换效果技术====>样式绑定。路由切换====>router。如果要修改父盒子中所有得元素就可以使用class绑定。:点击按钮显示和隐藏元素(开关思想):点击按钮切换盒子得背景颜色。也可以添加一个对象进行修改。原创 2022-09-10 15:32:57 · 89 阅读 · 0 评论 -
Vue---方法和事件绑定
点击事件2原创 2022-09-10 15:32:18 · 559 阅读 · 0 评论 -
Vue基础指令
v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏): 在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等,插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名。3.1.界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下。简写形式: :src="[10,20,30]"原创 2022-09-10 15:28:32 · 211 阅读 · 0 评论 -
vue框架引入方式
npm run serve //生成的打包文件在内存中不会写入磁盘用于开发阶段。npm run build //生成的打包文件在dist中 用于项目上线。"hello vue 文件 写出来的页面"webpack.config.js文件。package.json文件。index.html文件。原创 2022-09-10 15:27:50 · 640 阅读 · 0 评论