vue快速入门手册

搭建Vue

1. 安装脚手架工具npm install -g @vue/cli
2. 创建项目vue create hello-world,hello-world为项目名称Babel、Vuex、Router,需要把着三个最基本选中
3. Vue技术栈:Vuex、Router

基本用法

1. 关键字{{}}，<p>{{message}}</p>
2. 挂载点,把vue实例放在这个为id为#app的节点里

 new Vue({
     el: "#app",
 }

3.指令

v-html:更新元素的 innerHTML

v-show:根据条件展示元素的选项

v-bind:缩写：简单的说就是动态的绑定

v-for：

   <div v-for="item in arr">
            {{item}}
	</div>

     new Vue({
            el:"#root",
            data(){
                return{
                    ok:true,
                    arr:["html","css","js"]
                }
            }

        });

v-on: 缩写 @ ，修饰符

<div @click="handleClick（）">
      <!-- 可以传参数 -->
            点击
</div>
 <!--@click.stop="handleClick"  -->
<!-- 阻止事件传播 -->
<!--@click.prevent="handleClick"  -->
<!-- 阻止事件默认行为 -->

v-model：随表单控件类型不同而不同。表单标签需绑定一个model，这里的model数据是双向的当a发生变化时，input框里的值会随着变化。

<input type="text" v-model="a"/>

data(){
    return {
         a:"hello"
    }
}

v-if:ok为false，只会加载222

<div v-if="ok">111</div>
<div v-else>222</div>

绑定一个style

<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>

组件的注册或创建

1. 全局注册Vue.component("counter", counter);
2. 局部注册：通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用，在components里注册就可以了。

const helloWorld = {
	template: "<div>hello world!!!</div>"
}
new Vue({
	el: "#app",
	components: {
		helloWorld
	}
})

3.自动注册

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

// 文件引入过后自动运行，组件在这里已经全局注册，名称在这个文件里也已经取好了

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
    // 其组件目录的相对路径
    '../components/',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /[\w-]+\.vue$/
)

requireComponent.keys().forEach((fileName) => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    // 获取组件的 PascalCase 命名
    const componentName = upperFirst(
        camelCase(
            fileName
                // Remove the "./_" from the beginning
                .replace(/^\.\/_/, '')
                // Remove the file extension from the end
                .replace(/\.\w+$/, '')
        )
    )

    // 全局注册组件
    Vue.component(componentName, componentConfig.default || componentConfig)
    // 注册的所有组件名称
    console.log(componentName);

})

在main.js中引入这个文件就可以了完成所有的组件注册,控制台打印组件名

之后再直接使用即可

<template>
    <IndexFunctionCourseTabutation />
</template>

data

1. data是一个函数，这个组件共享的状态，类似于react的state

  data () {
    return { 
        a: 1，
        b:"hello"
    }
  }

//可以通过app.a来访问，在template里可以直接使用

Props

1. 组件实例的作用域时孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用Props把数据传给子组件。
2. props是夫组件用来传递数据的一个自定义属性。子组件需要显示的用props选项声明props。

 <div id = "app">
        <container></container>
 </div>

  let container = {
            template: `
            <div>
                <span>这是容器组件</span>
                <child :msg="message" />
            </div>
            `,
            data() {
                return {
                    message: "hello!!!"
                }
            }
        }
        let child = {
            template: `
                <div>
                <span>这是子组件</span>
                {{ msg }}
                </div>
                `,
           // props: ["msg"],//两总方式
            props: {
                msg: {
                    type: Array,
                    default: () => []
                },
                // completedTodo:
            },
        }
        Vue.component("container", container);
        Vue.component("child", child);

        new Vue({
            el: "#app"
        })

methods

1. 事件处理函数，所有的方法都写在methods里，页面刷新，不管状态有没有变化，都会触发。如绑定的点击事处理函数就写在这里。如绑定点击事件@click='handleClick'，handleClick就在methods里取。

  methods: {
                handleClick(item) {
                    // item.completed = !item.completed;
                    // 通过原型里的$emit继承的completedTodo
                    this.$emit("completedTodo", item);
                },

            }

computed

1. 计算属性,衍生出来的属性，只有所依赖的值发生变化的时候才会触发computed，计算状态里的数据,get方法，取到具体的这个数据属性，当todos的长度发生变化，就会触发get方法。set方法去修改这个属性，接收一个参数，修改的值。

computed：{
    total:{//总条数
  		get(){
   			return this.todos.length;
		},
    	set(total){
        	this.total = total;
		}
	}
}

watch

1. 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

 watch: {
    eachPage() {
      //监听eachPage，发生变化就会触发
      // console.log("eachPage");
      this.getStudentsByPageAsync();
    },
    currentPage() {
      //监听eachPage，发生变化就会触发
      this.getStudentsByPageAsync();
      // console.log(this.currentPage);
    }
  }

2.深度监听：watch 的一个特点是，最初绑定的时候是不会执行的,immediate为true时会去执行handler里的方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。还有一个deep属性,它会去监听obj对象里的每一个属性。如：监听obj.a或obj.b

watch: {
  obj: {
    handler() {
     	//处理逻辑
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true，
    deep:true
  }
}

vue生命周期

总共分为8个阶段创建前后，载入前后、更新前后、销毁前后

创建前后：在beforeCreate 阶段，vue实例的挂在元素$el和数据对象data都为undefined，还未初始化。在ceated阶段，vue实例的数据对象data有了，$el还没有。

载入前后：在berforMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟dom节点，data.message还未替换。

在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前后：当data变化时会触发beforeUpdate和updated方法。

销毁前后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。