day5--vue脚手架

单文件组件

一个文件中只包含一个组件。

在前面的非单文件组件中，有些缺点非常明显：

• 全局定义 强制要求每个component中的命名不得重复
• 字符串模板 缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的``
• 不支持CSS 意味着当HTML和JavaScript组件化时，css明显被遗漏
• 没有构建步骤 限制只能使用HTML和ES5 JavaScript，而不能预处理

综合以上缺点，引出文件扩展名为.vue的单文件组件来提供解决方法

hello.vue 简单实例：

<template>
        <div>
            <p>{{msg}}</p>
        </div>

</template>

<script>
    //交互
    //默认导出
export default {
    data() {
        return {
            msg:'hello world!'
        }
    },
}
</script>

<style>
    //样式
    p{
        font-size: 2em;
        text-align: center;
    }
</style>

实例中可以看出获得了：

完整语法高亮，CommonJS模块，组件作用域的css

脚手架

介绍

​ 1.vue脚手架是vue官方提供的标准化开发工具(开发平台)

​ 2.目前最新的版本是4.x

​ 3.文档：https://cli.vuejs.org/zh/

使用步骤

​ 全局安装@vue/cli

$npm install -g @vue/cli

​ 切换到你要创建项目的目录下，然后使用命令创建项目

$vue create 自定义项目名称

​ 启动项目（首先要进入打开你创建的项目）

$npm run serve

脚手架结构

node_modules 存放第三方依赖包

public

​ favicon.ico :页签图标

​ index.html :主页面

src

​ assets:存放静态资源

​ logo.png

​ component:存放组件

​ HelloWorld.vue

​ App.vue :汇总所有组件

​ main.js:入口文件

.gitignore:git版本控制 忽略配置

babel.config.js :babel的配置文件

package.json :应用包配置文件

README.md 应用描述文件

Package-lock.json 包版本控制文件

​

关于不同版本的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函数去指定具体内容

render函数

(createElement: () => VNode) => VNode

字符串模板的代替方案，该渲染函数接收一个createElement方法作为第一个参数用来创建VNode

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

ref属性

ref是接收string字符串的

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件

1.被用来给元素或子组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象

3.使用方式：

打标识

获取：this.$refs.xxx

<template>
<!-- 结构 -->
    <div class="school">
        <h2>学校名称{{name}}</h2>
        <!-- ref是id的替代值 -->
        <h2 id="add" ref="add">学校地址{{address}}</h2>
        <button @click="getElement">点击获取元素</button>

    </div>
</template>

<script>
// 交互
// 默认导出
export default {
    data(){
        return{
            name:'briup',
            address:"昆山"
        }
    },
    methods: {
        getElement(){
            // let d=document.getElementById('add');
            // console.log(d);
            // this是指向vc对象
            console.log(this);
            let d=this.$refs.add
            console.log(d);
        }
    },
}
</script>

<style scoped>
    /* 样式 */
    .school{
        background-color:aqua;
    }
</style>

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

props属性

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

​ 1）传递数据

​ 2）接收数据

​ 只接收

​ props:[‘name’,‘age’]

​ 接收并且限制类型

props:{
	name:{
		type:String
	}
}

​ 限制类型、限制必要性、指定默认值

props:{
	name:{
		type:String,
		require:true,	
	}
	age:{
	type:Number,
	defualt:18
	}
}

• • type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
  • default：any
    为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
  • required：Boolean
    定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
  • validator：Function
    自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

  案例：

<template>
  <!-- 结构 -->
  <div class="school">
    <h2>学生姓名{{ name }}</h2>
    <h2>家庭住址{{ age + 1 }}</h2>
  </div>
</template>

<script>
// 交互
// 默认导出
export default {
  data() {
    return {};
  },
  methods: {},
  //   配置项props，用来接收使用者传递的参数
  // props:['name','age']
  props: {
    name: {
      // 类型
      type: String,
      // 必要性
      required: true,
    },
    age: {
      type: Number,
      // 默认值
      default: 18,
        //自定义验证函数
       validator: function (value) {
        return value >= 0
      }
    },
  },
};
</script>

<style scoped>
/* 样式 */
.school {
  background-color: blue;
}
</style>

注意：props是只读的，如果你进行了修改，就会发出警告