Vue.js 学习记录----基础篇

本文链接：https://blog.csdn.net/ata_123/article/details/79543252

刚开始学习vue，看的梁灝编著的vue.js 实战，这是我看的基础篇的总结，方便以后自己查找

首先是视图模型变成了，mvvc，把原先的视图模型，view层变为viewModel层和view层主要的目的是：数据和视图元素分开

<html>
        <head>
            <meta charset="utf-8">
            <title>Vue 示例</title>
        </head>
                
        <body>
                <div id="app">
                    <child-component>
                        <h2 slot="header">标题</h2>
                        <p>zhengwenneirong</p>
                        <div slot="footer">dibuixinxi</div>
                    </child-component>
                </div>
                <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
                <script>
                    Vue.component('child-component',{
                        template:'\
                        <div class="container">\
                            <div class="header">\
                               <slot name="header"></slot>\
                            </div>\
                            <div class="main">\
                               <slot></slot>\
                            </div>\
                            <div class="footer">\
                               <slot name="footer"></slot>\
                            </div>\
                        </div> '
                    })
                    var app = new Vue({
                         el:'#app',                                    
                    })                 
                </script>
        </body>
</html>

这个例子来源于书本，vue 首先建立vue实例， new Vue

el 用于指定一个页面中已存在的DOM元素来挂载Vue实例，

Vue 实例的data选项，可以声明应用内需要双向绑定的数据。

Vue的生命周期：

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用

mounted el挂载到实例后调用，一般我们的第一个逻辑会在这里开始

beforeDestory 实例销毁前调用

{{}} 双大括号是最基本的文本插值方法，它会自动的将我们双向绑定的数据显示出来

v-html 想输出的是html而不是将数据解释后的纯文本，可以使用这个指令。

v-pre 跳过这个元素和它的子元素的编译过程

vue 只支持单个表达式，不支持语句和控制流

{{data | formatData}} 过滤器（filter）

v-bind 的基本用途是动态更新HTML元素上的属性 class、style 语法糖是 :

v-on 绑定事件监听器语法糖是 @

计算属性 computed 和 method 的区别在于是否依赖缓存，computed 只有当他所依赖的数据发生变化的时候，才会重新取值，但是method是只要被重新渲染，就会被执行。

条件渲染指令： v-if、v-else、v-else-if

v-if 和 v-show的区别，二者具有类似的功能。不够v-if 才是真正的条件渲染，若当表达式的初始值为false，则一开始元素、组件并不会渲染，只有当条件第一次变为真时，才开始编译。v-show 无论条件真与否，都会被编译。相比之下，v-if更适合条件不经常变得场景，应为它开销比较大，v-show适用于频繁切换条件。

列表渲染指令：v-for =“book in books” 当需将一个数组遍历或枚举一个对象循环显示时

v-modle 用于表单元素上双向绑定数据

v-bind 绑定一个布尔类型的值，为真是选中，为否是不选，而 v-model 和value组合使用来实现互斥选择的结果。

Vue.components 组件（' ',{ }）在组件中，data必须是函数。在组件中添加 template 就可以显示组件内容。

在组件中通过props 来声明需要从父级接收的数据，数据传递是单向的，从父级向子组件传输。

$emit 用于向上级派发事件

props 传递数据、event 触发事件、slot 内容分发构成了Vue 组件的3个API来源，再复杂的组件也是由这三部分组成。