vue入門

引用 <script><script>

關(guān)鍵詞:
new Vue({
el:"#xxx"
data:{}
method:{}
computed: { ( fullname: {set:function(){}/get:function(){}})}
watch:{}
beforeCreate/created/beforeMount/mouted/beforeUpdate/updated/beforeDestory/destoryed
})

  • v-bind :

  • v-on @

  • v-show

  • v-if

  • v-else-if

  • v-else
    在v-if/xxx中使用key來確立不要復(fù)用

  • v-for

  • v-model

  • v-html

  • v-once

  • {{}}

  • component 因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例象浑,所以它們與 new Vue 接收相同的選項(xiàng),例如 data、computed、watch钻蔑、methods 以及生命周期鉤子等辑奈。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。

  • prop
    data: function (){ return xxxx}

  • is

  • <slot> 元素有一個(gè)特殊的特性:name缤骨。這個(gè)特性可以用來定義額外的插槽:

Vue 包含一組觀察數(shù)組的變異方法浮禾,所以它們也將會(huì)觸發(fā)視圖更新伏嗜。這些方法如下:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

為了解決這個(gè)問題,Vue.js 為 v-on 提供了事件修飾符伐厌。之前提過,修飾符是由點(diǎn)開頭的指令后綴來表示的裸影。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

import xxx from
export default

為了在必要的情況下支持舊瀏覽器挣轨,Vue 提供了絕大多數(shù)常用的按鍵碼的別名:

  • .enter
  • .tab
  • .delete (捕獲“刪除”和“退格”鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
.ctrl
.alt
.shift
.meta

2.2.0 新增

  • .left
  • .right
  • .middle
    這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕轩猩。

表單


image.png

image.png

image.png

.lazy

在默認(rèn)情況下卷扮,v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符均践,從而轉(zhuǎn)變?yōu)槭褂?change事件進(jìn)行同步:

.number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型晤锹,可以給 v-model 添加 number 修飾符:

<input v-model.number="age" type="number">

這通常很有用,因?yàn)榧词乖?type="number" 時(shí)彤委,HTML 輸入元素的值也總會(huì)返回字符串鞭铆。如果這個(gè)值無法被 parseFloat() 解析,則會(huì)返回原始的值焦影。

.trim

如果要自動(dòng)過濾用戶輸入的首尾空白字符车遂,可以給 v-model 添加 trim 修飾符:

<input v-model.trim="msg">

v-for的時(shí)候最好都加上key


image.png
image.png

html調(diào)用vue的方法

1.html中引用用vue寫的js, vue.js中用 var aaa=vue{el:'#vue-html'},要綁定對應(yīng)的id
2.html引用vue是有兩種
標(biāo)簽內(nèi)部引用斯辰, {{ name }}, {{ getname() }}
屬性中引用舶担, <button v-bind:click="xxxx xxxxx">, 這個(gè)xxxx同樣可以是js里vue的元素或者對象。

vue語句

v-for
v-if v-else-if
注意v-show和v-if的區(qū)別彬呻,前者是在dom里面的衣陶,只是設(shè)置了display:none

<ul>
<li v-for="x in vars"> {{ var }}<>
<ul/>
v-for是可以有index的,(content,index)

<template>標(biāo)簽可以代替div闸氮,不會(huì)被加到dom里面去

注意模板有且只有一個(gè)跟標(biāo)簽

method / 計(jì)算屬性computed / 偵聽屬性watch

1.method式調(diào)用就一定會(huì)運(yùn)行剪况。
2.computed計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,依賴變了才會(huì)重新執(zhí)行湖苞,沒變的就不跑函數(shù)了拯欧,直接返回結(jié)果。即只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值财骨。注意Date.now() 不是響應(yīng)式依賴這種不是響應(yīng)依賴式镐作。
3.watch 一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)
4.computed里面可以分get/set來處理類似watch的功能
5.watch用來做更通用的偵聽器

#######axios
這式ajax的一個(gè)封裝藏姐,和vue無關(guān)。
.watch方法用來接收錯(cuò)誤
.then方法用來在處理正確的情況下執(zhí)行的內(nèi)容

  1. label與form控件的關(guān)聯(lián),
    <label for="MyInput">My Input</label>
    <input id="MyInput" type="text">
    input與label關(guān)聯(lián)的方式
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末该贾,一起剝皮案震驚了整個(gè)濱河市羔杨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌杨蛋,老刑警劉巖兜材,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異逞力,居然都是意外死亡曙寡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進(jìn)店門寇荧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來举庶,“玉大人,你說我怎么就攤上這事揩抡』Ы模” “怎么了?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵峦嗤,是天一觀的道長蕊唐。 經(jīng)常有香客問我,道長烁设,這世上最難降的妖魔是什么替梨? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮装黑,結(jié)果婚禮上耙替,老公的妹妹穿的比我還像新娘。我一直安慰自己曹体,他們只是感情好俗扇,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著箕别,像睡著了一般铜幽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上串稀,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天除抛,我揣著相機(jī)與錄音,去河邊找鬼母截。 笑死到忽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播喘漏,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼护蝶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了翩迈?” 一聲冷哼從身側(cè)響起持灰,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎负饲,沒想到半個(gè)月后堤魁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡返十,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年妥泉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洞坑。...
    茶點(diǎn)故事閱讀 38,637評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡涛漂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出检诗,到底是詐尸還是另有隱情,我是刑警寧澤瓢剿,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布逢慌,位于F島的核電站,受9級特大地震影響间狂,放射性物質(zhì)發(fā)生泄漏攻泼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一鉴象、第九天 我趴在偏房一處隱蔽的房頂上張望忙菠。 院中可真熱鬧,春花似錦纺弊、人聲如沸牛欢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽傍睹。三九已至,卻和暖如春犹菱,著一層夾襖步出監(jiān)牢的瞬間拾稳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工腊脱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留访得,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓陕凹,卻偏偏與公主長得像悍抑,于是被迫代替她去往敵國和親鳄炉。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Vue.js新手入門指南 最近在逛各大網(wǎng)站传趾,論壇迎膜,以及像SegmentFault等編程問答社區(qū),發(fā)現(xiàn)Vue.js異...
    joker731閱讀 862評論 0 12
  • 1. Vue概述 1.1 Vue介紹 Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架浆兰。 1.2 Vue核心思想 雙向數(shù)...
    nimw閱讀 569評論 0 4
  • 基礎(chǔ)知識: vue的生命周期: beforeCreate/created磕仅、 beforeMount/mounted...
    Jackson_yee_閱讀 368評論 0 0
  • 官網(wǎng):https://cn.vuejs.org/ 手冊:https://cn.vuejs.org/api/[htt...
    坤嬤嬤閱讀 775評論 0 5
  • 一、負(fù)面情緒是你朋友 很多人將負(fù)面情緒視為洪水猛獸簸呈,強(qiáng)迫自己戰(zhàn)勝這些敵人榕订。其實(shí)它們正是你身體發(fā)出的信號。如...
    汪曉晨閱讀 484評論 1 0