vue的簡單學(xué)習(xí)

todolist

<html>
 <head>
   <meta charset="utf-8">
   <title>todolist</title>
   <script src="js/vue.js"></script>
   <style type="text/css">
     .header {
       width: 300px;
       height: 60px;
     }
     .header div {
       width: 100px;
       height: 60px;
       float: left;
       text-align: center;
     }
     .body {
       width: 300px;
       height: 600px;
     }
     .body ul {
       width: 300px;
       height: 600px;
     }
     .bg {
       background: red;
     }
     .body .n {
       display: block;
     }
     .a {
       display: none;
     }
     .h {
       text-decoration: line-through;
     }
   </style>
 </head>
 <body>
   <div id="app">
     <div class="input">
       <input type="text" @keydown.enter="enterkeyDown" v-model="name" placeholder="請(qǐng)輸入完成的事情" />
     </div>
     <div class="tab">
       <div class="header">
         <div @click="allClick(0)" :class="{bg:index==0}" >全部</div>
         <div @click="todoClick(1)" :class="{bg:index==1}">未完成</div>
         <div @click="readyClick(2)" :class="{bg:index==2}">已完成</div>
       </div>
       <div class="body">
         <ul class="all a" :class="{n:index==0}">
           <li v-for="item in allLst" @click="rClick(item.id)" :class="{h:item.status == 1}">{{item.name}}</li>
         </ul>
         <ul class="todo a" :class="{n:index==1}">
           <li v-for="item in tolst" @click="rClick(item.id)">{{item.name}} </li>
         </ul>
         <ul class="ready a" :class="{n:index==2}">
           <li v-for="item in readList" class="h">{{item.name}}  <span @click="remove(item.id)">*</span></li>
         </ul>
       </div>
     </div>
   </div>
 </body>
 <script>
   const vm = new Vue({
     el:"#app",
     data: {
       name:"",
       allLst:[  // 所有的事情
         {id:0,name:"事情的名字",status:0},
         {id:1,name:"事情的名字1",status:1},
         {id:2,name:"事情的名字2",status:0}
         ],
       index:0 ,
       id:10 
     },
     methods:{
       allClick(index) { 
         this.index = index;
       },
       todoClick(index) {
         this.index = index;
       },
       readyClick(index) { 
         this.index = index;
       },
       enterkeyDown() {
         if (this.name == null || this.name == "") {
           return;
         }
         let item = {id:++this.id,"name":this.name,status:0};
         this.allLst.push(item);
         this.name = "";
       },
       rClick(id) {
         let item = null;
         for (let i = 0; i < this.allLst.length; i++) {
           item = this.allLst[i];
           if (item.id == id) {
             break;
           }
         }

         item.status = 1;
       },
       remove(id) {
         let index = null;
         for (let i = 0; i < this.allLst.length; i++) {
           const item = this.allLst[i];
           if (item.id == id) {
             index = i;
             break;
           }
         }
         this.allLst.splice(index,1)
       }
     },
     computed:{
       tolst:function() {
         return this.allLst.filter(function(item) {
           return item.status == 0;
         })
       },
       readList:function() {
         return this.allLst.filter(function(item) {
           return item.status == 1;
         })
       }
     }
   })
 </script>
</html>

購物車

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>購物車</title>
    <script src="js/vue.js"></script>
    <style>
      .spanB {
        border: 1px solid black;
        display: inline-block;
        width: 10px;
        height: 10px;
      }
      .selected {
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <span class="spanB" @click="allclick" :class="{selected:allTag}"></span>
      </div>
      <div class="body">
        <table>
          <thead>
            <tr>
              <th>狀態(tài)</th>
              <th>名稱</th>
              <th>價(jià)錢</th>
              <th>數(shù)量</th>
              <th>總價(jià)</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in lst" :key="index">
              <td>
                <span @click="selected(item)" class="spanB" :class="{selected:item.checked}"></span>
              </td>
              <td>
                {{item.name}}
              </td>
              <td>{{item.price}}</td>
              <th>
                <button @click="item.number++">增加</button>
                <input type="text" v-model="item.number"/>
                <button @click="decNumber(item.id)">減少</button>
              </th>
              <th>{{item.number * item.price}}</th>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="footer">
        <div> 選中商品的數(shù)量: {{selectedCount}}</div>
        <div> 選中商品的總價(jià): {{selectedTotalPrice}} </div>
      </div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el:"#app",
      data: {
        lst:[
          {"id":1,"name":"泡面","price":5,"number":1,"checked":false},
          {"id":2,"name":"辣條","price":10,"number":1,"checked":true},
          {"id":3,"name":"礦泉水","price":3,"number":1,"checked":false}
        ]
      },
      methods: {
        decNumber(id) {
          let index = null;
          for (let i = 0; i < this.lst.length; i++) {
            if (this.lst[i].id == id) {
              index = i;
            }
          }
          if (this.lst[index].number > 1) { 
            this.lst[index].number--;
          } else { 
            this.lst.splice(index,1); 
          }
        },
        selected(item) {
          item.checked = !item.checked;
        },
        allclick() { // 點(diǎn)擊全選按鈕
          if (this.allTag) { // 如果當(dāng)前是全選狀態(tài)
            for (let i = 0; i < this.lst.length; i++) {
              this.lst[i].checked = false;
            } 
          } else {
            for (let i = 0; i < this.lst.length; i++) {
              this.lst[i].checked = true;
            } 
          }
        }
      },
      computed:{
        selectedCount: function() {
          let result = 0;
          for (let i = 0; i < this.lst.length; i++) {
            if (this.lst[i].checked) {
              result+=this.lst[i].number;
            }
          }
          return result;
        },
        selectedTotalPrice:function() {
          let result = 0;
          for (let i = 0; i < this.lst.length; i++) {
            if (this.lst[i].checked) {
              result+=this.lst[i].number*this.lst[i].price;
            }
          }
          return result;
        },
        allTag:{
          get:function() {
            for (let i = 0; i < this.lst.length; i++) {
              if (!this.lst[i].checked) {
                return false;
              }
            }
            return true;
          }
        }
      }
    })
  </script>
</html>

vue的聲明周期

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue的生命周期</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div>
      <div id="app">
        {{name}}
        <div @click="name+='aa'">點(diǎn)擊</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:"#app",
      data: {
        name:"張三"
      },
      created() { // 在created中發(fā)送網(wǎng)絡(luò)請(qǐng)求
        console.log("初始化完成就會(huì)執(zhí)行")
      },
      mounted() {
        console.log("掛載")
      },
      destroyed() { // 移除一些監(jiān)聽田藐，例如定時(shí)器
        console.log("銷毀")
      }
    })
    
    // vm.$mount("#app");
  </script>
</html>

生命周期主要分為三個(gè) created mounted destroyed
在生命周期的不同階段，會(huì)回調(diào)一些鉤子函數(shù)
在相應(yīng)的生命周期鉤子函數(shù)中寫入相應(yīng)方法來實(shí)現(xiàn)相應(yīng)功能

node

js運(yùn)行在瀏覽器中，不能擁有操作文件憔披，二進(jìn)制等這些功能
運(yùn)行環(huán)境，es規(guī)范琅束，提供依賴包（http,io,buffer...）
我們可以利用node這個(gè)環(huán)境開發(fā)后臺(tái)服務(wù)器

npm

node提供一個(gè) js包的管理工具
npm 切換到 cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
使用cnpm 安裝依賴包 -g是全局安裝
cnpm install 包名 -g
cnpm install 包名 --save
如果不添加 --save 只會(huì)下載這個(gè)包,在package.json文件不會(huì)下載的記錄
--dev 開發(fā)的時(shí)候使用诈嘿，上線之后就不在使用的一些包
cnpm uninstall 包名下載包
dependencies 上線之后還在用（bootstrap,jquery）
devDependencies 開發(fā)打包的時(shí)候使用，上線之后就不使用了（webpack）
如果沒有添加 --save, 在package.json中不會(huì)有記錄
如果下載的項(xiàng)目由package.json糠雨，只需要執(zhí)行 cnpm install , 他就會(huì)把依賴包都下載下來

webpack (gulp)

自動(dòng)化的打包工具
瀏覽器只能認(rèn)識(shí) html, css, js, 圖片
為了快速開發(fā)(es6,sass,typeScript...,aa.Vue ) -> 工具 -> html,css,js,圖片
安裝 cnpm install webpack webpack-cli --save --dev
編寫webpack的文件 webpack.config.js
webpack 打包指令進(jìn)行打包就可以了

vue-cli

腳手架才睹，創(chuàng)建半成品，我們?cè)诎氤善坊A(chǔ)上開發(fā)
npm install -g @vue/cli 安裝腳手架
創(chuàng)建項(xiàng)目 vue create 項(xiàng)目名（先通過cd進(jìn)入到創(chuàng)建項(xiàng)目的目錄）
babel 用來把es6 -> es5, 把typeScripte -> js
eslink 代碼格式的檢測工具