Vue简单创建一个项目（二）

分析一下简单安装后文件里面都有啥：

node_modules：下载好的依赖项
src：开发时候用的资源
index.html：入口文件
package.json:管理项目的各种模块及版本名称作者等信息
asset：静态文件的根目录

webpackconfig.js可以把我们写的.vue文件编译成浏览器能看得懂的文件。

.vue文件就是一个组件

包含了html标签

<div id="app"></div>
所有的内容都要包含到一个根节点下

包含了scss

<style></style>
用来修饰样式的

包含了js

<script> 
      export default {   name: 'app', 
        data () {//业务逻辑里面定义的数据
        return {
                  msg: 'Welcome to Your Vue.js App'
                  }  
                   }
                        } 
</script>

一、和属性相绑定

v-bind:src="url"和:src="url"是一样的

二、绑定html输出必须要有标签承载

<div v-html="h"><div>
h:"</h1>我是谁？</h1>"

三、绑定text输出必须要有标签承载

<div v-text="h"><div>
h:"我是谁？"

四、@click="ok()"和v-on:click="ok()"作用是一样的

五、循环和判断的写法是这样的
<li v-for="(item,key) in list"></li>

<li  v-if="!item.checked"></li>

六、导入组件的方法

import storage from "./model/storage";

七、组件中的写法，这也是数据持久化

var storage={

  set(key,value){

    localStorage.setItem(key, JSON.stringify(value));
  },
  get(key){

    return JSON.parse(localStorage.getItem(key));
  },remove(key){
    localStorage.removeItem(key);
  }

}

export default storage;

八、todolist的写法：

<template>


  <div id="app">

    <input type="text" v-model='todo' @keydown="doAdd($event)" />

    <hr>
    <br>

    <h2>进行中</h2>

    <ul>

      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}}   --  <button @click="removeData(key)">删除</button>
      </li>
    </ul>

    <br>
    <br>
    <h2>已完成</h2>



    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox"  v-model="item.checked" @change="saveList()" /> {{item.title}}  -- <button @click="removeData(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import storage from "./model/storage";


  export default {
    data () {
      return {

        todo:'' ,
        list: []
      }
    },
    methods:{

      doAdd(e){

          this.list.push({
            title:this.todo,
            checked:false
          })

        storage.set("list",this.list);
      },
      removeData(key){

        this.list.splice(key,1)

        storage.set("list",this.list);
      }
      , saveList(){

        storage.set("list",this.list);
      }

    },mounted(){   /*生命周期函数       vue页面刷新就会触发的方法*/

      var list=storage.get("list");

      if(list){  /*注意判断*/
        this.list=list;
      }
    }

  }
</script>

九、类的使用
首先要定义类：

  .red
{
  color:red;
}

在模板里面要

<span v-bind:class="{red:flag}"></span>

在data的script标签内要

data{
flag:true或者false
}

十、内联样式的使用

 <span v-bind:style="{background:dsa}"></span>
data:{ dsa:"green"}

十一、循环过程关联类的处理的处理方式可以写成：

<li v-for="(item,key) in list" :class="'red':key==0,'blue':key==1"></li>

十二、ref其实和$("#id")一样

<div ref="mydiv"></div>

this.$refs.mydiv.text

和

<div id="mydiv"></div>
$("#mydiv").text();

十三、生命周期函数和methods和data是同一个级别的

data:{},methods:{},mounted:{}