VueJS之vue的简介、vue的脚手架安装、vue的组件、指令

vue的简介

什么是vue?

渐进式的javascript框架(Vue是一个构建用户界面（UI）的JS库),数据驱动(数据发生了改变,页面自动变)

vue的版本

vue2.x

vue3.x

vue的脚手架安装

1.全局安装vue的脚手架(只安装一次)

npm i -g @vue/cli
or
yarn add global @vue/cli

注意:使用yarn的安装脚手架 配置yarn的环境变量
yarn global bin 得到路径
C:\Users\admin\AppData\Local\Yarn\bin
我的电脑-->属性-->高级系统设置-->环境变量-->配置Path

2.创建项目(项目名称不能大写)

vue create 项目名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqbaYskB-1681661976973)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230227100917846.png)]

3.进入项目

cd 项目名称

4.启动服务

npm run serve
or
yarn serve

5.项目上线之前–打包

npm run build
or
yarn build

vue的目录结构介绍

node_modules—-需要的所有依赖
public—唯一完整index.html
src—–写代码的目录
​		assets---静态资源
​				css
​				fonts
​				imgs
​		components—公共复用组件
​		App.vue—顶级组件
​		main.js---入口文件(一进来就要运行main.js)
.browserslistrc---浏览兼容性配置
.gitignore---git忽略上传文件
babel.config.js---编译成es5的配置文件
jsconfig.json---js的配置文件
package-lock.json---版本锁
package.json---包描述文件(包管理文件)
vue.config.js--vue的配置文件

vue的组件

1.什么是组件?

后缀名.vue称为组件,命名规则建议大驼峰

2.单组件

<template>
<!-- 只有一个根节点 -->
  <div class="title">
    阿伟:
  </div>
</template>
<script>
  //暴露vue的实例对象  
  export default{
    
  }
</script>
<style lang="less" scoped>
//lang 语言 less
//scoped 让样式私有化 
.title{
  color:red;
}
</style>

3.组件化开发[掌握]

1.优势?

​ 可重用,可组合,易维护

2.步骤:

1.创建需要的组件
2.导入需要的组件
	import xxx from "xxx"
3.注册组件
export default{
    //2.注册组件
    components:{
      FooterNav
    }
  }
4.使用组件(当标记使用 建议使用小写的双标签)

胡须表达式[掌握]

<template>
    <div>
		<h1>{{uname}}</h1>
    </div>
</template>
export default {
    //data是一个函数,里面返回一个对象
    data(){
        return {
            uname:"阿伟"
        }
    } 
}

面试题

data为什么是个函数?

指令[掌握]

1.什么是指令

在标签上自定义属性,v-*=“表达式”,作用操作dom

2.指令

v-html和v-text

v-html相当于innerHTML,v-text相当于textContent,胡须表达式可以取代v-text

v-show和v-if

v-show改变display的取值,v-if是删除节点

频繁操作显示和隐藏使用v-show,否则反之用v-if

v-if v-else-if v-else

相当于if…elseif…else

v-for

数组遍历:

v-for=“(元素,索引) in 数组” :key=“唯一性”

对象遍历

v-for ="(键值,键名,索引) in 对象" :key="唯一性"

v-model 数据双向绑定 表单之王

注意:v-model只能给表单使用 input（输入框 单选框 多选框） / textarea / select

v-on绑定事件（v-on===>@）

<标签 v-on:事件类型=“函数名”></标签>
<标签 @事件类型=“函数名”></标签>
export default {
    
    methods:{
        函数名(){}
        
    }
}

v-on绑定事件（v-on===>@）

<标签 v-on:事件类型=“函数名”></标签>
<标签 @事件类型=“函数名”></标签>
export default {
    
    methods:{
        函数名(){}
        
    }
}