HTML——Vue框架

 一、构架图：

• 二、Vue是一个用于构建用户界面的渐进式框架，目前企业中流行的版本有两个

  • Vue2——稳定1.最新长期稳定版 2.生态系统，文档系统完备3.过往案例项目支撑
  • Vue3——趋势1 性能提升 =>1.2~2倍2 内核体积更小 =>10kb3 TS支持度更高4 组合式API，封装复用逻辑

• 三、关键点：

  • 1. el ：element的缩写, 表示的是当前vue要管理的页面元素是哪些, app必须挂载到双标签上, 而且是body和html除外
  • 2. data ：data表示数据,就是当前页面要用到的所有变量的声明区域, 支持JS中所有的数据类型,常用键值对 数组 对象

  • 四、使用过程：
    模板：

    const app = new Vue({
    el:"#app",
    data: {
    //key：value格式的属性
    },
    methods:{
    //页面需要调用的方法
    },
    created() {
    //当页面加载时，自动调用
    }
    })

  • • 1.引入vue.js文件

      

    • 2.定义一个vue对象

      

    • 3.编写html页面，将页面和vue中的数据模型绑定

      

• 五、特殊方法：

  • 页面赋值：v-html用于将指定变量的值渲染到页面上，如果变量值中有html语法，会进行解析

    

    
    v-html：<span v-html="key"></span>

  • 双向绑定：v-model是双向绑定，用户在页面输入的内容 和 vue对象 中的变量 相互影响，目前v-model的可使用元素有：input、select、textarea

    

    
    v-model： <input type="text" v-model="key" />

  • 属性绑定：:属性="key"对于HTML标签属性，如果想要动态传值，不能使用 {{ }} ，而应该使用专门的属性绑定语法

    

    
    <img :src="key"> , <a :href="key">点击一下</a>
    • 标准语法：v-bind:属性名="Vue中的变量"
    • 简写语法： :属性名="Vue中的变量"

  • 列表遍历：v-for="(临时变量,索引) in 数组"。注意:遍历哪个标签,就要将这个指令当成属性写在谁哪个标签上

    

    
    <tr v-for=(item,index) in key><td>{{item.xxxx}}</td><td>{{item.xxxx}}</td><td>{{item.xxxx}}</td></tr>

  • 条件判断：v-if / v-show 根据条件控制页面标签展示/不展示

    

    
    <span v-if="score >= 60">及格</span> <span v-show="score < 60">不及格</span>
    • 语法:
      • v-if 条件性的创建或者移除某些元素，判定为true时创建，判定为false移除（直接删除——用于登录后显示的昵称——更安全）
      • v-show 条件性的显示或者隐藏某些元素，判定为true时显示，判定为false隐藏（隐藏不显示——用于频繁隐藏出现的标签）
    • 注意:
      • 1) v-if 一般用于要么显示，要么隐藏的场景；v-show用于频繁切换显示和隐藏的场景
      • 2) v-if还可以配合v-else 以及v-else-if实现多分支条件判断,此时要注意三个标签中间不能有其它内容

  • 事件绑定： @ 事件（click，blur，fouce，change） = "方法名" 事件绑定用于给页面元素添加事件,js支持的事件vue都支持

    

    
    <button @ click="add()">按钮</button>
    • 标准语法 v-on:事件名="函数名"
    • 简化语法 @事件名="函数名"