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>状态</th>
              <th>名称</th>
              <th>价钱</th>
              <th>数量</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> 选中商品的数量: {{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) { // 如果当前是全选状态
            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中发送网络请求
        console.log("初始化完成就会执行")
      },
      mounted() {
        console.log("挂载")
      },
      destroyed() { // 移除一些监听，例如定时器
        console.log("销毁")
      }
    })
    
    // vm.$mount("#app");
  </script>
</html>

生命周期主要分为三个 created mounted destroyed
在生命周期的不同阶段，会回调一些钩子函数
在相应的生命周期钩子函数中写入相应方法来实现相应功能

node

js运行在浏览器中，不能拥有操作文件，二进制等这些功能
运行环境，es规范，提供依赖包（http,io,buffer...）
我们可以利用node这个环境开发后台服务器

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 开发的时候使用，上线之后就不在使用的一些包
cnpm uninstall 包名下载包
dependencies 上线之后还在用（bootstrap,jquery）
devDependencies 开发打包的时候使用，上线之后就不使用了（webpack）
如果没有添加 --save, 在package.json中不会有记录
如果下载的项目由package.json，只需要执行 cnpm install , 他就会把依赖包都下载下来

webpack (gulp)

自动化的打包工具
浏览器只能认识 html, css, js, 图片
为了快速开发(es6,sass,typeScript...,aa.Vue ) -> 工具 -> html,css,js,图片
安装 cnpm install webpack webpack-cli --save --dev
编写webpack的文件 webpack.config.js
webpack 打包指令进行打包就可以了

vue-cli

脚手架，创建半成品，我们在半成品基础上开发
npm install -g @vue/cli 安装脚手架
创建项目 vue create 项目名（先通过cd进入到创建项目的目录）
babel 用来把es6 -> es5, 把typeScripte -> js
eslink 代码格式的检测工具