使用vue时遇到的问题总结

1. [ git操作 ] 

     #问题：如何恢复被删除的本地文件？

    直接从本地把文件checkout出来就可以了，用不着从远程服务器上pull下来,因为，所有的历史版本你的本地都有的。

     # 解决： 

       1.git checkout file

       2. 同时恢复多个被删除的文件：

          git ls-files -d | xargs -i git checkout {}

2.vuex 和 $emit 触发事件

3.sass写法

4. ref refs

    官方说明：ref 被用来给元素或子组件注册引用信息。 引用信息会根据父组件的 $refs 对象进行注册。 

                     如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

   #示例：父组件中使用子组件的方法

5.Object.assign() 方法用于把一个或多个源对象的可枚举属性值复制到目标对象中,返回值为目标对象

    Object.assign(target, ...sources) target: 目标对象 sources: 源对象

6.props 传递数据给子组件

7.v-model 父传子组件问题

8.事件处理器

   在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()

•  事件修饰符：.prevent 与 .stop

•  按键修饰符：

     如：<input v-on:keyup.13="submit">

   全部按键名： 
   enter
    tab   
    delete   
    esc    space    up    down    left    right
    space    up    down    left
    right
【举例】：

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->

<div v-on:click.self="doThat">...</div>

9.$.extend 

 #作用：

    1.合并多个对象。 

这里使用的就是$.extend()的嵌套多个对象的功能。 

所谓嵌套多个对象，有点类似于数组的合并的操作。 

举例：

1

2

3

4

5

6

7

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..)

var Css1={size: "10px",style: "oblique"}

var Css2={size: "12px",style: "oblique",weight: "bolder"}

$.jQuery.extend(Css1,Css2)

//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性

// Css1 = {size: "12px",style: "oblique",weight: "bolder"}

</span>

    2.深度嵌套对象。 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<span style="font-size:18px;"> jQuery.extend(

{ name: “John”, location: { city: “Boston” } },

{ last: “Resig”, location: { state: “MA” } }

);

// 结果:

// => { name: “John”, last: “Resig”, location: { state: “MA” } }

// 新的更深入的 .extend()

jQuery.extend( true,

{ name: “John”, location: { city: “Boston” } },

{ last: “Resig”, location: { state: “MA” } }

);

// 结果

// => { name: “John”, last: “Resig”,

// location: { city: “Boston”, state: “MA” } }

</span>

10. this.$nextTick()

    异步更新队列

        *默认异步更新DOM, 下次事件循环时清空队列, 执行必要的DOM更新

        *Vue.nextTick(callback);

11.动态添加border 元素移动

    事先就添加一个border 颜色#fff

12.Select props ###  track-by用于比较对象。只作用于选项为对象的

13.v-on:click.native 在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。

14.        self.$router.push({

          name: 'docMenu',

          query: {

            dirId: self.item.dir_id

          }

        });

15. 比较html text VAL

  1.HTML

    html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

    html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

  2.TEXT

    text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

    text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).

  3.VAL

    val():获得第一个匹配元素的当前值。

    ​val(val):设置每一个匹配元素的值。

16.JS 监控页面刷新,关闭 事件的方法      ​

  页面加载时只执行onload

  页面关闭时先执行onbeforeunload，最后onunload

  页面刷新时先执行onbeforeunload，然后onunload，最后onload。

  onbeforeunload：在页面刷新和关闭的时候触发事件，表示正要去服务器读 取新的页面时调用，此时还没开始读取，

  onunload：则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

17.input 上传图片缓慢 ，设置accept值 <input type="file" accept="image/jpg,image/jpeg,/image/png,image/gif">

18.css span 不换行CSS实现 P强制不换行、自动换行、强制换行

　　强制不换行 p{ white-space:nowrap; }

　　自动换行 p{ word-wrap:break-word; word-break:normal; }

　　强制英文单词断行 p{ word-break:break-all; }

　　*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

　　 span { display:block; }

19.js解析文件类型

  (1)图片

​

20.组件库内 switch 按钮，按钮值和传入值要通过@change 保持一致

21.全局事件使用

  vue.bus