01.Vue项目创建、一个Todolist小案例（知识点：事件，

创建项目

选定应用目录，运行cmd命令行：

vue create myapp
//选择
====================
Babel
Router
Vuex
CSS Pre-processors
Linter/Formatter
====================
Sass/SCSS
====================
ESLint + Standard config
====================
Lint and fix on commit
====================
In dedicated config files
====================
y

运行项目

在myapp目录下，执行cmd命令：

npm run serve

在浏览器输入地址：http://localhost:8080/即可看到项目

Vue插件安装

Vetur插件：vue代码高亮、纠错等

image.png

第一个Demo

做一个Todolist小案例（基础、点击事件）

//===>src/App.vue
<template>
  <div>
    hello vue
    <input type="text" ref="mytext"/>
    <button @click="handleAdd()">add</button>

    <ul>
      <li v-for="data in datalist" :key="data">
        {{data}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      datalist:[]
    }
  },
  methods:{
    handleAdd(){
      // console.log("aaa",this.$refs.mytext.value)
      this.datalist.push(this.$refs.mytext.value)
    }
  }
}
</script>

<style lang='scss'>
  ul{
    list-style: none;
    li{
      background: yellow;
    }
  }
</style>

运行结果：

image.png

第二个Demo

（插槽、isShow、component组件引入）

先写两个组件

//===>src/components/Navbar.vue（插槽）
<template>
  <nav>
    navbar-
    <slot></slot>
  </nav>
</template>

//===>src/components/SideBar.vue
<template>
    <aside>
        sidebar
        <ul>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul>
    </aside>
</template>

//===>src/App.vue（isShow、component组件引入）
<template>
  <div>
    hello vue
    <input type="text" ref="mytext" />
    <button @click="handleAdd()">add</button>

    <ul>
      <li v-for="data in datalist" :key="data">{{data}}</li>
    </ul>

    <navbar>
      <button @click="isShow=!isShow">navbar-click</button>
    </navbar>
    <sidebar v-show="isShow"></sidebar>
  </div>
</template>

<script>
import navbar from "./components/Navbar";
import sidebar from "./components/Sidebar";
export default {
  data() {
    return {
      datalist: [],
      isShow: false
    };
  },
  methods: {
    handleAdd() {
      // console.log("aaa",this.$refs.mytext.value)
      this.datalist.push(this.$refs.mytext.value);
    }
  },
  components: {
    navbar: navbar,
    sidebar: sidebar
  }
};
</script>

<style lang='scss'>
ul {
  list-style: none;
  li {
    background: yellow;
  }
}
</style>

image.png

改进一下（scoped）

scoped标签：样式局部生效

//===>src/App.vue
...
<style lang='scss' scoped>
ul {
  list-style: none;
  li {
    background: yellow;
  }
}
</style>

//===>src/components/SideBar.vue
<style lang="scss" scoped>
ul {
  li {
    background: blue;
  }
}
</style>

image.png