Vue 基础部分

Vue是一套用于构建用户界面的渐进式框架

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

//基本模板语法如下

  <div id='app'>
        <div>{{message}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: "hello world"
            },
        })
    </script>

再次之前需要引入vue的核心库

差值表达式：{{}} 

1、数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

2、可以用来计算一些简单的计算数字

基本指令

v-html="html" :显示内容，可识别标签

v-text = “text” 显示文本类容  不能显示标签

v-once <!-- v-once 只渲染一次 可以用于优化更新功能     -->

v-cloak 解决渲染内容闪烁问题

v-for="(item,index) in list" 遍历模型数据中的对象

v-model="数据"   双向数据绑定

分支循环结构  v-if="num>100"  v-if-else   或者   v-if=""  v-else-if=""

v-show 判断真假    如果为真则：display:block ， 反之则display ：none

事件绑定   v-on:click   简写 @:click

属性绑定    v-bind:class="{index:obj}" 简写 ： 

:class="{index:obj}" :class="[index]"数组形式

事件修饰符

 <!-- 事件修饰符 .stop 阻止冒泡事件  -->

  <!-- 事件修饰符  阻止默认事件 .pervent-->