Vue 入门学习小结

1、 新建vue工程和启动流程：

$ vue init webpack test

$ cd test

$ npm install

$ npm run dev

2、 启动Vue工程时的文件执行顺序：index.html -> main.js -> App.vue

3、 src文件的主要组成与用途：

● assets文件夹：存放待加载的图片；

● components文件夹：存放vue子组件；

● App.vue文件:根组件，主要包含<template>、<script>、<style>三部分：

★<template>：HTML模板，有且只能有一个根标签

★<script>：行为、逻辑处理模块，比如JavaScript语句

★<style>：样式描述、页面布局，比如CSS

● main.js文件；入口文件，主要作用是初始化vue实例，并引入所需要的插件

4、不同组件之间的关联方式

1）main.js文件中全局注册，在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

import Users from './components/Users'

Vue.component('users', Users);

2）App.vue文件中局部注册，局部注册的组件在其子组件中不可用。

import Users from './components/Users'

components: {

'app-users': Users, //'标签名'：组件名

}

5、数据传递

（1）属性传值props：调用语句中用v-bing绑定，目标组件vue中关联

props:{ -> 官方推荐方式

“name”:{

type:Array, //值类型：Array、String、Number、Boolean

required：true

}

}

props：[“name”],

（2）传引用：所有和这个引用有关的其他组件Vue中的数据都会被操作

（3）传值：只对当前组件Vue中的数据产生操作。

（4）事件传值（子to父）：使用事件实现子组件向父组件传值，会改变其他兄弟组件从父组件中引用的相应的内容。

子组件中：

changetitle: function() {

this.$emit('titlechanged', '子组件向父组件传值'); //注册'titleChanged'事件

}

父组件中：

（1） 调用语句中添加 @titlechanged='updateTitle($event)'

（2） 实现updateTitle方法

updateTitle(title) {

this.title = title;

}

6、Vue实例生命周期与钩子函数

1）beforeCreate() //组件实例化之前执行的函数

2）created() //组件实例化完毕，但页面还未显示

3）beforeMount() //组件挂载前，页面仍未显示，但虚拟DOM已经配置

4）mounted() //组件挂载后，此方法执行后，页面显示

5）beforeUpdate() //组件更新前，页面仍未更新，但虚拟DOM已经配置

6）updated() //组件跟新，此方法执行后，页面显示

7）beforeDestroy() //组件销毁前

8）destroyed() //组件销毁

未完待续。。。。。。

————————————————————

BY：HW-WP