建立html檔案,並引入vue的js,如:
src=
"">
script
>
宣告:
var vm = new vue(} 固定寫法,放在script標籤內
el:表示需要渲染的標籤標識
data:需要渲染的資料
>
var vm =
newvue(}
)script
>
插值表示式
>
>
}p>
>
}p>
>
}p>
>
}p>
else}}
-->
div>
v-text: 這是乙個屬性,所以要放置在標籤屬性的位置,新增後不再使用插值表示式}
>
>
}p>
{}}-->
v-text
='msg'
>
p>
div>
v-bind:
v-bind可以用簡寫方式,如「:src」等於「v-bind:src」
>
>
}p>
v-bind:src
="src"
alt="
">
:src
="src"
alt="
">
:href="
'/del?id='+id"
>
刪除a>
:class=""
>
isadd為true的時候文字是藍色的p
>
div>
v-for
>
>
v-for
='(value,index) in arr'
>
} : }li
>
ul>
>
v-for
='(value,key,index) in student'
:key
='key'
>
} : } : }li
>
ul>
div>
>
var vm =
newvue(}
})script
>
v-model:令data資料和頁面輸入框內容做雙向繫結
>
type
="text"
v-model
='msg'
>
type
="button"
value
='提交'
>
div>
>
var vm =
newvue(}
)script
>
v-on:
>
type
="text"
v-model
='msg'
>
type
="button"
value
='提交'
v-on:click
='showmsg'
>
type
="button"
value
='提交'
@click
='showmsg(123,$event)'
>
href
=""@click.prevent
='sayhi'
>
點我點我!a
>
type
="text"
name
='username'
v-model
='username'
@keyup.13
='showname'
>
type
="button"
value
="我可繫結了多個事件^_^"
v-on=''
>
div>
>
var vm =
newvue(,
// 方法(包含事件處理函式)都可以在methods中定義,它是乙個單獨的成員.它是乙個物件
methods:
// showmsg:() => {}
showmsg
(v,k)
,sayhi()
,showname()
,dothis()
,dothat()
}})script
>
v-if和v-show:
>
v-show
='isshow'
>
我是v-showp
>
v-if
='isshow'
>
我是v-ifp
>
>
成績:span
>
v-if
='score>=90'
>
ap>
v-else-if
='score>=80'
>
bp>
v-else-if
='score>=70'
>
cp>
v-else-if
='score>=60'
>
dp>
v-else
>
ep>
div>
>
var vm =
newvue(}
)script
>
v-cloak:待vue編譯完成後去除隱藏的樣式,避免使用者看見未被編譯的**
>
[v-cloak]
style
>
>
v-cloak
>
}p>
div>
>
var vm =
newvue(}
)script
>
Vue基礎知識
vue.js的基本使用 1.引入vue.js 1 cdn 3 模組化安裝 npm i vue d s cnpm i vue yarn add vue 2.初始化vue 1 必須有乙個html容器,決定vue.js的作用範圍 2 初始化 new vue options data 資料 3 資料繫結 宣...
VUE基礎知識
1 全域性定義 每個元件的命名不可重複 2 字串模板 缺乏語法高亮,可讀性較差 1 屬性 屬性書寫方式 props type name list 屬性時單向資料流,不可在子元件更改父元件傳遞的值,可通過onchange方法修改。2 事件 3 插槽 插槽是元件的一塊html模板,其顯示與否由父元件決定...
Vue基礎知識
資料雙向繫結 指令帶有v 的,表示vue特有的屬性,他們會在渲染的dom上,應用特殊的響應式行為 或者 click me v model 會忽略所有表單元素的 value checked selected attribute 的初始值 而總是將 vue 例項的資料作為資料 你應該通過 j ascri...