Vue.js学习记录

---

页面渲染的问题:

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

vue是这么写

![](info.author.avatar_url)

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

![](info.author.avatar_url)

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

{{ info.title }}

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

 {{ item.title }}
 {{ item.body }} 

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

[v-cloak] {
  display: none;
} 

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

  

        {{ data.firstName}}
        {{ data.lastName}}
  

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 中

倒入组件别用html的标签，比如

就会报错，正确的姿势是

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 语法。

举例来说：