doctype html
>
<
html
>
<
body
>
<
div
id>
<
my-component
>
my-component
>
div>
<
-- 注意：使用》標籤時，type指定為text/x-template，意在告訴瀏覽器這不是一段js指令碼，瀏覽器在解析html文件時會忽略<
script
>
標籤內定義的內容。
-->
<
script type="
text/x-template"id
="mycomponent
">
//注意 type 和id。
<
div>
this is a component
!<
/div>
script
>
body
>
<
script
src="js/vue.js"
>
script
>
<
script
>
//全域性註冊元件
vue.component(
'my-component',)
newvue()
script
>
html
>
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
head
>
<
body
>
<
div
id>
<
my-component
>
my-component
>
div>
<
template
id="mycomponent"
>
<
div>this is a component!
div>
template
>
body
>
<
script
src="js/vue.js"
>
script
>
<
script
>
vue.component(
'my-component',)
newvue()
script
>
html
>
這種方法常用在vue單頁應用中。詳情看官網：
建立.vue字尾的檔案,元件hello.vue，放到components資料夾中
<template
>
<
div
class
="hello"
>
<
h1>}
h1>
div>
template
>
<
script
>
export
default
}}script
>
<
template
>
<
div
id>
<
img
src="./assets/logo.png"
>
<
hello
>
hello
>
div>
template
>
<
script
>
//匯入元件
import hello from
'./components/hello
'export
default
}script
>
<
style
>
style
>
CSS樣式 3種書寫形式
css的三種書寫形式 1 行內樣式 即直接在標籤的style屬性中編寫。如 color blue font size 28px background color aliceblue 2 頁內樣式 即在當前網頁的head中的style標籤中編寫。如 utf 8 css的頁內樣式 title 在head...
Vue路由傳參的3種形式
在列表向詳情頁面跳轉，而後在詳情頁面檢視列表的詳情資訊，此時設計路由傳參，vue中有3種傳參形式，介紹如下 class action btn click viewdetails item.id 一 path形式 methods 此方法，會將引數直接拼接在url上面，需要在路由檔案中配置動態路由，具體...
Vue路由傳參的3種形式
在列表向詳情頁面跳轉，而後在詳情頁面檢視列表的詳情資訊，此時設計路由傳參，vue中有3種傳參形式，介紹如下 methods 此方法，會將引數直接拼接在url上面，需要在路由檔案中配置動態路由，具體的配置如下 另外，在詳情頁面orderdetails.vue中可以通過 this.route.param...