Vue
这是v2版
二组件
第五章
vue组件化 非单文件组件 es6导入、导出语法
单文件组件 单文件组件的基本语法 vue脚手架
es6文件导入出
1、导出export
export:导出
作用：用于将当前资源对外暴露，方便其他模块引用
方式1：分别暴露
//index.js中的代码
export let msg="hello,world";
export function show(){
alert(123);
}
//在html页面中引入index.js暴露的资源
<script type="module">
import * as m from './js/index.js'
//m就代表index.js文件
alert(m.msg);
m.show();
</script>
方式2：统一暴露
//index.js中的代码
let str = "CNM";
let qaq = "555";
export {
str, qaq }
//在html页面中引入index.js暴露的资源
<script type="module">
import{
str,msg} from './js/index.js'
//此时就不用.xx来输出了
console.log(qaq);
</script>
方式3：默认暴露
//index.js中的代码
export default{
name:"arjun",
show(){
console.log("默认暴露");
}
}
//在html页面中引入index.js暴露的资源
import * as m1 from './js/index.js'
m1.default.show()
组件（component）
1、定义
组件：实现应用中局部功能代码和资源的集合
组件是vue.js最强大的功能之一。组件可以扩展html元素，封装可重用的代码
vye组件是页面（html代码，css代码）进行模块化
2、模块化与组件化
在vue应用中，一个页面可能是由多个区域构成，每一个区域可以封装成一个单独的组件
每一个组件中就可以包含该区域要使用的html,js,css
然后将这些组件组合在一起就可以形成完整的页面
如果页面上某一个区域的内容要发生改变，只需要将对应的组件进行替换即可
3、组件的分类
1、非单文件组件
特点：非单文件组件：一个文件包含n个组件
所有代码写在一文件中，它的文件名不是vue结尾
缺点： 1、模板编写没有提示
2、没有构建过程，无法将es6转换成es5
3、不支持组件的css
4、真正开发中几乎不用
非单文件三步骤
创建组件：
1、template用于声明组件页面布局，它的内容写在``之间，它只能有一个根元素
2、组件中的数据模型data是一个函数，需要指定在()并且用return声明
3、组件中的其他用法：函数、计算属性，过滤器等用法都一样
声明组件：
var vm = new Vue({
el: '#app',//指定的vue容器id名称
//二、注册组件
components: {
//组件名：对应的组件（如果组件名与组件同名，可以省略只写一个）
school
}
应用组件：
<div id='app'>
<!-- 三、使用组件 -->
<school></school>
</div>
//注意：在非单文件组件中不允许直接闭合<school/>
创建组件标准写法
<body>
<div id='app'>
<!-- 三、使用组件 -->
<myschool></myschool>
</div>
<script src='js/vue.js'></script>
<script>
Vue.config.productionTip = false;
// 一、定义组件
const school = Vue.extend({
// 1、指定模板（要显示的html标签）
//模板中只能有一个根元素
template: `
<div>
<h1>学校信息</h1>
<h2>学校名称：{
{schoolName}}</h2>
<h2>学校地址：{
{address}}</h2>
</div>
`,
// 2、指定组件中的数据模型（组件中的数据是一个函数）
data() {
return {
schoolName: "东京大学",
address: "日本"
}
}
})
var vm = new Vue({
el: '#app',//指定的vue容器id名称
//二、注册组件
components: {
//组件名：对应的组件（如果组件名与组件同名，可以省略只写一个）
myschool: school
}
})
</script>
</body>
简化写法
注册组件：
const stu = {
template: `
<div>
<h1>学生信息</h1>
<h2>学生姓名：{
{name}}</h2>
<h2>学生成绩：{
{score}}</h2>
</div>
`,
// 2、指定组件中的数据模型（组件中的数据是一个函数）
data() {
return {
name: "张三",
score: "90"
}
}
}
组件的嵌套
1、先声明子组件
const stu = {
template: `
<div>
<h1>学生信息</h1>
<h2>学生姓名：{
{name}}</h2>
<h2>学生成绩：{
{score}}</h2>
</div>
`,
// 2、指定组件中的数据模型（组件中的数据是一个函数）
data() {
return {
name: "张三",
score: "90"
}
}
}
2、在父组件注册子组件
//创建父组件：school
const school = {
template: `
<div>
<h1>学校信息</h1>
<h2>学校名称：{
{schoolName}}</h2>
<h2>学校地址：{
{address}}</h2>
<hr>
<stu></stu>
</div>
`,
// 2、指定组件中的数据模型（组件中的数据是一个函数）
data() {
return {
schoolName: "东京大学",
address: "日本"
}
},
// 在父组件中注册子组件
components: {
stu
}
};
非单文件的不足之处
1、它所有的组件包含在一个页面，编写代码并不方便
2、它的模板布局temolate要写在``中，且没有提示
//实际开发很少用到，更多的是单文件组件
2、单文件组件
把一个组件全部内容汇合到一个文件中，文件名字是以.vue结尾
一个组件就是一个独立的*.vue文件，它可以包含自己的js,template，css
特点：1、它的后缀是.vue
2、它可以将一个区域的内容封装成一个vue组件，该组件包含有：js css html
3、将这些组件组合在一起，就可以形成完整的程序
在讲解单文件组件之前，我们首先要学习es6文件的导入、导出语法
vue单文件组件的使用
.vue文件就是一个单文件组件
该方法中只能包含三个部分的内容：
template:------用于指定模板，该组件的所有html代码都要包含在该区域
srcipt:--------用于指定js代码
style:---------用于指定组件的所有样式代码
安装插件–>vuter
vue脚手架：Vue CLI
脚手架创建项目
1、创建一个目录（该目录用于保存脚手架创建的项目）
2、用cmd命令进入该目录
3、执行命令使用脚手架创建项目
vue create 项目名称
vue create arjun
4、当工程创建成功后，使用命令进入项目中
cd arjun
5、通过npm启动项目
npm run serve
6、通过返回的地址即可访问vue程序
main.js---------它是vue的入口js文件，vue的实例是在此文件中创建的，要导入各种插件，也需要在改文件中导入
app.vue是一个入口组件，其他组件都要通过它进行加载
重点关注文件
index.html 默认加载的页面
assets 它可以存放一些图片或者是css样式文件
cpmponents 它包含我们自己创建的vue组件
App.vue 它是入口组件，其他的vue组件需要通过它加载
main.js 它是入口js，用于配置vue实例，以及配置各种插件
vue.config.js 它是核心js
3、vue组件
我们自己创建的vue组件要放到components目录下
组件名字：
1、驼峰命名法
2、中间-斜杠
要求：
1、名字必须采用帕斯卡命名法
2、名称要求多个单词组合而成
第六章
1、脚手架
1、修改默认配置
在vue.config.js文件中编写如下代码
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//忽略语法检查
lintOnSave:false
})
2、获取文本框内容
1、通过dom获取
alert(document.getElementById("user").value);
2、通过vue的ref语法
<input type="text" name="user" id="user" ref="msg" />
//获取
alert(this.$refs.msg.value);
3、vue插件
作用：进行vue功能的增强，实现功能的重复使用
例如：我们要在插件中配置一个过滤器，进行日期类型的转换，其他组件要转换日期类型数据时，就不需要重复创建过滤器
1、plugin插件
1、创建Plugins.js 编写如下代码
export default{
//安装插件 vue是关键字，代表vue实例
install(Vue){
//在此处，我们可以配置过滤器、自定义指令
Vue.filter("showDate",function(time){
let date = new Date(time);
//分别获得年月日
let y = date.getFullYear();
let m = (date.getMonth() + 1).toString().padStart(2, "0");
let d = date
.getDate()
.toString()
.padStart(2, "0");
return `${
y}年${
m
最低0.47元/天 解锁文章
扫一扫
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
