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>