您现在的位置是:首页 >技术教程 >vue的搭建以及命令网站首页技术教程

vue的搭建以及命令

quanmeiren 2024-06-17 11:25:15
简介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>

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。