頁面渲染的問題:
1蕴忆，正常情況下渲染頁面是這么寫的
<img src"{{data.xx}}" alt="{{data.xx.xx}}">
vue是這么寫
:src 其實(shí)是vue里 v-bind:的縮寫
完整的是這樣
舉一反三预厌，遇到這樣的拼接就好
<a class="talk" :href='"content.html?" + info.id'>{{ info.title }}</a>
2畴蹭，vue解析頁面時會看到頁面閃爍鼎天，先看到vue標(biāo)簽再解析頁面晦鞋，解決辦法
<h2 v-cloak> {{ item.title }}</h2>
<p v-cloak > {{ item.body }} </p>
給標(biāo)簽加一個 v-cloak 罢防，然后css里設(shè)置隱藏
[v-cloak] {
display: none;
}
Ps:v-cloak要給父節(jié)點(diǎn) 比如
<div v-cloak>
<a href="">{{ data.firstName}}</a>
<a href="">{{ data.lastName}}</a>
</div>
3艘虎，獲取dom節(jié)點(diǎn)的方法
this是vue實(shí)例
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">
<hello></hello>
<page></page>
</div>
</template>
倒入組件別用html的標(biāo)簽顷帖，比如<header>就會報(bào)錯，正確的姿勢是
<j-header></j-header>
import Header from './components/header'
components : {
'j-header' : Header
}
4渤滞，使用官方推薦的axios獲取數(shù)據(jù)
安裝完之后倒入
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 參數(shù)就能把包添加到package.json
npm i vue-router -S
6，WebStorm里vue文件內(nèi)寫scss報(bào)錯的問題
WebStorm 2017.1 及之后的版本需要使用 type="text/scss" 或 type="text/sass" 來支持 SCSS 或 Sass 語法妄呕。
舉例來說：
<!-- 下面的 style 塊內(nèi)支持 SCSS 的語法 -->
<style type="text/scss">
body {
$height: 10px;
div {
height: $height;
}
}
</style>
<!-- 下面的 style 塊內(nèi)支持 Sass 的語法 -->
<style type="text/sass">
body
$height: 10px
div
height: $height
</style>
