Vue简单入门（一）

一、Vue的基本概念！

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

    Vue 的核心库只关注视图层。

二、安装！

    开发版本：https://vuejs.org/js/vue.js

    【打开链接后Ctrl+S直接保存在本地，在HTML中的script标签上src引入即可使用】

    生产版本：https://vuejs.org/js/vue.min.js

    【此版本为压缩版】

三、启动Vue!

    new Vue({

        el: '#Box'【element css字符串选择 获取的DOM元素，作用是把HTML哪一个范围作为模板】

        data:{ 【数据对象，未来在模板中可以通过key值直接使用】

        content:data

    }

    methods:{  【定义在模板中方法或事件函数--写在这里--data中methods中的属性都会挂载实例上】

        toggleShow(){

                console.log(this);  【 指向所在的实例，this-指向根实例】

            }

        }

    })

四、指令！

    文本插值：

    {{表达式}} mustache语法

    指令的作用：

    是把数据和DOM结构结合在一起，数据改变时候，DOM会自动更新。

    不同的指令有不同的作用

    指令以v-开头，vue会解析不同的作用，写的位置是在行间

    常用的指令：

    v-bind ：在行间动态的绑定数据

    语法：v-bind:行间自动以属性名='表达式'【v-bind简写 :】

    v-for：用来根据数据循环数据个DOM元素，放在需要重复生成到的标签上

    【循环数组 => 每一项 => 每一项对应的下标】

    语法：v-for="item in 数组"

    v-for="item,index in 数组"

    v-for="a,b in 数组"

    v-for="value,key in 对象"

    item变量名随便写，用来接收循环数据的每一项

    v-if：控制一个元素渲染还是不渲染

    语法：v-if="表达式"

    【表达式的值为true，渲染元素，为false，不渲染】

    v-if

    v-else

    v-if

    v-else-if

    v-else-if

    v-else

    【表达的值频繁的切换true或false，会频繁的把DOM元素从界面中移除和加入，消耗性能】

    v-show：控制一个元素是否隐藏，不控制显示

    【display:none】

    【注：频繁的切换元素显示隐藏，建议使用v-show，只切换样式而不是移除dom；

    在页面初始加载时候，根据数据的有没有来决定是否需要渲染某个结构，建议使用v-if】

    v-on：绑定事件，作用在需要绑定事件的元素上

    语法：v-on:事件名="事件执行的函数"【v-on简写 @】

    v-on:事件名="事件执行的函数()"【v-on简写 @】

    点击的时候可以传入参数

    拿事件对象，在模板中使用$event传个函数

    事件名：click mouseover mouseout .....

五、响应式的数据绑定！

    当数据发生变化，视图自动更新【数据就是状态，状态呈现在视图中】

    命令式 ：每一步如何实现，怎么实现，都需要写出来

    声明式 ：不需要关系具体的实现，只需要告诉它要做什么事情

    虚拟DOM：

    声明式渲染：不保留给开发的具体的渲染细节，我们只需要把数据写在指定的位置就可以，Vue内部会帮助去绑定和渲染