页面渲染的问题:

1，正常情况下渲染页面是这么写的

  <img src"{{data.xx}}"  alt="{{data.xx.xx}}">

vue是这么写

![](info.author.avatar_url)

:src 其实是vue里 v-bind:的缩写
完整的是这样

![](info.author.avatar_url)

举一反三，遇到这样的拼接就好

<a class="talk" :href='"content.html?" + info.id'>{{ info.title }}</a>

2，vue解析页面时会看到页面闪烁，先看到vue标签再解析页面，解决办法

<h2 v-cloak> {{ item.title }}</h2>
<p  v-cloak > {{ item.body }} </p>

给标签加一个 v-cloak ，然后css里设置隐藏

[v-cloak] {
  display: none;
} 

Ps:v-cloak要给父节点 比如

  <div v-cloak>
        <a href="">{{ data.firstName}}</a>
        <a href="">{{ data.lastName}}</a>
  </div>

3，获取dom节点的方法
this是vue实例

this.$el.querySelector('.default-txt')

4，一个vue倒入两个组件

import Hello from './components/Hello'
import page from './components/page'
export default {
  name: 'app',
  components: {
    Hello,
    page
  }

component可以是对象，但是两个组件必须都放入 app 中

<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>
    <page></page>
  </div>
</template>

倒入组件别用html的标签，比如<header>就会报错，正确的姿势是

<j-header></j-header>
import Header from './components/header'
components : {
    'j-header' : Header
  }

4，使用官方推荐的axios获取数据
安装完之后倒入

import Axios from 'axios'

export default {
    data() {
        return {
          greeting : 'Hello',
          list : []
        }
    },
  //2.0废弃reader方法
    mounted(){
      var self = this;
      Axios.get('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
          self.list = response.data
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }

5，npm安装依赖包的时候加上 -s 参数就能把包添加到package.json

npm i vue-router -S

6，WebStorm里vue文件内写scss报错的问题

WebStorm 2017.1 及之后的版本需要使用 type="text/scss" 或 type="text/sass" 来支持 SCSS 或 Sass 语法。

举例来说：

<!-- 下面的 style 块内支持 SCSS 的语法 -->
<style type="text/scss">
body {
  $height: 10px;
  div {
    height: $height;
  }
}
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style type="text/sass">
body
  $height: 10px
  div
    height: $height
</style>