vue的搭建以及命令

0.0 课程介绍

• Vue介绍 【了解】

• Vue项目的搭建 【掌握】

• 项目目录详解【掌握】

• Vue组件化【掌握】

• Vue的表达式 【重点】

• Vue的指令【重点】

1.0 什么是Vue?【了解】

Vue是一个构建用户界面（UI）的JS库。

1.1Vue的特点

• 小 20k 【大概11000多行】

• 性能强 虚拟dom

• 双向绑定

• 生态丰富

1.2 Vue历史 [了解]

1.0 -> 2015.10

2.0 -> 2016.10 安装 — Vue.js

3.0 -> 2020.09 Vue.js - 渐进式 JavaScript 框架 | Vue.js

2023年5月20日 ：3.3.4

2.0 Vue的环境搭建【掌握】

2.1 CDN使用

• 直接使用网络资源

• 将vuejs下载到本地

2.2 脚手架安装

先安装Vue脚手架

vue --version // 查看脚手架的版本
​
安装：
npm i @vue/cli -g
或
yarn add global @vue/cli

#注意 如果你的yarn无法使用，可能是没有安装yarn npm i yarn -g,或者是没有配置环境变量

先 yarn global bin 找到你的yarn安装位置

我的电脑-> 右键属性 -> 高级系统配置 ->环境变量 -> path、

2.3 使用脚手架创建Vue的项目

vue create 项目名      // vue-demo    demo

一顿操作：

见图形笔记

#如果你想删除你保存预设方案，去我的电脑->用户 ->你的电脑名 ->删掉 vuerc

C:\Users\你的电脑名

3.0 组件化【掌握】

3.1 什么是组件化？

相当于将一个大的页面拆分成多个大组件，通过小组件组合成大组件，这个用组件拼接成页面的思维就叫组件化

特点：

• 可复用

• 易维护

• 可组合

3.2 单文件组件

一个.vue文件就是一个单文件组件

<template> // 你的html
    <div>
        不仅可以写样式，还可以写很多vue提供的语法及指令
        ...
    </div>
</template>
​
​
<script> // 你的js
// 你在此处暴露了什么出去？ VueComponent类
export default {
    // 你的VUE配置选项
    data(){ // 专门放你的数据
        return {
            xx
        }
    },
      
    methods:{ // 专门放你的方法们
        fn（）{ },
        foo（）{ },
    }
​
}
            
</script>
​
<style lang="less" scoped> // 写你的css
    
</style>
​

注意： 推荐插件

vuter: 语法提示

Vue VSCode Snippets ： 快捷键

path: 路径提示

4.0 Mustache胡须表达式【重点】

{{ 表达式 }}
`${ 表达式 }`
​
看是不是表达式？
100 // 是
let arr = [10,20,30]
arr.map(v=>v+100).join('-') // 是
true?'不是'：'是' // 是
if(true){ a = 10 }  // 不是
for(let i=0;i<10;i++){ a+=i } // 不是
arr.forEach(i=>{ i+10 }) // 不是

什么是表达式？

1、能够得到唯一结果的一句运算

2、可以放在赋值表达式右侧

5.0 指令 【重点】

vue的指令是什么？

帮助我们操作dom，提高效率

vue的指令就是一个以v-开头的自定义属性

<div id="dxx" class="xxx" age="10" v-xx="表达式">

5.1 v-text 和 v-html

作用：帮助我们渲染dom节点

v-text: 底层是 textContent ,渲染数据，不能识别标签

v-html: 底层是 innerHTML ,渲染数据， 能够识别标签

 

5.2 v-if 和 v-show

作用： 帮助我们根据条件渲染页面节点

v-show: 底层是通过控制display的属性来进行显示隐藏

v-if: 底层是通过删除页面或重新渲染节点来实现显示隐藏

 

5.3 v-if 和 v-else-if 和 v-else

作用： 帮助我们根据条件渲染页面节点，跟我们js中的if...else if...else是一样的用法，如果从上到下开始判断，当满足条件就不渲染后面的内容

5.4 v-for 循环

作用 : 帮助我们循环渲染页面

// 数组
let arr = [1,2,3]
​
<div v-for="（item，index） in arr"> // item 是你的每一项   index是你的索引
   {{ item }} -- {{ index }}
</div>
​
​
// 对象
let obj = {name:'张无忌',age:18,like:'金花宝宝'}
<div v-for="（value,key,index） in obj">
    {{ value }} -- {{ key }} -- {{index}}

</div>

 

 

5.5 v-model

作用：实现数据的双向绑定，只用使用v-model 与data里的数据就不分彼此 表单之王

​
<input v-model="data的数据" />

​

 

 

 

5.6 v-on 事件

作用：绑定事件， 简写为@

常规写法：
<button v-on:事件类型=“表达式”>xxx</button>
<button v-on:事件类型=“处理函数”>xxx</button>
<button v-on:事件类型=“处理函数（参数1，参数2,...）”>xxx</button>
​
简写：
<button @事件类型=“表达式”>xxx</button>
<button @事件类型=“处理函数”>xxx</button>

<button @事件类型=“处理函数（参数1，参数2,...）”>xxx</button>