vue的簡單學習

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="請輸入完成的事情" />
     </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>價錢</th>
              <th>數(shù)量</th>
              <th>總價</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> 選中商品的總價: {{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() { // 點擊全選按鈕
          if (this.allTag) { // 如果當前是全選狀態(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'">點擊</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:"#app",
      data: {
        name:"張三"
      },
      created() { // 在created中發(fā)送網(wǎng)絡(luò)請求
        console.log("初始化完成就會執(zhí)行")
      },
      mounted() {
        console.log("掛載")
      },
      destroyed() { // 移除一些監(jiān)聽，例如定時器
        console.log("銷毀")
      }
    })
    
    // vm.$mount("#app");
  </script>
</html>

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

node

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

npm

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

webpack (gulp)

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

vue-cli

腳手架， 創(chuàng)建半成品，我們在半成品基礎(chǔ)上開發(fā)
npm install -g @vue/cli 安裝腳手架
創(chuàng)建項目 vue create 項目名 （先通過cd進入到創(chuàng)建項目的目錄）
babel 用來把es6 -> es5, 把typeScripte -> js
eslink 代碼格式的檢測工具

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容