Vue学习笔记（六）

芒果炒香菜
1,166 阅读7分钟

Vue脚手架

3.1初始化脚手架

3.1.1说明

1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）.
2.最新的版本是4.x.
3.文档

3.1.2具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

image.png

  • vue2
  • vue3
  • 自定义 babel ：ES6 ===>ES5
    eslint：语法检查 第三步：启动项目
npm run serve
OR
yarn serve

你还可以用这个命令来检查其版本是否正确：

vue --version

备注：

1.如出现下载缓慢请配置npm淘宝镜像：

npm config set registry https://registry.npm.taobao.org

2.Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执行：

vue inspect > output.js

3.2 分析脚手架

3.2.1 脚手架文件结构

├── node_modules:各种包,库,插件
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件，用于配置应用的 JavaScript 转译规则，让您可以在项目中使用最新的 JavaScript 语法，而不用担心浏览器兼容性问题。
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件，用于锁定项目依赖包的版本
├── .browserslistrc 浏览器适配文件，用于配置项目需要支持的浏览器版本。在构建过程中，会根据此配置来生成兼容性代码。
├──jsconfig.json
├──vue.config Vue CLI 的配置文件，用于自定义 Vue CLI 的构建和开发配置。可以在这里添加一些自定义的构建规则或者配置代理等。

3.2.2 关于不同版本的Vue

  1. vue.js与vue.runtime.xxx.js的区别：
    1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

image.png 实践：总是使用非完整版，然后配合 vue-loader 和 vue 文件

  • 保证用户体验，用户下载的 js 文件体积更小，但只支持 h 函数.
  • 保证开发体验，开发者可以直接在 vue 里面写 HTML标签，而不写 h 函数.
  • vue-loader 可以把 vue 文件里的 HTML，转为 h 函数

3.2.3 vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置，但无法更改。文件标红最外面加上const a ={}，在output.js文件中

  2. 在根目录建立vue.config.js文件可以对脚手架进行个性化定制，详情见： VueCLI配置参考

image.png

3.2.4 使用脚手架构建出来的index.html文件

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 开启移动端的理想视口 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 配置页签图标 <%= BASE_URL %>代替./是当前目录下的图标-->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 引入第三方样式 -->
  <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
  <!-- 配置网页标题 -->
  <title>硅谷系统</title>
</head>

<body>
  <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <!-- 容器 -->
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

3.2.5 使用脚手架构建出来的main.js文件

/* 
  该文件是整个项目的入口文件
*/
//引入Vue
// import Vue from 'vue/dist/vue'
//引入完整版
import Vue from 'vue'
// 引入运行时版本
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
  关于不同版本的Vue：
	
    1.vue.js与vue.runtime.xxx.js的区别：
        (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
        (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

    2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
      render函数接收到的createElement函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
  el: '#app',
  /*
  render(createElement) {
    return createElement('h1', '你好啊')
    // return console.log(typeof createElement);
    // 打印出的createElement是函数
  },
  简写：
    render:createElement=>createElement('h1', '你好啊'),
  再简化：
    render:q=> q('h1','你好啊')
  */
  
  //render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),

  // template: `<App></App>`, 运行版本的vue， main.js不能写模板
  // components: { App },
})

3.3 ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
    1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
    2. 获取：this.$refs.xxx App.vue:
<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>

image.png

3.4 props配置项

  1. 功能：让组件接收外部传过来的数据

  2. 传递数据：<Demo name="xxx"/>

  3. 接收数据：

    1. 第一种方式（只接收）：props:['name']

    2. 第二种方式（限制类型）：props:{name:String}

    3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

    props中接收的数据会被绑定到组件实例对象vc上，且优先级高于data中的数据，data中的数据属性名字不能与接收的props属性名一致 App.vue:

<template>
  <div>
    <Student name="李四" sex="女" :age="18" />
    <!-- 在组件标签中声明传入属性 
	:即v-bind 将字符串18变为js表达式（数字18），使其可以接受加法运算
        另外，属性名不能为一些常用属性，比如：key,ref等
	-->
  </div>
</template>
<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
};
</script>

Student.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge + 1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    console.log(this);
    return {
      msg: "我是一个尚硅谷的学生",
      myAge: this.age,
       //   props的数据不允许修改，想要改动得到propo的数据放入data中
      //   props的优先级高，data中的this.age是props中接收的数据
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  //方法一:简单声明接收，放在组件实例对象vc上
  // props:['name','age','sex']

  //方法二:接收的同时对数据进行类型限制，类型如果不符合报错
  /* props:{
			name:String,
			age:Number,
			sex:String
		} */

  //方法三：接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props: {
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的，有此属性一般不需要加默认值
    },
    age: {
      type: Number,
      default: 99, //默认值，即如果不传此属性则使用默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>

程序运行截图：页面中学生年龄点击增加，控制台中data中的属性myAge改变，props中age属性不变

image.png

3.5mixin(混入)

  1. 功能：可以把多个组件共用的配置提取成一个混入对象

  2. 使用方式：

    第一步定义混合：

    {
    data(){....},
    methods:{....}
    ....
}

    第二步使用混入：

-   使用前需要import导入
-   全局混入：Vue.mixin(xxx)放在main.js文件中,所有vm,vc都能得到混入的属性
-   局部混入：mixins:['xxx']放在需要的文件中,在此文件中得到混入的属性（原属性+混入属性）
-   替换型策略有`props`、`methods`、`inject`、`computed`，就是将新的同名参数替代旧的参数
-   合并型策略是`data`, 通过`set`方法进行合并和重新赋值， 如果混入与自身（vc）有同名属性,自身属性优先级高,会覆盖掉混入属性
-   队列型策略有生命周期函数和`watch`，原理是将函数存入一个数组，然后正序遍历依次执行，自身（vc）的钩子在混合之后运行
-   叠加型有`component`、`directives`、`filters`，通过原型链进行层层的叠加
-   如果前后两个混合有同名属性，以后面的为主，

image.png

School.vue

<template>
  <div>
    <h2 @click="showName">学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
//引入一个hunhe
// import {hunhe,hunhe2} from '../mixin'

export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
      x: 666,
      // 如果混入与自身有同名属性。自身属性优先级高
    };
  },
  // mixins:[hunhe,hunhe2],
};
</script>

Student.vue

<template>
  <div>
    <h2 @click="showName">学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
  </div>
</template>

<script>
//局部混合：
// import {hunhe,hunhe2} from '../mixin'

export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  // mixins:[hunhe,hunhe2]
};
</script>

App.vue

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>
<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//关闭Vue的生产提示
Vue.config.productionTip = false

// 全局混合，给所有的vm和vc得到混合
import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

//创建vm
new Vue({
	el: '#app',
	render: h => h(App)
})

mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

3.6 插件

  1. 功能：用于增强Vue

  2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

  3. 定义插件：

    对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

  4. 使用插件：Vue.use()

image.png

plugins.js

export default {
	install(Vue, x, y, z) {
		// 接收参数
		console.log(x, y, z)
		//全局过滤器，从第一位开始，找到前四个
		Vue.filter('mySlice', function (value) {
			return value.slice(0, 4)
		})

		//定义全局指令,自动获取焦点
		Vue.directive('fbind', {
			//指令与元素成功绑定时（一上来）
			bind(element, binding) {
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element, binding) {
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element, binding) {
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x: 100,
					y: 200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = () => { alert('你好啊') }
	}
}

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//引入插件
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins, 1, 2, 3)
// 传入参数

//创建vm
new Vue({
	el: '#app',
	render: h => h(App)
})

School.vue

<template>
	<div>
		<h2>学校名称：{{name | mySlice}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="test">点我测试一个hello方法</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷atguigu',
				address:'北京',
			}
		},
		methods: {
			test(){
				this.hello()
			}
		},
	}
</script>

Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<input type="text" v-fbind:value="name">
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
	}
</script>

App.vue

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

3.7 scoped样式

如果不同组件起了相同的样式名，会造成样式冲突，在App.vue中后import导入的组件样式会覆盖前面一个组件的同名样式，所以用scoped解决。最好不要再App.vue的style中加入scoped，因为他是汇总组件，写在其中的样式为公共样式。

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：
<style lang="less" scoped> 
//lang =''规定了用什么来写style，不写默认为css
	.demo{
		background-color: pink;
	}
</style>
avatar
文章
阅读
粉丝