2018-06-05 vue2.0的学习

1.为什么在2.0中,route-view显示不出内容?

var router=new VueRouter({

mode: 'history',//切换路径模式,变成history模式,也就是去掉#

routes:[//这里是routes,不是routers

{

path:'/goods',

name:goods,

component:goods

},

{

path:'/ratings',

component:ratings

},

{

path:'/seller',

component:seller

}

]

});

2.对于render: h => h(App)的理解?

new Vue({

router:router,

render: h => h(App)//es6写法

//components: { App },//v1.0写法

//template: '',

}).$mount('#app')

解释:

// ES5

(function(h) {

    return h(App);

});

// ES6

h => h(App);

2018-06-05 vue2.0的学习_第1张图片

3.默认首页路径

就是在挂载之后,添加router.push("/goods"),即代表默认的路径

2018-06-05 vue2.0的学习_第2张图片

4.如何增加active效果?

也就是在new  VueRouter中设置参数,即通过 linkActiveClass:'active',

2018-06-05 vue2.0的学习_第3张图片
也就是会出现以下的效果:


2018-06-05 vue2.0的学习_第4张图片


5.css伪类:

比如:

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

6.v-bind:相当于:

同时一般在vue中写a[0].name,会出现以下的错误:


为了避免报这样的错误,一般在在其父类加入v-if,例如:

2018-06-05 vue2.0的学习_第5张图片

7.行内间距会有3px的差距:

其中下面的两区域行间距

2018-06-05 vue2.0的学习_第6张图片

为了处理上面的问题:给这两个框的父元素加上font-size:0

2018-06-05 vue2.0的学习_第7张图片
也就得到下面的:
2018-06-05 vue2.0的学习_第8张图片

8.在学习项目中经常用到display的属性,特别整理关于display属性block、inline、inline-block的联系与区别

display:block  此元素将显示为块级元素,此元素前后会带有换行符,即可以换行。

display:inline  默认值,此元素会被显示为内联元素,元素前后没有换行符,即不能换行。

display:inline-block  行内块元素(CSS2.1 新增的值),意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。

其中:

内联元素(行内元素):是不可控制宽和高、margin等;并且在同一行显示,不换行,比如span、font、em、b、a、img等元素。

块级元素:可控制宽和高、margin等,并且会换行,比如div、p、ul、li、p和所有的h类标签。


9.出现以下图片显示的



解决上面的文字和图片没在一条线上,可以进行vertical-align: top;来设置对齐效果。


2018-06-05 vue2.0的学习_第9张图片

10.数据中不同的类型对应不同的class,可以在vue中绑定class

11.js是单线程的,但为了实现异步


2018-06-05 vue2.0的学习_第10张图片

事件循环:JS 会创建一个类似于 while (true) 的循环,每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件,如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中,也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

任务队列:异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的 webcore 来执行的,webcore 包含上图中的3种 webAPI,分别是 DOM Binding、network、timer模块。

  onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任务队列中。

  setTimeout 会由浏览器内核的 timer 模块来进行延时处理,当时间到达的时候,才会将回调函数添加到任务队列中。

  ajax 则会由浏览器内核的 network 模块来处理,在网络请求完成返回之后,才将回调添加到任务队列中。

主线程:JS 只有一个线程,称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后,才开始执行的。所以,主线程中要执行的代码时间过长,会阻塞事件循环的执行,也就会阻塞异步操作的执行。只有当主线程中执行栈为空的时候(即同步代码执行完后),才会进行事件循环来观察要执行的事件回调,当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。


12.iconmoon生成相应的字体之后,将生成的font文件和style.css文件导入项目中

13.white-space: nowrap:文本不会换行,文本会在在同一行上继续,直到遇到
标签

text-overflow: ellipsis;

text-overflow 属性规定当文本溢出包含元素时发生的事情;

ellipsis显示省略符号来代表被修剪的文本。

14.颜色透明度:

opcity以及background:rgba(1,1,1,0.2)

15. filter: blur(10px);模糊度

以下的总结有的是借鉴被人的,只是为了方便以后的学习:

1.vue1.0中的v-el和v-ref在2.0中被废弃了。所以2.0中如果需要此功能要通过ref属性写法不是ref:而是ref="名字",在js中用$refs获取元素。

首先了解一下ref:

      组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM) 只有当它插入文档后,才会变成真实的 DOM Vue 中所有的 DOM 变动都现在虚拟 DOM 上发生,然后在将实际变动发生的部分,反映在真实的 DOM 中,这种算法叫 DOM diff 可以极大的提高网页的性能 但是,有时需要从组建获取真实的 DOM 节点,这时就要用到 ref 属性。

   ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例:

_initScroll(){

      //初始化scroll区域

        this.menuScroll = new BScroll(this.$refs.menuWrapper, {

          click: true //结合BScroll的接口使用,是否将click事件传递,默认被拦截了

        });

        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {

          probeType: 3 //结合BScroll的接口使用,3实时派发scroll事件,探针的作用

        });

        //结合BScroll的接口使用,监听scroll事件(实时派发的),并获取鼠标坐标,当滚动时能实时暴露出scroll

        this.foodsScroll.on('scroll', (pos) => { //事件的回调函数

          this.scrollY = Math.abs(Math.round(pos.y));//滚动坐标会出现负的,并且是小数,所以需要处理一下,实时取得scrollY

  }) }

为了方便了解


2.nextTick()官方文档的说明是:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

nextTick()我的理解是获取更新后的DOM。异步更新。几个组件在DOM变化后都需要重新计算scrollY并更新scroll。只有先获取更新后的DOM,才能正常的使用滑动插件。此时nextTick()就是必须的。

看到一个更全面的解释贴上来:

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,

原因是在created()钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

原因是,Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop)

当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。

这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

当你设置vm.someData = ‘new value’,DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。 如果此时你想要根据更新的 DOM状态去做某些事情,就会出现问题。

为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

你可能感兴趣的:(2018-06-05 vue2.0的学习)