1.分析结构
<!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">
<!-- 配置页签图标 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 配置网页的标题 package.json name:'vue_test'当作网页的标题 -->
<title><%= htmlWebpackPlugin.options.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>
2.Vue脚手架的默认配置
3.自定义配置
4.脚手架文件结构
5. 关于不同版本的vue
6.vue.config.js配置文件
7.属性配置
<template>
<div class="school">
<h1>{{msg}}</h1>
<button @click="myAge++">年龄加1</button>
<h2>展示学生的名称:{{ name }}</h2>
<h2>展示学生的性别:{{ sex }}</h2>
<h2>展示学生的年龄:{{ myAge+1 }}</h2>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
name: "MyStudnet",
data() {
//这里存放数据
return {
msg:'我是一个人',
myAge:this.age,
};
},
// props:['name','age','sex'] //简单接收
//接受的同时对数据进行类型限制
// props:{
// name:String,
// age:Number,
// sex:String
// }
//接受的同时对数据进行类型限制,默认值的指定 和 必要性的限制
props:{
name:{
type:String,//name类型是字符串
required:true,//名字是必传的
},
sex:{
type:String,//性别类型是字符串
// required:true,//性别是必传的
default:'男'
},
age:{
type:Number,//年龄类型是 数字
required:true,//年龄是必传的
}
}
};
</script>
<style>
.school{
background-color: gray;
}
</style>8.混合
export const mixin = {//分别暴露
methods: {
showName() {
alert(this.name)
}
},
mounted() {
console.log('混合调用的mounted');
}
}
// export default mixin //默认暴露
export const mixin1 = {//分别暴露
methods: {
showName() {
alert(this.name)
}
},
mounted() {
console.log('混合调用的mounted');
}
}9.插件
10.scoped 样式作用域
原理:
就是加了个属性选择器
<template>
<div class="demo">
<h2>展示学生的名称:{{ name }}</h2>
<h2>展示学生的性别:{{ sex }}</h2>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//引入一个混合
export default {
name: "MyStudnet",
data() {
//这里存放数据
return {
name: "我是一个人",
sex: 12,
};
}
};
//npm view webpack versions 查看 webpack版本
//npm view less-loader versions 查看 less-loader版本
//npm i less-loader@7 指定版本
</script>
<style scoped>
/* 这个scoped 是把自己的作用域 隔绝了让别人看不到你这个 demo 也不看别人的 就近原则 但是自己没有 别人有的 还是会拿过来 */
.demo{
background-color: green;
}
</style>
![[WUSTCTF2020]朴实无华1](https://i-blog.csdnimg.cn/direct/c810468159d647ed8d6cf9dfffd8f523.png)
