vue使用总结

一、vue中能提供数据的有：

1、data属性，如：data:{message: ''}中的message；

2、props中的元素，如props: ['title']中的title；

3、v-for中遍历出的元素，如v-for="todo in todos"中的todo；

注意：data和props中的数据在methods和computed中被引用时前面必须添加“this.”,在标签中不需要；同样的，在标签中使用methods和computed中的方法时也不需要添加"this.";

4、插槽slot：

二、根实例向子组件传递数据的方式：

1、props：

2、slot：

三、子组件向根实例传递数据的方式：

子组件的通过$emit('event_name', component_value)传递；

根实例中通过一个方法接收：function(data){......}；

四、vue的methods和computed中的方法在{{}}和指令中其后面不添加“()”表示引用；

五、v-for可以循环组件；

六、"{{}}"和"v-html"输出data数据的相同和区别：

相同：data数据属性直接写入即可（htm标签属性如果想绑定data数据需在标签的属性前添加“v-bind”）;

区别：如果data数据包含html标签，"v-html"可以将html标签解析，"{{}}"形式不行；

七、data数据的输出位置 ：

1、标签中用“{{}}”输出；

2、标签属性中用“v-bind:”输出；

3、标签中直接用“v-html”输出；

4、标签中用“v-for”循环输出；

八、methods、computed、watch：

methods：一般的方法；

computed：对于任何复杂逻辑，你都应当使用计算属性；

watch：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的；

九、v-for 与 v-if：

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。

十：组件:

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

$emit：向父级组件触发一个事件；

通过事件向父级组件发送消息的两种方式：

十一、v-bind 的基本用途是动态更新 HTML 元素上的属性；

十二、函数内的this指向的是当前Vue实例本身；

十三、语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。Vue.js的v-bind和v-on指令都提供了语法糖 ，也可以说是缩写，比如v-bind，可以省略v-bind,直接写一个冒号“:”，v-on可以直接用“@”来缩写。使用语法糖可以简化代码的书写。