vue——单文件组件、脚手架、配置项、ref、props

最新推荐文章于 2024-01-17 13:08:31 发布

h_jQuery

最新推荐文章于 2024-01-17 13:08:31 发布

阅读量303

点赞数 2

分类专栏： javascript es6 Vue 文章标签： vue html js 脚手架

本文链接：https://blog.csdn.net/h_jQuery/article/details/119895681

版权

javascript 同时被 3 个专栏收录

124 篇文章 0 订阅

订阅专栏

Vue

87 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

单文件组件

单文件（vue）结构

<template>
  <div>
    <!-- 组件的结构 -->
  </div>
</template>

<script>
  // export default：默认导出
export default {
  // 组件交互相关的代码（数据、方法等等）
};
</script>

<style>
/* 组件的样式 */
</style>

school.vue组件文件

<template>
  <div>
    <h2>学校名称：{{ schoolName }}</h2>
    <h3>学校地址：{{ schoolAddress }}</h3>
  </div>
</template>

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

<style>
/* 组件的样式 */
</style>

App.vue文件

<template>
  <div>
    <!-- 使用组件 -->
    <School />
  </div>
</template>

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

<style>
</style>

入口文件——main.js文件

// 导入App组件文件
import App from './App.vue'

// 创建Vue
new Vue({
    //所挂载的容器
    el: '#root',
    // 结构模板
    template: `<App/>`,
    // 注册组件
    components: {
        App
    }
})

html文件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 容器 -->
    <div id="root">
    </div>
//先加载结构，后引入相关文件
    <!-- 引入vue文件 -->
    <script src="/js/vue.js"></script>
    <!-- 入口文件 -->
    <script src="./main.js"></script>
</body>

</html>

运行之后报错

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:

<!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 %>：代表的是public路径，防止打包之后ico出现各种问题 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <!-- noscript：如果浏览器不支持js，就会出现noscript标签中的内容，如果支持就不会显示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>

执行 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

<template>
  <div>
    <!-- age="22"：age的值是字符串类型，不是number -->
    <!-- :age：动态绑定，要运行引号里面的表达式 -->
    <School name="张三" :age="22" sex="男" />
    <hr />
    <School name="李四" :age="22" sex="女" />
    <hr />
    <School name="王五" :age="22" sex="男" />
  </div>
</template>

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

<style>
</style>

School.vue

<template>
  <div>
    <h2>{{ msg }}</h2>
    <p>学生名称：{{ name }}</p>
    <!-- <p>学生年龄：{{ age }}</p> -->
    <p>学生年龄：{{ showAge }}</p>

    <p>学生性别：{{ sex }}</p>
    <button @click="addAge">age+1</button>
  </div>
</template>

<script>
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++;
    },
  },
};
</script>

<style>
</style>