vue.js基础知识整理

项目目录简介

一.v-on和v-bind

（1）缩写：

v-on：click=“方法”     =>    @click="方法"

v-bind：title=“”  =>  :titlle=""

解析：

v-on提供了一些修改器操作，例如：v-on：click.stop是阻止事件冒泡的，常用的有

@click

@keydown

@keydown.enter

v-bind:  主要是一些属性的绑定

二.子组件向外触发的自定义事件

1.父组件中引用子组件

（1）把子组件import（我理解为node里面的require）

           eg：import comA from “子组件路径”

（2）父组件的js

export default{

components：{

comA：comA    （注意在ES6写法中，如果等号两边的参数一样可以直接写comA）

}

methods{

//parmformA接收的参数是子组件传递的参数

oncomaMyevent （parmformA）{

        console.log("oncomaMyevent" + parmformA)

}

}

}

父组件的body

                           

2.子组件,如图

三.表单的数据绑定

四.计算属性

计算属性很强大在vue中，体现在：

可以根据其他属性来动态的更新计算属性，在一些场景下我们不使用一些类似事件监听的复杂功能，直接使用计算属性进行替代。

如果不用计算属性同样可以使用方法的形式。两者有何区别呢:

1.计算属性更新这里只会根据另一个值（这里指myValue）来更新，如果myValue不更新，那么myValWithoutNum也不会更新

2.使用方法调用时，不管是什么时候调用此方法都会进行处理，比如说Date.now(),计算属性里面如果没有引用变量，这个值就是页面渲染的初始值，不会变动

五.属性监听watch

六.父子组件间的通信

在 Vue.js 中，父子组件的关系可以总结为props down, events up。

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

1.静态组件通信

2.动态组件通信，具体方法如下

（1）通过属性向内传递props。父组件是通过props属性给子组件通信的来看下代码

父组件