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>