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

html 复制代码
<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>

动态绑定绑定属性

html 复制代码
<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>
相关推荐
别拿曾经看以后~4 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死7 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人19 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人19 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR25 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香27 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969330 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai35 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91544 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍