this.$refs.list.$el.style.top
this.$refs.layer.style['transform']
this.$refs.bgImage.style.zIndex = 10
todo_list得到的启发：
1、【试过了，确实可以】今天突然想到一个问题，就是我们在做vue项目的时候，有时候会遇到子组件修改变量传数据给父组件的时候，使用$emit调用父组件的自定义函数。
但是现在想要一个方法是，父组件往子组件传一个方法并且调用这个方法也能达到效果。

2、如果在父级定义了一个变量直接传该变量给子级组件，那么在子级直接获取是会报错的。
解决方案1：
 但是如果数据要在父级定义的话，那么就只能【传对象】过去，修改对象里面的属性时不会导致报错的。
解决方案2：
 直接定义【变量在子组件】中。

1) v-html='content'  这里为什么要使用v-html呢？是需要转译content中的一些html转译字符。
2)this.$refs.list.$el.style.top = `${this.$refs.bgImg.clientHeight}px`
这里的this.$refs.list.$el表示指向list这个html Element.


### 正确配置sass的方法：

一共有三个步骤：
（1）安装sass的安装包：
  > * npm install --save-dev sass-loader
  > * 同时sass-loader依赖于node-sass,所以执行以下语句：npm install --save-dev node-sass
（2）在build文件夹下的webpack.base.conf.js的rules里面添加以下配置：可以放到 test:/\.js$/之后
  `
  {
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
  }
  
  `
  
 (3) 在.vue组件中的style标签内添加lang='scss'.

其实有了在build文件夹下面的配置就不用单独去配置ruby环境了，这是这种配置的一种很好的地方。

# 正确配置stylus的方法：
(1)安装stylus,stylus-loader两个依赖
（2）在组件中的style中添加一些这样的内容：
    <style scoped lang="stylus" rel="stylesheet/stylus"></style>

# 如果在项目中安装ruby并且能够让他运行：
一共有三个步骤：
（1）配置ruby环境。网址在这里：https://www.w3cplus.com/sassguide/，并且在ruby上安装上sass
（2）在vue项目上安装node-sass,sass-loader.输入npm install node-sass --save-dev ,npm install sass-loader --save-dev
 (3) 在style标签内添加lang='scss'.

const router = new VueRouter({
mode: 'history',
routes
})
export default new Vuex.Store({
state
})

**axios**不存在这种use的方法，切记切记。
```在main.js中这样设置:
import axios from 'axios'
Vue.prototype.$http = axios
在组件中这样使用:this.$http.axios=...

配合路由做一些这样的操作：
<router-link :to="`detaile/${item.id}`"></router-link>
<router-link :to="'detaile/'+item.id"></router-link>

$router和$route的区别。这个用两个例子来弄一下就清楚了：
this.$router.push({path:'/item'})     //设置路由的时候使用router
this.$route.params.id               //获取参数的时候使用route


#我的博客中有一个例子：
* < 就是在设置滚动条的时候，需要动态的修改该header上的颜色和背景,此时是一个渐变的过程。所以在监听window的scroll事件的时候，需要采用的是这样的逻辑：
* < 首先mounted里面肯定需要做一些事情,mounted里面最好做些什么事呢？做监听。[监听只有写在vue的生命周期函数里面才是最好的选择]
window.addEventListener('scroll',this.scrollFun);
* < 在methods中写对应的函数,所以在window每次做scroll的时候就能执行该函数。
scrollSet () {
    this.scrollTopNum = document.body.scrollTop || document.documentElement.scrollTop
    this.$refs.position.style.opacity = this.scrollTopNum / 600
    if (this.scrollTopNum > 480) {
      this.$refs.header.style.color = '#666'
      this.$refs.position.style.opacity = 1
      this.show = true
    } else {
      this.$refs.header.style.color = '#fff'
      this.show = false
    }
  }

var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj));  //['a','b']
Object.keys()   //这个方法的作用就是获取整个对象的属性名。


设置样式：
<div :style="{ 'opacity': !editableCheckNum ? 0.5 : 1 }">555</div>      // 三目运算符
<router-link to="/other" :class="{color666:show,colorfff:!show}">Demo</router-link>   //类名绑定

const router = new VueRouter({
 mode: 'history',   //清除地址栏中的#hash符号
routes
})

'xxx' : {
  deep : true,
  handler : fun(value)
}

  $remove(item) : 删除数组中对应的元素
  $set(index, ele) : 给数组中指定下标指定对应的元素

  .xxx-transition: 在其中去指定transition/animation
  .xxx-enter
  .xxx-leave

  created(): 启动异步任务(发送ajax请求, 启动定时器)   
  beforeDestroy(): 做一些收尾的工作 
 ``` 
 
*页面指令

遍历数组 :``` v-for="person in persons"  $index   ```
遍历对象 : ```v-for="value in person"  $key```

v-on : 绑定事件监听
v-on:事件名, 可以缩写为: @事件名
 监视具体的按键:<font style="color:pink;"> @keyup.keyCode @keyup.enter</font>
 阻止事件的冒泡和事件默认行为:<font style="color:pink;"> @click.stop  &&   @click.prevent</font>
 隐含对象:<font style="color:pink;"> $event </font>
v-bind : 强制绑定解析表达式  (:)

v-model(双向数据绑定)   
  v-el : 标识某个标签   
  v-el:xxx   
  读取得到标签对象:```<font style="color:pink;"> this.$els.xxx</font> ```  
        
过滤器  
内置:   

###自定义
全局过滤器:

###指令
内置:   

###自定义
注册全局指令：

注册局部指令：

使用指令:

使用方式跟v-html类似，但是注意自定义属性不能包含驼峰的格式，显示的时候用连接符"-"替代。