-
vue 存储对象 不要监听_Vue 数据响应式深度理解
2020-11-25 04:56:42什么是响应式我踢你一脚,你会喊疼,那你就是响应式的若一个物体能对外界的刺激做出反应,它就是响应式的响应式网页如果我改变窗口的大小,网页内容会做出响应,那就是响应式网页比如前端著名响应式网页Vue 的 data...什么是响应式
我踢你一脚,你会喊疼,那你就是响应式的
若一个物体能对外界的刺激做出反应,它就是响应式的
响应式网页
如果我改变窗口的大小,网页内容会做出响应,那就是响应式网页
比如前端著名响应式网页
Vue 的 data是响应式
const vm=new Vue({data:{n:0}})
我如果修改vm.n,那么UI中的n就会响应我
Vue 2通过Object.defineProperty来实现数据响应式
vue.js的追踪变化,使用Object.defineProperty把这些属性全部转为getter/setter,而受到defineProperty的限制,vue不能检测到对象属性的添加删除,这个Bug是使用Vue.set或vm:$set来解决的。
理解vue响应式原理前我们必须先知道getter和setter以及Object.defineProperty几个概念
下面将简单用几个例子理解一个getter和setter以及Object.defineProperty
先简单理解getter和setter
getter和setter
定义的时候直接设置一个getter/setter
let obj0 = { 姓: "吴", 名: "亦凡", age: 28 }; // 需求一,得到姓名 let obj1 = { 姓: "吴", 名: "亦凡", 姓名() { return this.姓 + this.名; }, age: 28 }; console.log("需求一:" + obj1.姓名()); // 姓名后面的括号能删掉吗?不能,因为它是函数 // 怎么去掉括号?
比如上面的例子,我要得到姓名,可以通过console.log("需求一:" + obj1.姓名());获得姓名,如果我要求直接obj1.姓名不加括号也可以获得姓名,怎么做?
getter
// 需求二,姓名不要括号也能得出值 let obj2 = { 姓: "吴", //原始值 名: "亦凡", get 姓名() { return this.姓 + this.名; }, age: 28 }; console.log("需求二:" + obj2.姓名);
总结:getter 就是这样用的。不加括号的函数,仅此而已。
setter
// 需求三:姓名可以被写 let obj3 = { 姓: "吴", 名: "亦凡", get 姓名() { return this.姓 + this.名; }, set 姓名(xxx){ this.姓 = xxx[0] this.名 = xxx.slice(1) }, age: 18 }; obj3.姓名 = '李嘉恒' //setter用 xxx触发set函数 console.log(`需求三:姓 ${obj3.姓},名 ${obj3.名}`)
总结:setter 就是这样用的。用 = xxx 触发 set 函数
控制台出现的{n:(...)} 并不存在一个n,而是存在一个getter n和一个setter n来模拟对n的读写操作。
为什么要把n变为getter n和 setter n 呢?
我们再来理解Object.definePropery()
Object.defineProperty
定义完一个对象后(obj3),你想在它身上添加新的get,set的时候通Object.defineProperty放xxx的值
var_xxx = 0 //先声明再用 否则会陷入死循环 //_xxx 用来偷偷存储 n 的值 Object.defineProperty(data3, 'xxx', { //obj3是对象,xxx是要监听的 get(){ return _xxx }, set(value){ _xxx = value //value为所传的值 } })
Object.defineProperty可以给对象添加属性value,可以给对象添加getter/setter, getter/setter用于对属性的读写进行监控。
代理和监听
代理(设计模式)
对myData对象的属性读写,会全权由另一个对象vm负责
那么vm就是myData的代理(类比房东和中介)
比如myData.n不用,偏要用vm.n来操作哦myData.n,这样用户不能直接的访问到原始数据,对数据是一个保护作用,比如你去通过房屋中介租房子,你并不能直接接触到房东。中介和房东之间就是一个全权代理的关系。
let data0 = { n: 0 } // 需求一:用 Object.defineProperty 定义 n let data1 = {} Object.defineProperty(data1, 'n', { value: 0 }) console.log(`需求一:${data1.n}`) // 需求二:n 不能小于 0 // 即 data2.n = -1 应该无效,但 data2.n = 1 有效 let data2 = {} data2._n = 0 // _n 用来偷偷存储 n 的值 Object.defineProperty(data2, 'n', { get(){ return this._n }, set(value){ if(value < 0) return this._n = value } }) console.log(`需求二:${data2.n}`) data2.n = -1 console.log(`需求二:${data2.n} 设置为 -1 失败`) data2.n = 1 console.log(`需求二:${data2.n} 设置为 1 成功`) // 抬杠:那如果对方直接使用 data2._n 可以篡改我的代码?如何做到不让别人访问我的_n?使用代理 // 需求三:使用代理 let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象,无法访问 function proxy({data}/* 解构赋值,别TM老问 */){ const obj = {} // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化 Object.defineProperty(obj, 'n', { get(){ return data.n }, set(value){ if(value<0)return data.n = value } }) return obj // obj 就是代理 } // data3 就是 obj console.log(`需求三:${data3.n}`) data3.n = -1 console.log(`需求三:${data3.n},设置为 -1 失败`) data3.n = 1 console.log(`需求三:${data3.n},设置为 1 成功`) // 需求四 let myData = {n:0} let data4 = proxy({ data:myData }) // 括号里是匿名对象,无法访问 // data3 就是 obj console.log(`杠精:${data4.n}`) myData.n = -1 console.log(`杠精:${data4.n},设置为 -1 失败了吗!?`) // 我现在改 myData,还能改
监听
就算用户擅自修改 myData,也要拦截他,使用监听
// 需求五:就算用户擅自修改 myData,也要拦截他 let myData5 = {n:0} let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象,无法访问 function proxy2({data}/* 解构赋值 */){ // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化 let value = data.n //通过value记录原始的值 Object.defineProperty(data, 'n', { get(){ return value }, set(newValue){ if(newValue<0)return value = newValue } }) // 就加了上面几句,这几句话会监听 data const obj = {} Object.defineProperty(obj, 'n', { get(){ return data.n }, set(value){ if(value<0)return//这句话多余了 data.n = value } }) return obj // obj 就是代理 } // data3 就是 obj console.log(`需求五:${data5.n}`) myData5.n = -1 console.log(`需求五:${data5.n},设置为 -1 失败了`) myData5.n = 1 console.log(`需求五:${data5.n},设置为 1 成功了`) // 这代码看着眼熟吗? // let data5 = proxy2({ data:myData5 }) // let vm = new Vue({data: myData}) // 现在我们可以说说 new Vue 做了什么了
Vue对data做了什么?
vm=new Vue({data:myData})
1.会让vm成为myData的代理(proxy)
2.会让myData的所有属性进行监控
监控的目的是为了防止myData的属性发生了变化 vm却不知道(知道了才能刷新页面,达到响应式,就可以调用render(data)),总之,就是你对data的任何修改我Vue必须都知道
Object.defineProperty的Bug问题
Object.defineProperty(obj,'n',{...})
必须要有一个'n', 才能监听&代理 obj.n,如果前端开发者比较水,没有给n怎么办?
Vue会给出一个警告,并且Vue只会检查第一层属性
只会检查第一层属性是什么意思呢?看下面例子
//一般没人这么写,我这样写是为了引用完整版 Vue import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; new Vue({ data: { obj: { a: 0 // obj.a 会被 Vue 监听 & 代理 } }, template: ` <div> {{obj.b}} <button @click="setB">set b</button> </div> `, methods: { setB() { this.obj.b = 1; //请问,页面中会显示 1 吗? } } }).$mount("#app");
请问上面例子中页面中会显示 1 吗?
答案是:不会
为什么:因为Vue没法监听一开始不存在的obj.b
解决办法
1.那我把key都声明好,后面就不用再加属性
2.使用Vue.set或者this.$set
Vue.set 和 this.$set
作用
新增key
自动创建代理和监听(如果没有创建过)
触法UI更新(但并不会立刻更新)
举例
this.$set(this.object,'m',100)
如果data中有数组怎么办
你没办法提前声明所有key
数组长度可以一直增加,下标就是key,你没有办法提前把数组胡key都声明出来 ,Vue
也不能检测新增的下标,难道每次改数组都要用Vue.set /this.$set?
对此尤雨溪纂改了数组的API,调用会更新UI
对象中新增的key
Vue没有办法事先监听和代理
要使用set来新增 key,创建监听和代理,更新UI.
最好提前把属性都写出来,不要新增key
但数组做不到 不新增key
数组中新增key
也可以用 set 来新增key,更新UI,不过7个API更方便对数组增删,这7个API会自动处理监听和代理,并更新UI,结论:数组新增key最好通过API.
总结
Object.defineProperty
可以给对象添加属性value
可以给对象添加getter/setter
getter/setter用于对属性的读写进行监控
啥是代理(设计模式)
对myData对象的属性读写,会全权由另一个对象vm负责
那么vm就是myData的代理(类比房东和中介)
比如myData.n不用,偏要用vm.n来操作myData.n
vm=new Vue({data:myData})
会让vm成为myData的代理(proxy)
会对myData的所有属性进行监控
为什么要监控?为了防止myData的属性变了,vm不知道
vm知道了又如何?知道属性变了就可以调用render(data)
UI=render(data)
如果data 有多个属性n,m,k那么就会有get n/ get m/ get k等
Vue的Date的Bug
1.如果有多个key,需要提前声明
2.Vue.set(){} / this.$set(){}可以添加data数据
响应式原理
vm=new Vue({data:myData})
把options.data传给vue之后,data会被Vue监听,这个data会被篡改,本来的n会变成getter n,setter n
会被Vue实例代理,比如说new Vue 得到一个vm,这个vm就是data的代理,每次我们对data的读写,都会被Vue监控,Vue只要发现对它进行了修改就会更新UI
Vue目前通过Object.defineProperty来实现数据响应式。
-
Vue监听屏幕宽度实现响应式
2019-09-10 02:17:30今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页,这就意味着要做响应式,也就是要监听网页的宽度。 用Vue-cli搭建好项目后 在app.vue中写一个方法来监听屏幕宽度 setMobile(){ addEventListener...今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页,这就意味着要做响应式,也就是要监听网页的宽度。
用Vue-cli搭建好项目后
在app.vue中写一个方法来监听屏幕宽度
setMobile(){ addEventListener('resize',()=>{ //写一个监听要执行的函数 }) }
然后使用
document.documentElement.clientWidth || document.body.clientHeight;
来获取当前屏幕的宽度。
因为这个监听所有页面都能适用,所有引入了Vuex,关于Vuex的介绍不多赘述,他能在非父子,兄弟节点中传递数据。
简历store.js,导入Vuex,声明一个数据
state:{ isMobile:false//确定是否为手机宽度 },
最后可以在页面中使用this.$store.state.isMobile方法来获取是否为手机页面,使用方法例如:要在手机端隐藏某些组件
<nav class="nav-container" v-show="this.isShow&&this.$store.state.isMobile" > <my-nav/> </nav> //this.isShow是这个组件是否显示的一个数据 //this.$store.state.isMobile是获取的屏幕是否为手机页面的数据 //当他为true时这个组件就能显示 //当他为false时这个组件就能显示
完整代码
APP.vue
getScreen(){ let clientWidth =document.documentElement.clientWidth || document.body.clientHeight; if(clientWidth < 768){//当屏幕小于768时,设置Vuex里的数据为true this.$store.commit("SET_MOBLIE",true) }else{//反之,设置Vuex里的数据为false this.$store.commit("SET_MOBLIE",false) } }, setMobile(){ //监听屏幕 addEventListener('resize',()=>{ this.getScreen(); }) }
store.js
export default new Vuex.Store({ state:{ isMobile:false }, mutations:{ // 判断是不是手机端 SET_MOBLIE(state,isMobile){ state.isMobile = isMobile; } } })
-
Vue实现网页版响应式顶部导航栏-------插槽-子组件-父组件
2020-04-25 16:21:341、NavBar.vue上代码: 里面ul>标签放置一个插槽,用来放置多个li>标签。为什么要放插槽呢??因为在一些地方我们可能还会用到像这样模板,只是那时的li>标签内容不一样了。所以插槽就很好解决了,下次使用...一、先上结果图:
当屏幕缩小时的界面:
二、首先我们先创建一些用到的组件,如图
二、顶部组件的相关操作(了解插槽)
1、NavBar.vue上代码:
里面ul>标签放置一个插槽,用来放置多个li>标签。为什么要放插槽呢??因为在一些地方我们可能还会用到像这样模板,只是那时的li>标签内容不一样了。所以插槽就很好解决了,下次使用只需要改li>标签的内容即可<template> <nav> <div class="logo"> <slot name="logo-icon"><img src="../../assets/logo.jpg"></slot> <slot name="logo-title">巧克力电影</slot> </div> <div class="search"> <el-input placeholder="请输入内容" size="medium" class="input_search"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input> </div> <ul class="nav-menu"> <slot></slot> </ul> <div class="burger" @click="handleBurger()"> <div class="top-line"></div> <div class="middle-line"></div> <div class="bottom-line"></div> </div> </nav> </template> <script> export default { name: "NavBar", methods:{ handleBurger(){ const burger=document.querySelector(".burger"); const navMenu=document.querySelector(".nav-menu"); burger.addEventListener("click",function(){ burger.classList.toggle("active"); navMenu.classList.toggle("open"); }) } } } </script>
2、NavBar.vue样式
响应式页面布局
@media screen and (max-width: 768px){
}
当网页屏幕小于max-width,样式发生的变化<style scoped> nav{ top:0; left:0; right: 0; display: flex; justify-content: space-between; align-items: center; padding:0 5vw; height: 70px; background-color: rgba(65,81,101,0.9); } .logo{ font-size: 28px; font-weight: 600; background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; flex: 1; } .logo img{ width:30px; height:30px; border-radius: 5px; flex: 1; vertical-align: center; } .nav-menu{ flex:1; display: flex; justify-content: space-around; max-width: 500px; } .burger{ margin-left: 10px; display: none; } .burger div{ width:30px; height:2px; background-color:#dadbdd; margin: 6px; } @media screen and (max-width: 768px){ .nav-menu{ position: absolute; top:70px; right:0; bottom:0; width:40vw; height:540px; background-color: rgba(65,81,101,0.7); flex-direction: column; align-items: center; justify-content: flex-start; transform: translateX(100%); transition:0.3s ease-in-out; } .nav-menu.open{ transform: translateX(0); } .burger{ display: block; } .burger.active div{ transition: 0.3s ease-in-out 0.2s; } .burger.active .top-line{ transform: rotate(90deg) translateX(8px) translateY(-14px); } .burger.active .bottom-line{ transform: rotate(90deg) translateX(-8px) translateY(-6px); } .burger.active .middle-line{ transform: rotate(90deg) translateY(2px); } @keyframes slideIn { from{ transform: translateX(20px); opacity: 0; } to{ transform: translateX(0); opacity: 1; } } } </style>
TabBarItem.vue页面代码,用来设置li>标签里面放置的内容
<slot name="li-icon"></slot>//给slot设置name,以便别的组件使用指定的插槽,,也可以设置默认值
<template> <!--子组件通过props获取父组件传来的值--> <div @click="itemClick"> <li> <slot name="li-icon"></slot>//给slot设置name,以便别的组件使用指定的插槽,,也可以设置默认值 <slot name="li-title"></slot> </li> </div> </template> <script> export default { name: "TabBarItem", data(){ return{ } }, props:{ path:String }, methods:{ itemClick(){ console.log("toPath") console.log(this.path) this.$router.replace(this.path) }, } } </script> <style scoped> li{ list-style: none; color: #dadbdd; font-weight: 600; } li:hover{ cursor: pointer; } @media screen and (max-width: 768px) { li{ margin:3vh; transform: translateX(20px); transition: 1s slideIn ease-in; } } </style>
3、MainTabBar.vue
给li>标签赋值
<span slot="li-title">首页</span>//通过 slot="li-title"将内容放置到指定位置, 这里我没有设置 slot="li-title",根据需要自己设置
MainTabBar是父组件,它设置了path的值,子组件通过props获取父组件传给它的path值<template> <!--父组件 path就是传给子组件的值--> <div> <nav-bar> <tab-bar-item path="/home"> <span slot="li-title">首页</span> </tab-bar-item> <tab-bar-item path="/recommend"> <span slot="li-title">热映中</span> </tab-bar-item> <tab-bar-item> <span slot="li-title">会员中心</span> </tab-bar-item> <tab-bar-item> <span slot="li-title">消息中心</span> </tab-bar-item> <tab-bar-item> <span slot="li-title">关于我们</span> </tab-bar-item> </nav-bar> </div> </template> <script> import TabBar from "./TabBar"; import NavBar from "./NavBar"; import TabBarItem from "./TabBarItem"; export default { name: "MainTabBar", components:{TabBarItem,TabBar,NavBar}, data(){ return{ } } } </script> <style scoped> </style>
4、在App.vue设置公共组件MainTabBar
注意:导航栏/公共组件在部分页面显示,其他页面不显示,比如登录界面不需要公共组件
keepAlive为true显示公共组件,keepAlive在router index.js 设置
子组件和父组件传值的方式:
请看上一篇
-
vue-cli3 + bootstrap3实现响应式布局
2019-03-02 10:34:16作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装: npm install lib-flexible 引入:入口文件main.js中: import &quot;lib-flexible/...1、用px2rem配合lib-flexible,让网页适配。
lib-flexible
作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装:npm install lib-flexible
引入:入口文件main.js中:
import "lib-flexible/flexible.js"
2、手写一个js小工具,省略rem的计算,加快开发速度。
在src目录下增加一个utils目录,在里面新建一个js文件,写入以下内容:// 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }
在main.js中引入改js文件:
import "./utils/rem"
然后就可以直接用px写页面啦,而不用去计算rem的值,是不是很舒服呢。
3、使用VW。了解下vw 与 vh单位,以viewport为基准,1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一
安装:
npm i postcss-px-to-viewport -save -dev
在package.json中配置如下:
"postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } }, "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValue": 1 } } },
4、利用bootstrap实现响应式图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
对于图片的大小限制一定要在图片的父级元素进行限制。5、利用bootstrap的栅格系统,下面列一下栅格系统的参数:
超小屏手机 (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px) 类前缀 .col-xs .col-sm .col-md .col-lg 列数 12 12 12 12 .container最大宽度 None(自动) 750px 970px 1170px 举个移动设备和桌面的例子:
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
还有更多对响应式的支持,就不一一列举了。
-
[demo]自定义响应式网页(利用css3媒体查询和window.matchMedia实现)
2018-11-16 18:43:15需求: 自定义响应式网页,需要针对不同的屏幕尺寸做不同的处理。...1,新建matchMedia文件夹,里面新建index.vue文件,写好如下代码,建立一个自定义响应式网页组件: <template>... -
初学vue-cli3.0+webpack+vue-router+elementUI后简单响应式静态页面的编写
2019-07-30 21:00:20博主之前出去耍了几天,回来为了复习巩固前一段时间所学的ps切图以及vue的知识,所以去网上找了几个psd文件,用vue实现了一个简单的静态单页网页界面。 ... -
vue+element+echarts 响应式后台管理系统,了解一下?
2018-02-24 18:15:14寒假结束了,趁着寒假,自己玩了一下...项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式等。 先来看看效果: pc端 移动端: 项目结构 src |---common // ... -
vue+element+echarts响应式后台管理系统,了解一下?
2018-02-24 06:43:26寒假结束了,趁着寒假,自己玩了一下...项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式等。 项目结构 src |---common // 公用的文件 |---css |---base.scss ... -
Vue
2020-07-28 19:02:13Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 2.Vue.js到底是什么? Vue.js就是一个用于搭建类似于... -
vue
2020-09-24 20:45:521.什么是vue: 是第三方开发的基于MVVM设计模式的渐进式的纯前端js框架 ...vue框架:第三方开发的基于响应式编程方式的程序(优点:从根本上简化了开发步骤,缺点过于精简). 3.MVVM设计模式:将前端内容划分为3部分 -
Vue环境搭建
2018-03-20 11:15:25Vue.js是一个构架数据驱动的网页界面的渐进式框架,它的目标是通过尽可能简单的API实现响应的数据绑定和组合视图组件。它和Node、Angular并列为前端的三大框架。 环境搭建 在Mac中搭建Vue的开发环境会用到如下的... -
vue自适应布局_如何实现PC端和移动端的自适应
2020-12-13 14:36:52效果图:自适应:我感觉自适应分为两种:一 ,通过媒体查询实现响应式(@media)优点 :适用于小型网页,用户交互较少的项目,代码用量较少;缺点 :在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个... -
vue面试题
2020-10-19 16:06:13响应式布局主要是可以实现自适应不同网页的分辨率,让客户有更好的体验。 1、rem布局 2、百分比布局 3、vw布局 4、媒体查询 media (不同的分辨率设置不同的css样式) 5、弹性盒子布局 二、rem响应式布局的... -
前端Vue的理论
2018-01-26 10:12:001、什么是Vue.jsVue.js是一套构建用户界面的渐进式框架。Vue的核心库只关注视图层Vue.js的...3、Vue.js为什么能让基于网页的前端应用程序开发起来这么方便因为Vue.js有声明式,响应式的数据绑定,与组件化的开发 4... -
VUE撸了一个袜子商店,写写技术日记
2021-01-08 08:06:44vue的一些零散知识 大体目录如下 实例创建 属性绑定 条件渲染 列表渲染 事件触发 class绑定 ...Vue是响应式的,原例改变 后面跟着变 二.VUE属性绑定 比如 data我放了product的text和一个image和link,在htm -
vue项目组件中滚动条无法调整位置解决办法
2020-06-29 16:27:121、var box=document.getElementById("box"); 2、box.scrollTop=box.scrollHeight; 但是公司项目却是vue项目,所以这样写不生效,在...Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 D -
Vue开发环境配置
2018-12-30 17:43:43Vue.js是一个构建数据驱动的web界面的渐进式框架,其通过尽可能简单的API实现响应的数据绑定和组合的视图组件。与传统的Angular.js和React框架相比,Vue.js不仅具有简单易学和上手快的特点,并且可以通过组件的特性... -
Vue+ElementUI前端开发环境搭建
2020-05-26 17:03:16只关注视图层,采用自底向上增量开发的设计,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 1.1 渐进式 1.如果你已经有一个现成的服务端应用,你可以将vue 作为该应用的一部分嵌入其中,带来更加丰富... -
Vue基本语法篇(一)
2020-08-06 17:01:11它的目标是通过尽可能的简单API实现响应的数据绑定和组合的视图组件; 二、Vue基本语法 (注意Vue每次写完语法,都要保存网页才可以加载出来快捷键为Ctrl+s) 1、数据绑定 第一种数据绑定为一组花括号{{}},但是... -
Web前端人员如何进阶 怎么快速掌握Vue框架
2020-09-01 15:01:52Web前端人员如何进阶?怎么快速掌握Vue框架?Vue是目前企业常用的技术之一,是一个用于构建Web用户界面的...在基础情况下,Vue将网页和JavaScript保持同步,实现这一目标的特性是响应式数据及指令和插值等模板 -
vue学习之路之需要了解的知识汇总
2019-09-24 20:08:40一、vue是什么? 相关网页: https://vuejs.bootcss.com/v2/guide/ 及菜鸟教程 https://www.runoob.com/vue2/vue-tutorial.html ...它的目标是通过尽可能简单的API实现响应的数据绑定和组合的... -
Vue.js学习总结(一.)
2019-09-24 07:15:02Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 2、单页应用程序(SPA) 单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用。 3、Vue.js为什么能让基于网页的前端应用... -
『前端学习实例』 商品页面的增删查(Bootstrap + Vue)
2020-08-11 18:44:17官方文档: Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 官方文档:Vue.js 文章目录功能需求结果展示源代码文件目录index.html 功能需求 实现商品页面 (基于... -
初试Vue.js+Require.js
2019-06-26 11:20:56而Rquire.js 则是实现js文件的异步加载,避免网页失去响应。管理模块之间的依赖性,便于代码的编写和维护。 用一个简单的程序来同时应用这两个框架 下面是HTML 代码: test.html <html> <head> ...