-
{{number}} 這種語法我們稱之為“插值表達式”
查看全部 -
掛載點：
<div id="root">{{msg}}</div>
這個div標簽就是底下Vue實例的掛載點
也就是el屬性對應id的dom結構
模板：
掛載點內部的內容，可以放在Vue實例中的template里面
查看全部 -
new?Vue({ ????el:"#root"; ????data:?{ ????????msg:?"hello?world" ????} }) el?element?通過el進行綁定 通過vue，不會有任何dom的操作，直接對數據進行操作查看全部 -
vuejs的導入最好放在head部分
查看全部 -
v-for 用來控制一組數據，通過這組數據來循環顯示dom結構
<li v-for="(item, index) of list" :key="index">{{item}}</li>
查看全部 -
v-if會把dom刪除掉,控制dom的存在與否
v-show會更改css屬性，display=none，控制dom的顯示與否
查看全部 -
簡單todolist
查看全部 -
watch 偵聽器，偵聽某一個數據的變化，發生變化時，會執行函數實現相應的邏輯
查看全部 -
computed 計算屬性，它的性能是比較高的，只有當他依賴的屬性發生變化時，它的值才會發生改變，否則使用上一次的緩存值
查看全部 -
v-bind:? ? 屬性綁定，可簡寫為": "（之前講過v-on：可簡寫成@，這是第二個指令簡寫）
<div v-bind:title="content"></div>
查看全部 -
當在export default {}中寫一個data ，data變成了一個函數
查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> ????<script?src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div?id="div"> ????<input?type="text"?v-model="message"></br> ????<input?type="button"?value="提交"?@click="test"> ?{{message}} ????<ul> ????????<li?v-for="(item,index)?of?list">{{item}}</li> ????</ul> </div> <script> ?var?app?=?new?Vue({ ????????el:?"#div", ?data:?{ ????????????list:?[], ?message:?"" ?}, ?methods:?{ ????????????test:?function?()?{ ????????????????this.list.push(this.message); ?this.message?=""; ?} ????????} ????}) </script> </body> </html>
查看全部 -
應用組件
<ul> ????<todo-item?v-for="(item,?index)?of?list" ???????????????:key="index" ????:content="item"> ????</todo-item>
定義組件
Vue.component('todo-item',?{ ????props:?['content'], ????template:?'<li>{{content}}</li>' });查看全部 -
計算屬性與偵聽器 computed:?{ ????fullName:?function?()?{ ????????return?this.firstName?+?'?'?+?this.lastName; ????} }, watch:?{ ????fullName:?function()?{ ????????this.count++ ????} }查看全部 -
計算屬性
computed:{
??? fullName: function() {
??????? return this.firstName + ' ' + this.lastName;
??? }
}
查看全部
舉報
0/150
提交
取消