vue筆記

1.按鈕組件 :callback=‘aa’
2.方法聲明

export default {
    methods: {
        go() {
            this.$router.push({ name: 'step2'});
        }

3.數據聲明

export default {
    data(){
        return{
            d:[
                {             
                    name: '科技' 
                },
                {             
                    name: '新聞' 
                },
                {           
                    name: '娛樂' 
                }
            ]
        }
    }

4.上下居中 align-items: center;

5.左右居中 justify-content: center;

6.flex佈局兩端對齊
display: flex;
justify-content:space-between;
7.position: fixed;
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
8.投影
box-shadow: 2px 2px 20px rgb(51,51,51,0.1);
水平位置 垂直位置 模糊度 色值用rgb
9.下邊框
border-bottom: 1px solid #f4f4f4;
邊框的寬度 邊框的樣式 邊框的顏色
10.用變量改變屬性
<img v-bind:src=pitch1 class=“tdpImage” @click=“pitch”>
11.按鈕的點擊效果 :callback=“方法名”

12.跳轉頁面
this.$router.push({ name: ‘頁面的名字’});

13.outline: none; /* 文本框取消選中框*/
14.更新依賴的命令
cnpm i --save-dev 依賴名
15.hotAPI解決方法，更新webpack-dev-server
cnpm i --save-dev webpack-dev-server

16.data數據綁定
methods定義函數
watch監聽器
可以監聽變量值的改變，而觸發事件

17.v-bind 屬性綁定
:src=“字符串”
:class="{red:isRed}" isRed是布爾值決定是否賦值爲class名

18.v-for 循環渲染
v-for=“item in items”
19.v-on 綁定事件
v-on:click=“方法名”

只關注抽象出來的數據，而在頁面的展現，不去關注實現頁面的過程。

20.localstorage儲存

創建store.js文件
內容：
const STORAGE_KEY = ‘todos-vuejs’
export default{
fctch(){
return JSON.parse(window.localStorage.getItem(
STORAGE_KEY) ||’[]’)
},
save(items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(
items))
}

}

fctch方法取出
save是儲存

21.引用組件
import 組件名1 from ‘路徑’;
components:[組件名1,組件名2]

22.組件之間的通信
父組件向子組件中傳入值
給子組件加屬性props
props :[‘屬性名’];

23.接口請求數據

getSupermarketList().then(resp => {
         console.log(resp)
         this.supermarketGoods = resp.data;
         this.supermarketGoods.forEach((supermarket,index) => {
             console.log(supermarket);
                 let dataGoods = {
                     ent_mc:'佳樂家',
                     pageIndex:'1',
                     pageSize:'2',
                     product_name:'',
                 }
             getSupermarketGoodsList(dataGoods).then(resp => {
                     console.log(resp)
                     this.good = resp.data;
                 })
  })
     })

24.周期函數請求接口
//周期函數，頁面加載完成之前執行

 mounted() {
 //請求接口
  getSupermarketList().then(resp => {
         console.log(resp)
         this.supermarketNames = resp.data;
     })
 },

25.頁面跳轉 傳參

//跳轉頁面

     goSupermarketgoods(supermarketName){
         this.$router.push({name:"goodsDetails",
         params:{//向頁面傳參
             supermarket:supermarketName
         }
         });
     }

在跳轉後的頁面獲取傳過來的參數
在周期函數中調用

mounted(){
   //接收上個頁面傳過來的數據
  let supermarketGoods = this.$route.params.supermarket;
  console.log(supermarketGoods);
}

26.下拉加載組件
給組件加一個類選擇器，給屬性
.listview{
position: absolute;
top: 0;
bottom: 0;
}
就可以觸發下拉事件了

27.設置佔位文本的顏色，字體大小，位置

::-webkit-input-placeholder {
     /* placeholder顏色  */
     color: #aab2bd;
      /* placeholder字體大小  */
     font-size: 12px;
     /* placeholder位置  */
     text-align: right;
 }

28.去除原生態按鈕和文本框獲取焦點的邊框

 outline: none;