-
<div?id="root"> ????<div?v-bind:title="title">hello?world</div>????//屬性綁定?(js表達式) ????<div?:title="title">hello?world</div>????//v-bind簡寫為':' ????<input?v-model="content"/>????//雙向綁定?(數(shù)據(jù)和頁面一同改變) ????<div>{{content}}</div> </div> <script> ????new?Vue()({ ????????el:"#root",? ????????data:{ ????????????title:"this?is?hello?world", ????????????content:"this?is?content" ????????} ????}) </script>查看全部 -
{{msg}}插值表達式
(a)=>箭頭函數(shù)(a參數(shù)，b返回值）
<div?id="root"> ????<div?v-text="content"></div> ????<div?v-html="content"></div>????//v-html不會轉(zhuǎn)義 ????<div?v-on:click="handleClick"</div>????//綁定點擊事件 ????<div?@click="handleClick"</div>????//v-on簡寫為@ </div> <script> ????//創(chuàng)建Vue實例 ????new?Vue()({ ????????el:"#root",????//element綁定DOM節(jié)點 ????????data:{ ????????????content:"<h1>hello</h1>" ????????}, ????????method:{ ????????????handleClick:function(){ ????????????????this.content?=?"world"????//點擊更改數(shù)據(jù) ????????????} ????????} ????}) </script>查看全部 -
<div?id="root">{{msg}}</div> <script> ????//實例 ????new?Vue()({ ????????el:"#root",????//掛載點 ????????template:?'<h1>hello?{{msg}}</h1>',????//模板內(nèi)容 ????????data:{ ????????????msg:"world"????//數(shù)據(jù) ????????} ????}) </script>查看全部 -
<div?id="root">{{msg}}</div> <script> ????//創(chuàng)建Vue實例 ????new?Vue()({ ????????el:"#root",????//element綁定DOM節(jié)點 ????????data:{ ????????????msg:"hello?world" ????????} ????}) </script>查看全部 -
v-on = @ (eg: @click
屬性綁定：v-bind = : (eg: :title -- 鼠標移過去有解釋
雙向數(shù)據(jù)綁定：v-model
查看全部 -
computed 計算屬性
watch 監(jiān)聽器
查看全部 -
vue只會處理掛載點里面的內(nèi)容！
掛載點：el: '#app'
模板：template: '<h1>hello world</h1>'
查看全部 -
v-if
v-for
查看全部 -
循環(huán)
v-for="item of list" :key="index"
v-show v-if? 按鈕是否顯示? 變量值 true/false
查看全部 -
v-on:click
查看全部 -
@代替v-on：事件綁定，vue3.x使用v-on=""取代v-on:
：代替v-bind：屬性綁定，vue3.x使用v-bind=""取代v-bind：
v-model：數(shù)據(jù)雙向綁定，vue3.x使用v-model=""取代v-model:
查看全部 -
v-on:可以縮寫為@，進行數(shù)據(jù)綁定
查看全部 -
掛載點、模板、實例
查看全部 -
1-1課程介紹
基礎知識 （版本現(xiàn)已在2.5以上）
案例實踐
todolist
vuecli項目構建工具的使用
再開始todolist功能
查看全部 -
還不錯哦
查看全部 -
<script?src="./vue.js"></script>
查看全部
舉報
0/150
提交
取消