vue——踩坑

1、vue文件一般放在html标签之后，因为vue实例需要绑定在html标签上，所以需要先加载html元素

2、如果需要在vue文件中的style标签中使用less来书写css样式，需要在style标签中添加lang='less'属性，但是需要安装less模块

<template>
    <div class="app">
        
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang='less'> //默认为lang='css'此处添加lang='less'可以使用less模块编写css样式
    
</style>

3、在build文件夹下的webpack.base.conf.js文件中，定义了src目录的绝对路径，使用@代替

resolve: {
    extensions: ['.js', '.jsx', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

4、导入导出

在 Vue 中，默认使用 export default 导出模块，在导入的时候直接使用 import App from './App' 即可，可以自定义模块名称，如果使用 es6 的 export 导出模块的话，在导入的时候需要使用结构赋值 import {Test} from './test' 不能自定义模块名

//导出模块，文件名为test.js
export default {
    test1(){
        console.log(12346);
    }
}
export function Test1(){
    console.log('Test1');
}


//导入模块
import test,{Test1} from './test';

import * as test from './test' //把test文件中导出的所有对象都存放到test中，包括export导出的对象以及export default导出的对象

在模块中使用 import * from './test' 可以把 test.js 文件中所有导出的成员导入到该文件中，可用于模块的‘继承’

5、在 webpack 环境下开发使用 vue ，不能直接导入vue文件，需要导入 vue/dist/vue.esm 的js文件

6、vue-router在使用history模式的时候，不能使用 a 标签来链接地址，否则不能正常跳转，使用 <router-link to='/new'></router-link> 标签可以正常连接跳转,也就是 a 标签在 history 模式下不能正常跳转， router-link 标签可以适配 hash 以及 history 路由模式 ；vue-router在编写子路径的时候，必须在母路径组件中添加 <router-view /> 标签才能生效

7、flex 不适配 IE9 - ，任何基于flex的插件都不适配IE9 -

8、vue组件中style中的 scoped 属性是解决CSS样式作用域问题的，如果在不同组件中使用了同一个类名或者ID，在 style 标签中加入 scoped 可以生成CSS作用域，vue会动态在标签中加入data-v-哈希值 标签用于区分不同的CSS作用域，使用 scoped 会产生性能问题，如果使用第三方插件或者使用了JS动态加入标签，会造成CSS作用域失效，所以尽量不要使用 scoped 属性，也就是在不同的组件中不要使用相同的类型或者ID

9、iview所使用类名并不是标签名，element 使用的标签名就是类名，Iview 在使用单标签（如 Input）时，需要加上标签结束符（如<Input />），也可以使用双标签，部分vue插件会报错，可以忽视，如果需要在单标签中插入内容，不能使用标签结束符（ / ），并且要使用双标签形式，如在 input 中插入图标

<template>
    <Layout class="page">
        <Form class="login">
            <FormItem>
                <Input placeholder="帐号">
                    <span slot="prepend">
                        <Icon type='ios-contact'/>
                    </span>
                </Input>
            </FormItem>
            <FormItem>
                <Input placeholder="密码" type="password">
                    <span slot="prepend">
                        <Icon type='ios-lock'/>
                    </span>
                </Input>
            </FormItem>
        </Form>
    </Layout>
</template>

10、在项目的config目录下的index.js文件中，把 autoOpenBrowser 对象设置为 true 可以在运行运行项目的时候自动打开浏览器

11、当需要修改UI框架的样式时，不要在有scoped属性的样式表中修改，可以在app.vue中修改

12、在使用computed计算属性时，需要注意，computed属性中定义的方法只具备get属性，无法修改该方法返回的值，如果需要在其他地方可以修改改变量，可以把该变量设置为属性，在属性中添加get、set方法

computed:{
    num(){
      return 1+1
    }
}


改为：=>

computed:{
    num{
      get(){
         return 1+1
      },
      set(val){
         this.num1=val
      }
    }
}

13、watch递归深度监听

    如果watch监听一个属性的下一级变化时，你会发现，并不能得到你需要的效果，watch默认是不会深度遍历被监听对象的，需要在被监听属性添加deep属性

//默认watch监听
watch:{
    num(newVal,oldVal){
      console.log(newVal)
    }
}

改为=>

watch:{
    num:{
      handler(newVal,oldVal){
       console.log(newVal
      },
      deep:true   //深度监听
    }
}

14、在vue中，有且仅有以下观察数组的变异方法（会改变原数组的方法）会触发视图更新

    push()、pop()、shift()、unshift()、splice()、sort()、reserve()

  需要注意的是，以下两种情况都无法触发vue的数组检测

      1、你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

  2、修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

可以使用以下方法触发更新

Vue.set(vm.items, indexOfItem, newValue)
// 或者使用全局方法
vm.$set(vm.items, indexOfItem, newValue)

15、在vue中，使用compute以及watch都可以监听发一个数据的变化，他们之间的区别在于：compute监听的属性不可以在data对象中存在，也就是compute属性会创建该监听对象并监听他变化，而watch属性则不会创建监听对象，compute与watch之间另一个区别在于，如果被监听对象重复赋值了，并且值是一样的（就是数据没有改变），则不会执行watch中的语法，而在compute属性中，无论值是否改变，都会执行

15、vue有一个内置的组件<template/> ，它的作用是用来装载html元素的，他自己不会被编译成标签，只会把里面的内容带进去，所以它不会打破原有的布局，尤其是在solt插槽中使用比较常见

16、父组件可以通过$child获取子元素的内容，但是，需要在mounted钩子之后获取，子组件可以通过$parent获取父组件内容，可以在created之后获取