Vue学习第四天

安装vue-cli

vue-cli是vue.js开发标准工具。他简化了程序员使用webpack配置项目的过程。

npm i -g @vue/cli（-g指的是全局安装）

 安装好之后可以通过vue -V，查看安装版本，出现类似下图则成功。

 

 安装好之后创建一个vue项目，首先在我们需要创建项目的文件目录下输入cmd，接着输入命令行

vue create demo-first

等创建完成之后我们需要运行项目，cd到对应文件目录下，运行npm run server。

vue项目中文件的构成

node_modules:下载的第三方库文件

public：存放两个文件，一个是网站小图标，开发的页面

src：源代码文件

一些配置文件

Vue项目运行流程

通过main.js把App.vue渲染到index.html指定的结构中。

①App.vue用在编写带渲染的模板结构

②index.html需要预留一个el待渲染的区域，因此区域有占位符的作用。

③main.js把App.vue渲染到index.html所预留的区域中。（可以通过导入vue文件并指定渲染的位置替换HTML文件中的区域。）

new Vue({
  render: h => h(App),
}).$mount('#app')


new Vue({
  el: "#app",
  render: h=>h(App)
})

render函数中，渲染的是哪个vue组件，那个这个组件就叫做’跟组件‘。

组件化开发

根据封装思想，把页面上可复用的UI结构封装为组件，从而方便项目的开发和维护。

vue组件由三部分构成

①template  --组件的模板结构（必需的）

②style --组件的样式

③组件的JavaScript行为

使用组件的三个步骤

①导入组件

②注册组件

③将组件当作标签使用

一丶局部子组件注册

在组件内部注册的子组件只能在该组件中使用，因此components注册的私有子组件。 

<template>
  <div>
    woshinide
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/HelloWorld.vue'

export default {
  data(){
    return {}
  },
  components: {
    'hello': Hello
  }
}
</script>

<style>
  
</style>

二丶全局注册

在main.js注册

import Vue from 'vue'

import App from './App.vue'

// 导入需要注册的组件

import Hello from './components/HelloWorld'

Vue.config.productionTip = false

// 第一个参数组件注册的名字,建议首字母大写  第二个参数需要注册的组件

Vue.component("Hello", Hello)

new Vue({

  render: h => h(App),

}).$mount('#app')

在methods的函数中，如果函数只有一行表达式，可以直接写在行内中，不用在methods中定义。

props自定义属性

自定义组件的自定义属性。在封装通用组件的时候，合理利用提高代码复用性。

1. 封装者自定义属性名，使用者自定义属性值。props:[ a, b, c]

2.

:value="9"  --使用属性绑定指令，后面是js表达式，因此 ‘9’ 是一个数值

value=“9”  --‘9’是一个普通的字符串

3. props是只读的，如果想要改变里面的内容，可以通过data中的数据实现。

4. 默认值default：如果使用者没有给props中自定义属性初始值，那么它的值就是undfined，所以我们需要给他一个默认值，不给他传值的时候它使用的就是默认值。数组无法满足我们的这种需求，我们需要把props改成一个对象。

props: {
  自定义属性A: {配置选项},
  自定义属性B: {配置选项},
  自定义属性C: {配置选项},
}
props:{
  init: {
    default:0
  }
}

 5. props类型type

props:{
  init: {
// 如果外界使用count组建的时候，没有初始值，则给他初始值0
    default:0,
// 进行值校验，如果给他初始值类型不对则报错  
    type:Number,
  }
}

 6. props的required属性，如果requierd值为true，使用改组件必须给改自定义属性一个初始值。

props:{
  init: {
// 如果外界使用count组建的时候，没有初始值，则给他初始值0
    default:0,
// 如果给他初始值类型不对则报错  ，进行值校验
 type:Number,
// 必填项校验(使用该组件的时候必须给改自定义属性初始值)
required：true
  }
}