脚手架

脚手架入门

1. 什么是脚手架

辅助我们搭建项目的工具,可以使用脚手架搭建一个项目

2. 安装脚手架

//1. 安装脚手架
	npm i -g @vue/cli

//2. 安装后,可以查看脚手架版本,如果出现版本号,代表安装完成
	vue --version

3. 使用脚手架搭建vue项目

//1.脚手架版本 2.x及以下
	vue init webpack 项目名
//2.脚手架版本 3.x 4.x 5.x
    vue create 项目名	或
    vue create .

初始脚手架

1. App.vue页面

该页面可以理解为是主页,是最外面的页面(组件)

//1.路由跳转,类似于超链接,其中的to属性,代表的是跳转到哪个路由 
	 <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>

	//路由: 通过路由跳转加载不同的页面, 需要在./router/index.js文件中完成路由跳转
	//路由跳转中,有三个部分 ==> router/index.js页面
        {
          path:'/',               1.路由规则
          name:'home',            2.路由名字
          component:HomeView      3.路由对应的组件
        }

//2. 路由占位
	 <router-view/>

2. ./router/index.js页面

//1.引入路由跳转对应的组件,并赋予一个名字
	import HomeView from '../views/HomeView.vue'

	加载路由页面方法
    //路由跳转中,有三个部分 ==> router/index.js页面
        {
          path:'/',               1.路由规则
          name:'home',            2.路由名字
          component:HomeView      3.路由对应的组件
        }
		//还有一种方法是路由懒加载,之后会学习到

3. views和components

//约定俗成
views目录下放父组件
components目录下放子组件

//子组件和父组件仍可以使用之前学习的方法互相通讯(传值)

使用脚手架

常用修饰符

1. 事件修饰符

1) .stop 阻止事件冒泡
     (需要写在事件冒泡后面)
2) .prevent 阻止默认行为
     (如超链接的默认行为--跳转,也可以在阻止默认行为的同时阻止冒泡 .prevent.stop)
3) .once 阻止事件的重复触发
     (不能和.stop一同使用,否则会出现冒泡,也就是stop会失效)

	<button @click.once="fun()">点击签到</button>

2. 按键修饰符

.enter 回车	(绑定在事件中也可以绑定为.13)
.tab   
.delete
.esc
.space
.up
.right
......

<input type="text" @keyup.enter="inp()">
<input type="text" @keyup.13="inp()">

3. 表单修饰符

.trim 去除两端空格
.number 将表单中的内容类型转换成数值类型

watch监听

可以监听一个值的变化,如果一个值发生,会触发监听中的方法

1. 普通监听

语法格式:
    data(){
        return{}
    },
    watch:{
        要监听的数据(新值,老值){

        }
    }

2. 立即监听

语法格式:
    watch:{
       要监听的数据:{
           handler(新值,老值){
               对数据的操作
           },
           immediate:true
           // 设置该属性后,表示立即监听
        }
   }

3. 深度监听

深度监听监听的数据不可以是对象,对象即使数据变化也无法监听
如果需要监听对象中的数据的变化,需要设置 deep:true

深度监听:不推荐使用的,因为消耗性能,所以当需要监听对象时,可以指定对象中指定的值
      注意: 如果指定了对象中的某一数据的监听,要写成字符格式 => "obj.name"

• 监听和计算属性的区别

1. 监听中的函数不需要调用  计算属性中的函数需要调用,调用时不用()
2. 监听是当一个值发生改变时,会触发监听中的方法,然后根据变化的值完成后续的操作
3. 计算属性中,里面的方法因为一些值会影响结果时,使用的是计算属性

使用环境:
  1. 监听: 搜索联想 => 根据输入数据的变化完成后续操作,渲染不同的页面
  2. 计算属性: 总计=> 根据数量的变化,影响总计的变化

混入

可以将公共数据和方法声明在混入中

1. 全局混入

//定义:在任何组建中直接使用混入中的数据和方法(必须声明在main.js文件中)
语法格式:
	Vue.mixin({
        data(){
            return{
                键: 值
                ....
            }
        },
        methods:{
            方法名(){}
        },
        生命周期函数(){}
    })

2. 局部混入

//定义: 任何组件中都可以使用,但是必须在使用混入的组件中引入该混入
语法格式:
	可以在src目录中创建一个新目录
    mixins/index.js
	
//	index.js文件中导出数据
	export 和export default 都是用于开放(导出)内容的
    常见的导出内容: 函数,常量,文件,模块
	
	1. export 方式导出
    	导入时需要加{}
		导入多个值时使用,导入时不能更换名字
	2. export default 方式导出
		导入时不需要加{}
		导入单个值时使用
    	
    //在对应的vue文件中导入数据
        import {Mixins} from "@/mixins/index.js"
	//局部混入需要注册
		mixins:[Mixins]

ref和$refs的使用

1. ref

//可以在vue组件中使用ref获取组件中的某些元素,类似于id属性
//注意: ref即可以绑定html标签,还可以绑定给组件标签

语法格式(绑定给组件):
	<父组件模板>
        <子组件标签 ref='值'></子组件标签>
	</父组件模板>

2. $refs

this.$refs.值
//里面包含了该子组件里面的数据和方法

//可以直接去获取具体的值
this.$refs.值.子组件的键
this.$refs.值.子组件的方法()