vue

2023-08-24 23:43| 来源: 网络整理| 查看: 265

单文件组件单文件（vue）结构 // export default：默认导出 export default { // 组件交互相关的代码（数据、方法等等） }; /* 组件的样式 */

school.vue组件文件

学校名称：{{ schoolName }} 学校地址：{{ schoolAddress }} // export default：默认导出 export default { // 开发者显示的组件名，建议与文件名一致 name: "school", // 组件交互相关的代码（数据、方法等等） data() { return { schoolName: "xxx学院", schoolAddress: "南宁市西乡塘区", }; }, }; /* 组件的样式 */

App.vue文件

// 导入组件 import School from "./School"; export default { // 注册组件 components: { School, }, };

入口文件——main.js文件

// 导入App组件文件 import App from './App.vue' // 创建Vue new Vue({ //所挂载的容器 el: '#root', // 结构模板 template: ``, // 注册组件 components: { App } })

html文件

Document //先加载结构，后引入相关文件

运行之后报错

Uncaught SyntaxError: Cannot use import statement outside a module

表明浏览器不能直接支持ES6的模块化语法（import），所以就需要用到脚手架

vue脚手架

vue脚手架是vue官方提供的标准化开发工具（开发平台）

npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org 脚手架结构分析

src/main.js：是整个项目的入口文件

// 整个项目的入口文件 // 引入Vue import Vue from 'vue' // 引入App组件，他是所有组件的父组件 import App from './App.vue' // 关闭vue的生产提示 Vue.config.productionTip = false // 创建vue实例对象 /* new Vue({ // 将App组件放入容器中 render: h => h(App), }).$mount('#app') */ new Vue({ el: '#app', render: h => h(App) })

src/assets：这个文件夹是存放整个项目共享的静态资源

public/index.html:

We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.

执行 npm run serve后，就到src/main.js，再根据导入文件，找到App.vue文件，再根据导入文件找到相关的组件，执行后，汇总到App.vue里面，main.vue里面导入了App.vue，将App.vue渲染到所挂载的容器中

ctrl+点击该单词（路径）：就可去到其所在的文件位置

关于不同版本的vue

vue.js与vue.runtime.xxx.js的区别

1.1 vue.js是完整版的vue，包含：核心功能+模板解析器

1.2 vue.runtime.xxx.js是运行版的vue，只包含：核心功能；没有模板解析器

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

render是一个函数，是vue来调用的，需要返回值的。render的参数是一个函数，用来创建具体的元素 render(createElement) { //createElement('h1','hello') //返回创建的元素 return createElement('创建的标签', '标签内的内容') }, //没有用到this，所以可以使用箭头函数，就一行代码而已，直接简写 render:h => createElement('创建的标签', '标签内的内容') vue.config.js配置文件使用vue inspect > output.js（执行命令）可以查看vue交手机的默认配置使用vue.config.js（文件）可以对脚手架进行个性化定制，详情见官方文档：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE ref属性

被用来给元素或子组件注册引用因袭（id的替代者）

应用在html标签上获取的是真实DOM元素，应用在组件标签上时组件实例对象（vc）

使用方式：

打标识，如：

获取：this.$refs.title

配置项props

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

传递数据：

接收数据：

2.1只接收：props:[‘name’,‘age’]

2.2限制类型：props:{name:String,age:Number}

2.3限制类型、必要性，指定默认值：props:{name:{type:String,required:true},age:{type:Number,default:20}}

**备注：**props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告,若业务需求确实需要修改，那么建议：先复制一份内容到data中，然后再去修改data中的数据，因此在页面中显示的也是data的数据而不是props的数据

App.vue

import School from "./components/School"; export default { components: { School, }, data() { return {}; }, methods: {}, };

School.vue

{{ msg }} 学生名称：{{ name }} age }} --> 学生年龄：{{ showAge }} 学生性别：{{ sex }} age+1 export default { // 优先级：props>data,优先加载props中的数据，然后才到data name: "School", // 简单声明接收传递进来的数据 // props: ["name", "sex", "age"], // 限制性接收：接收的同时对数据进行类型限制 /* props: { name: String, age: Number, sex: String, }, */ // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制 props: { name: { // 类型为string type: String, // 这个是必要的 required: true, }, age: { type: Number, default: 20, //不传，就默认是20 }, sex: { type: String, required: true, }, }, data() { return { /* name: "张三", age: 22, sex: "男", */ msg: "学生个人信息", // 因为会优先加载props中的数据，所以可以将props中的数据赋给data中 showAge: this.age, }; }, methods: { addAge() { this.showAge++; }, }, };

【本文地址】

公司简介

联系我们