Vue -- 总结 02

Vue脚手架

安装Vue脚手架：

在cmd中安装(输入):npm install -g @vue/cli

如果下载慢或下载不了，可以安装(cmd输入)淘宝镜像:npm config set registry https://registry.npmmirror.com

用命令创建Vue项目

在要创建的vue项目的文件夹里输入 cmd 回车

创建项目：“vue create 项目名”

注意：项目名不能带大写字母, 中文和特殊符号或者和下载的包依赖名称相同

可以选vue2或vue3

进入脚手架项目下, 启动内置的热更新本地服务器 : npm run serve 

创建的文件结构

 hello-vue        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      ├── index.html # 单页面的html文件(网页浏览的是它)
    ├── src         # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      ├── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置文件--babel是一个JS编译器，兼容低版本浏览器，引入babel，将es6转为es5
    ├── jsconfig.json   #如果想要更改默认的webpack配置时,可以通过jsconfig.json文件
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
    ├── packge-lock.json    # 项目包版本锁定
    ├── vue.config.js   #vue文件编译时的配置文件

assets和public目录的区别:

assets和public两个目录都可以用来放置静态资源，通常将外部引入的第三方的文件放在public中，自己的文件放在assets中。

1、public文件夹

（1）路径设置时无需添加 /public，默认加载 public 文件夹下的文件

（2）public文件夹下的资源会直接编译，而不经过 webpack

2、assets文件夹

（1）assets目录中的文件会被webpack处理解析为模块依赖

（2）大多数用来存放js、css等

App.vue

<template>
  <!-- 一个模版里面只能有一个根标签 -->
  <div id="app">
    <!-- v-if控制元素的删除 -->
    <h1 v-if="!flag">hello Vue</h1>
    <!-- <h3 v-else-if="flag">我是h3</h3> -->
    <h2 v-else>我else</h2>

    <template v-if="flag">
      <h1>你好</h1>
      <p>跑步</p>
      <p>打球</p>

    </template>
    <!-- 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 -->
    <div v-show="!flag">我是v-show</div>
    <!-- v-for的语法是item in items items是数据源（就是你要循环的数据） item 数组的每一项 -->
   <div v-for="(item1,index) in arr">
    {{ item1 }}---{{ index }}
   </div>
   <div v-for="(item1,index1) in arrObj">
      <div>{{ item1.name }}--{{ index1 }}</div>
      <div v-for="(item2,index2) in item1.childern">
        {{ item2.name }}--{{ index2 }}
      </div>

   </div>
   <div v-for="(value1,name,index) in obj">
    {{ value1 }}--{{ name }}--{{ index }}
   </div>
    
  </div>
  
</template>

<script>
// 每一个.vue文件就是一个组件后续你写的页面都是以.vue结尾的
// 根组件
// 本地图片先引入在使用
// @直接找src目录下
export default {
  name: 'App',
  data(){//data初始化数据
    return{
      flag:true,
      arr:['小明','小蓝','小红'],
      arrObj:[
        {
          name:'oppo',
          childern:[
            {
              name:'一加'
            }
          ]
        },
        {
          name:'小米',
          childern:[
            {
              name:'红米'
            }
          ]
        }
      ],
      obj:{
        name:'小小',
        age:18
      }
    }
  },
  methods:{
    
  }
 
}
</script>

<style>

</style>

动态绑定绑定属性

<template>
    <!-- 一个模版里面只能有一个根标签 -->
    <div id="app">
        <h1>hello Vue</h1>
        <h3>你好</h3>
        <a href="http://www.baidu.com">百度一下</a>
        <div>{{ hrefSrc }}</div>
        <!-- v-bind动态绑定属性 -->
        <a v-bind:href="hrefSrc">动态绑定herf</a>
        <!-- 简写为 -->
        <a :href="hrefSrc">动态绑定herf--简写形式</a>
        <img src="https://img2.baidu.com/it/u=3782187671,1334521936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334" alt="">
        <img :src="imgSrc" alt="">
        <img src="./assets/logo.png" alt="">
        <img :src="logo" alt="">
        <div class="box" :class="{active:!isActive}">我是box</div>
        <div :class="obj">小蓝</div>
        <div :class="activeClass">小明</div>
        <div :class="!isActive?'active':''">小红</div>
        <button @click="changeIsActive">修改</button>
    </div>
</template>

<script>
// 每一个.vue文件就是一个组件后续你写的页面都是以.vue结尾的
// 根组件
// 本地图片先引入在使用
// @直接找src目录下
import logo from "@/assets/logo.png";

export default {
    name:'App',
    data(){//data初始化数据
        return{
            isActive:true,
            activeClass:'active',
            obj:{
                active:true
            },
            logo,
            msg:"hello word",
            hrefSrc:"http://www.baidu.com",
            imgSrc:"https://img2.baidu.com/it/u=3782187671,1334521936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"
        }
    },
    methods:{ // 方法
        changeIsActive(){
            console.log('this',this);
            let that = this;
            that.isActive = !that.isActive;
        }
    }
}
</script>

<style>
.box{
    width: 300px;
    height: 150px;
    border: 2px solid red;
}
.active{
    color:red
}

</style>