Vue開篇配置與元件

2021-10-09 14:22:23 字數 1418 閱讀 6673

我是先學習了react,後來因為需求,來學習vue。

安裝與配置

cnpm install vue -

s

在 package.json 檔案裡加上

"alias"

:,

然後

cnpm incstall @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -

s cnpm i @babel/core -

s

新建 .babelrc 檔案,裡面寫

在 index.js 裡引用

import vue from

'vue'

至此,我們就配置好了vue環境

簡單元件

我們呈現乙個最簡單的元件

>

}div

>

>

div>

js部分

let data =

let vm =

newvue(,

})

el 屬性只在用 new 建立例項時生效

如果不使用el,我們使用vue.extend()

let vm2 = vue.

extend(}

',//有render時會被忽略

data:

function()

}})new

vm2().

$mount()

// 掛載到div下

還可以註冊或獲取全域性元件

"hello"

>

>

hello

>

div>

vue.

component

("hello",}

, template:'}'

})newvue

()

渲染元件

我還是希望想寫react一樣,在render的返回值裡面寫jsx語法

"lista"

>

div>

new

vue(},

render:

function

(h)<

/div>)}

})

如果為函式式元件(無響應資料),需要加上

functional:

true

vue元件與元件化

元件化是當今最為流行的一種可復用性增加的方法,隨著當今前端開發的複雜度更加,這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...

Vue元件與元件間通訊

註冊之後才能使用,註冊分區域性註冊和全域性註冊 元件和vue例項類似,基本可以使用其所有內容 data,computed,methods,filters,watch 與vue例項不同,data是函式,輸入需要return 全域性註冊 showtitle charset utf 8 head my c...

vue全域性元件與區域性元件

vue對元件的定義 元件是可復用的 vue 例項 元件之間是互不影響的,乙個元件的崩潰,並不會影響整個專案的執行。全域性元件 button add button add div src vue.js script 註冊全域性物件,要寫在vue例項的上面 vue.component button ad...