第二章：Vue脚手架

目录

一、安装脚手架

二、组件的引入

1.子组件中：

2.父组件中： 

三、Ref属性

1.ref用于获取dom元素：

四、props属性

1.props用于父向子传值： props值是不能修改的

2.props子向父传值：传递一个函数

五、分别导出与默认导出

1.分别导出  export：

2.默认导出 export default ：

六、mixin混入：将相同的配置抽离出来：与data平级mixins对象:

1.  在src下新建mixin.js文件，内容为下面

2.  在需要相同方法的组件中导入并使用:

3.  *如果需要全局导入（main.js）就可挂载到全局可直接使用

七、插件：功能用于增强Vue

1.  在src目录下新建一个plugins.js文件：

2.在mian.js中使用它：

3.使用：

八、scoped样式

1.解决样式冲突的问题：scoped（局部冲突）

2.解决样式编写问题语言：lang

 九、浏览器本地存储

1.方法

十、自定义事件 $emit 给组件绑定自定义事件   $emit发送   $on 接收

 1.父亲给孩子传值：使用自定义事件的

 1.父亲给孩子传值：使用 ref 的

十一、给组件解绑自定义事件（销毁此组件  this.$destory()）

1.解绑一个自定义事件：

2.解绑多个自定义事件 :

3.想给组件使用原生事件：.native 

十二、全局事件总线 $bus

 1.在Vue实例上面声明事件总线：main.js

2.在需要接收值得组件上面使用this.$bus.on("事件名",回调函数)：

3.在发送数据得组件上使用this.$bus.$emit("事件名",传得值)：

十三、消息订阅与发布 pubsub（不常用）

1.安装pubsub的第三方包：

2.父组件订阅消息，并且销毁前取消订阅：

3.子组件发送消息：

十四、$nextTick

1.作用在下一次DOM更新结束后执行其指定的回调：

 十五、动画效果

十六、引用第三方的库解决动画效果 animate.css库

1.安装animate.css

2.使用：文档地址：  https://animate.style/

---

一、安装脚手架

1、vue create  xxx

2、npm run serve

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

二、组件的引入

1.子组件中：

与data平级书写 name: 'School',

2.父组件中： 

（1）导入   import School from './components/School'

（2）在data同级申明components对象注册组件    components:{School},

三、Ref属性

1.ref用于获取dom元素：

来获取我啊

          ref="xxx"

console.log(this.$refs.title)                   this.$refs.xxx

四、props属性

1.props用于父向子传值： props值是不能修改的

父亲： 

儿子：与data平级，props

(1)  简单接收   props:["name","age","sex"]

(2)  接收的同时对数据进行类型限制 props:{ name:String, age:Number,sex:String}

(3)  接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

props:{

        name:{type:String, //name的类型是字符串required:true, //name是必要的},

        age:{type:Number,default:99 //默认值},

        sex:{type:String,required:true}}

2.props子向父传值：传递一个函数

父亲的代码：
methods: {
    getChildData (name) {
      console.log("父亲收到儿子传来的值是" + name)
    }
}
-----------------------------------------------------------
儿子的代码 props:["getChildData"]
点我给父亲传值

五、分别导出与默认导出

1.分别导出  export：

export cons a = 10  // 引入时候需要使用{}花括号   import {a} '../'xxx'

2.默认导出 export default ：

export default cons a = 10  // 引入时候不需要使用{}花括号   import a '../'xxx'

六、mixin混入：将相同的配置抽离出来：与data平级mixins对象:

1.  在src下新建mixin.js文件，内容为下面

export const mixin = {
  methods: {
    showName () {
      alert(this.name)
    }
  },
  data () {
    return {
      name: 'jack',
    }
  },
}

2.  在需要相同方法的组件中导入并使用:

3.  *如果需要全局导入（main.js）就可挂载到全局可直接使用

import {mixin} from './mixin'
Vue.mixin(mixin)

七、插件：功能用于增强Vue

1.  在src目录下新建一个plugins.js文件：

export default {  //install方法可以接收Vue还可以接受自己的参数
  install (Vue,options) {
    // 可以挂载许多方法
    Vue.prototype.hello = () => { //在Vue的全局配置hello方法
      alert('hello')
    }
  }
}

2.在mian.js中使用它：

import plugin from './plugins'
Vue.use(plugin)

3.使用：

 

{{ name }}

八、scoped样式

1.解决样式冲突的问题：scoped（局部冲突）

十六、引用第三方的库解决动画效果 animate.css库

1.安装animate.css

npm install animate.css   

2.使用：文档地址：  https://animate.style/