-
組件化帶來的問題
查看全部 -
為什么要組件化
查看全部 -
組件化思想
查看全部 -
條件渲染：v-if、v-else、v-else-if、v-show（是用在html里的）
列表渲染：v-for、v-for與v-if結合使用、v-for的高階使用
Class與Style綁定：屬性綁定用v-bind。v-bind:class="..." 或 v-bind:。效果：自動在html里添加對應的類和css屬性
1源碼：
<!DOCTYPE?html> <html> ?<head> ??<title>?new?document?</title>?? ??<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"/>??? ??<style> ??????/*?.bg{ ??????????color:red; ??????}?*/ ??</style> ??<script?src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> ?</head>? ?<body>? ????<div?id="app"> ????????<div?v-if="count?>=?0"> ????????????情況一：count大于等于0，count的值是：{{count}} ????????</div> ????????<div?v-else-if="count?>=?-5"> ????????????情況二：count大于等于-5且小于0，count的值是：{{count}} ????????</div> ????????<div?v-else> ????????????情況三：count小于-5，count的值是：{{count}} ????????</div> ????????<div?v-show="count?==?-5">滿足show的條件，顯示show:{{count}}</div> ????</div> <script> ????var?arr?=?'new?test'; ????var?app?=?new?Vue({ ????????el:'#app', ????????data:?{ ????????????msg:'hello?vue', ????????????count:0 ????????} ????}) </script> </body> </html>2源碼：
list為數組：
?<body>? ????<div?id="app"> ????????<div?v-for="item?in?list">{{item}}</div><!--注意這個for...in與js的不太一樣。如果是js的話，會輸出索引值--> ????</div> <script> ????var?arr?=?'new?test'; ????var?app?=?new?Vue({ ????????el:'#app', ????????data:?{ ????????????msg:'hello?vue', ????????????list:[5,6,7,8,9] ????????} ????}) </script>list為數組對象：
<body>? ????<div?id="app"> ????????<div?v-for="item?in?list">輸出item：{{item}}</div> ????????<div?v-for="item?in?list">輸出名字item.name：{{item.name}}</div> ????</div> <script> ????var?arr?=?'new?test'; ????var?app?=?new?Vue({ ????????el:'#app', ????????data:?{ ????????????msg:'hello?vue', ????????????list:[ ????????????????{ ????????????????????name:?'張三', ????????????????????age:20 ????????????????}, ????????????????{ ????????????????????name:'李四', ????????????????????age:25 ????????????????}, ????????????????{ ????????????????????name:'老五', ????????????????????age:33 ????????????????} ????????????] ????????} ????}) </script>輸出結果：
v-for與v-show一起使用：
??<div?id="app"> ????????<div?v-for="item?in?list"> ????????????姓名：{{item.name}}，年齡：{{item.age}} ????????</div> ????????<div?v-for="item?in?list"> ????????????<div?v-show="item.age?>?24"> ????????????????年齡大于24的人有：{{item.name}} ????????????</div> ????????</div> ????</div>
3.屬性綁定
???<div?id="app"> ????????<div?v-for="item?in?list"> ????????????姓名：{{item.name}}，年齡：{{item.age}} ????????</div> ????????<div?v-for="item?in?list"> ????????<div?v-show="item.age?>?24"?:?:class="['banana','more',{'another':item.age?<?26}]"><!--:class="{'apple':true}"--> ????????????????年齡大于24的人有：{{item.name}} ????????????</div> ????????</div> ????</div>首先:class有兩種寫法 ①:class="{'類名':(true or false)}" ② :class="['類名','類名',{'類名':(true or false or判斷語句)}]"
綁定的class和style都會加在每個div中，除了another類，因為該類只有年齡小于26才加。style中每個div都會有color和text-shadow屬性，但是年齡小于24的張三會多一個“display:none”，所以他的名字沒有顯示出來。
如果將張三的年齡修改一下，就會顯示出來了
查看全部 -
計算屬性：computed
偵聽器：watch。偵聽器的屬性方法有兩個參數：newval（新值），oldval（舊值）?？赏ㄟ^F12的Console窗口修改屬性，從而激活這個方法
watch還會用在http的請求
使用場景：
watch：異步場景
computed：數據聯動（因為加了this）watch監聽的是一個變量或者是一個常量的變化，變量是單一的變量或數組。
computed可以監聽很多的變量，但是變量要在vue的實例里面源碼：
<!DOCTYPE?html> <html> ?<head> ??<title>?new?document?</title>?? ??<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"/>??? ??<style> ??????.bg{ ??????????color:red; ??????} ??</style> ??<script?src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> ?</head>? ?<body>? ????<div?id="app"> ????????{{msg}} ????????<p>{{msg1}}</p> ????</div> <script> ????var?arr?=?'new?test'; ????var?app?=?new?Vue({ ????????el:'#app', ????????data:?{ ????????????msg:'hello?vue', ????????????another:'this?is?another' ????????}, ????????watch:{ ????????????msg:?function(newvalue,?oldvalue){ ????????????????console.log('newvalue?is:'?+?newvalue); ????????????????console.log('oldvalue?is:'?+?oldvalue); ????????????} ????????}, ????????computed:{ ????????????msg1:function(){ ????????????????return?'computed:'+this.msg?+?"?"?+?this.another+"?"+arr; ????????????} ????????} ????}) </script> </body> </html>最后一個的測試例子：（在chrome的console處運行）
arr?=?'123';//"123" app.another?=?'hohoho';
查看全部 -
v-bind：綁定屬性?？捎谩埃骸贝?/p>
v-on：綁定事件?？捎谩癅”代替
v-html：不會將標簽顯示出來，就是顯示文本而已
源碼：
<!DOCTYPE?html> <html> ?<head> ??<title>?new?document?</title>?? ??<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"/>??? ??<style> ??????.bg{ ??????????color:red; ??????} ??</style> ??<script?src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> ?</head>? ?<body>? ????<div?id="app"> ????????<div?class="bg"> ????????hello?world! ????????{{msg}} ????????</div> ????????<div?class="bg"> ????????????{{msg}}?? ????????</div> ????????{{count}} ????????<!--?{{template}}?--> ????????<div?v-html="template"></div> ????????<!--?<a?v-bind:href='url'>baidu</a>?--> ????????<a?:href='url'>baidu</a> ????????<!--?<button?type="button"?v-on:click="submit()">數字加1</button>?--> ????????<button?type="button"?@click="submit()">數字加1</button> ????</div> ???? <script> ????new?Vue({ ????????el:'#app', ????????data:?{ ????????????msg:'hello?vue', ????????????count:0, ????????????template:'<p>hello?template</p>', ????????????url:'http://www.baidu.com' ????????}, ????????methods:{ ????????????submit:function(){ ????????????????this.count++; ????????????} ????????} ????}) </script> </body> </html>查看全部 -
VUE調試方法
查看全部 -
項目打包及部署方法；
webpack配置方法。
查看全部 -
router中LinkActiveClass屬性若打開則可動態根據鏈接是否被點擊/激活為其綁定class="router-link-exact-active active"的類，配合在<style>中為a標簽新增&.active { color:#fff;? background:#42b983} 為被激活的鏈接展示底色
查看全部 -
<router-view/>為配合router使用的容器，在其中展示div中的router-link等（未完全理解）；
實現點擊事件后頁面跳轉：綁定@click事件到方法，在方法中以this.router.push('/home')形式進行跳轉；
v-model：數據雙向綁定，例：<input type="text" v-model="title">，title為Vue中data的成員；
引入Vuex：<script>中import store from '@/store'，再將store列為成員
查看全部 -
JS中click事件可獲取對應的data屬性，如點擊某元素后可獲取其index等。
查看全部 -
【調試方法】
打log或warning：console.log('')或console.err('')
消息彈窗（阻塞式）：alert('')
debugger關鍵字：可通過debugger暫停程序，可查看斷點、變量值等程序狀態；可配合methods中定義output方法使用（output方法中進行console.log等操作皆可），在程序暫停后在terminal中執行this.output()即可
窗口方式：在vue中的mouted(){}中定義window.vue = this，即可在terminal中執行該vue實例中的方法，如window.vue.output()
查看全部 -
【Vuex】
為vue.js開發的狀態管理模式；組件狀態集中管理；組件狀態改變遵循統一的規則。
使用方法：
在store.js中使用Vuex：Vue.use(Vuex)；定義新Vuex對象：export default new Vuex.Store，包含state和mutations，state中保存被管理的/組件公用的狀態，mutations中為可修改state中值的方法，以及actions；
在組件中import store from '@/store'：在export default中引用store，便可在組件中訪問store的state參數；在組件methods等中調用store.commit('mutations方法名')便可進行state修改。
【理解方式】將組件公用的state全部托管給Vuex，若需修改則向Vuex提交請求，由Vuex統一執行修改并通知所有使用該state的組件。
查看全部 -
【vue-router】
./src下router.js或/router/index.js中導入所用模塊：包括Vue自己、router、頁面等使用vue編寫的功能模塊；在routes中定義各組件的路徑，包括根目錄/homepage、各子頁面等。
使用<router-link to="/">Home</router-link>形式的語句編寫指向組件的鏈接。
查看全部
舉報