Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测

这篇具有很好参考价值的文章主要介绍了Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Vue框架

渐进式JavaScript框架,易学易用,性能出色,适用场景丰富的Web前端框架
功能是构建用户界面
基于标准的HTML、CSS和JavaScript,提供了一套声明式的、组件化的编程模型,帮助高效得开发用户界面

1.1渐进式框架

渐进式框架:Vue是一个框架也是一个生态,功能覆盖了大部分前端的常见需求,Vue的设计非常注重灵活性和可以被逐步集成的特点
不同方式使用Vue:
1、无需构建步骤,渐进式增强静态的HTML
2、在任何页面作为 Web components嵌入
3、单页应用(SPA)
4、全栈/服务端渲染(SSR)
5、jamstack/静态站点生成(SSG)
6、开发桌面端、移动端、WebGL,甚至是命令行终端中的界面

1.2 Vue的版本

Vue的版本:开发中Vue可以选择两大版本,Vue2和Vue3,老项目一般Vue2,新项目一般选择Vue3
Vue3涵盖了Vue2的知识体系,当然Vue3增加了很多新的特性

官方文档:cn.vuejs.org

二、VueAPI的风格

主要两种风格:选项式API(Vue2)和组合式API(Vue3)
不同底层提供的两个接口,基础概念和知识是通用的
当生产项目中:
不需要使用构建工具或者在低复杂度的场景中用Vue的时候,推荐用选项式API
当打算用Vue构建完整的单页应用,推荐采用组合式API+单文件组件

三、Vue开发准备工作

查看vue版本
node -v
创建Vue项目
npm init vue@latest
进入项目
cd vue-base
安装
npm install
运行项目
npm run dev

vite.config.js Vue配置文件
package.json 信息描述文件
index.thml 入口html文件
node_modules Vue项目运行的依赖文件
public 资源文件夹
README.md 注释文件

四、模板语法

Vue使用的是基于HTML的模板语法,可以以声明式的将组件实例绑定到DOM中,所有的VUE语法都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解释

文本插值

双大括号进行数据绑定文本插值
每个绑定支持单一表达式

<template>
  <p>{{msg}}</p>
  <p>{{hello}}</p>
  <p>{{num+1+2+3}}</p>
  <p>{{ok?'Yes':'No'}}</p>
  <p>{{message.split("").reverse().join("")}}</p>
</template>

<script>
export default {
  data(){
    return{
      msg:"神奇的语法",
      hello:"hello world",
      num:10,
      ok:'Yes',
      message:"大家好呀"
    }
  }
}
</script>

属性绑定

双大括号不能在HTML attribute中使用 想要响应式绑定一个attribute,应该使用v-bind指令

<template>
<!--  用v-bind 调整属性 同时可以用:简写   undefined 那么就是消除对应的属性-->
<div v-bind:class="dynamicClass" v-bind:id="dynamicId" :title="dynamicTittle">{{msg}}111</div>
<!--  一次性绑定多个-->
<div v-bind="objectOfAttrs"></div>
</template>

<script>
export default {
  name: "HelloWorld",
  data(){
    return{
      msg:"hello world",
      dynamicClass:"active",
      dynamicId:"APPID",
      dynamicTittle:undefined,
      objectOfAttrs:{
        class:"appclass",
        id:"appid"
      }
    }
  }
}
</script>

条件渲染

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">
    看得见吗?
  </div>
  <div v-else-if="!flag">
    还是看看吧
  </div>
<!--  v-show 和 v-if 一样的
    但是v-if是真实的按条件渲染 切换的时候对监听器和组件销毁与重建 false不会做任何事 true才会去渲染
    v-show简单 无论条件如何都会渲染 只不过改变的是display的属性
    v-if 强调的是切换开销 v-show 强调初始渲染开销
    频繁切换用v-show  运行时捆绑条件少用v-if
-->
  <div v-show="flag">
    看得见吗?
  </div>
</template>

<script>
export default {
  data(){
    return{
      flag:false
    }
  }
}
</script>

<style scoped>

</style>

列表渲染

<template>
  <h3>列表渲染</h3>
  <p v-for="item in names" v-bind:key="item">{{item}}</p>
<!--  index 是默认的下标-->
  <p v-for="(item,index) in names" v-bind:key="(item,index)">{{item}}-{{index}}</p>
<!--  v-for 不仅仅可以遍历数组 也可以遍历对象-->
  <div v-for="item in result" v-bind:key="item">
    <p>{{item.title}}</p>
    <img :src="item.url" :alt="item.id">
  </div>
  <div v-for="item in result" v-bind:key="item">
    <div v-for="(value,key,index) in item" v-bind:key="(value,key,index)">
      <p>{{value}}-{{key}}-{{index}}</p>
    </div>
  </div>

  <div v-for="(value,key,index) in user" v-bind:key="(value,key,index)">
    <p>{{value}}-{{key}}-{{index}}</p>
  </div>
</template>

<script>
export default {
  name: "ForDemo",
  data(){
    return{
      names:["a","b","c"],
      result:[{
        "id":101,
        "title":"标题1",
        "url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
      },{
        "id":102,
        "title":"标题2",
        "url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
      },{
        "id":103,
        "title":"标题3",
        "url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
      }],
        user:{
          name:"kewin",
          age:18
        }
    }
  }
}
</script>

key管理状态

Vue默认按照就地更新策略渲染元素列表
当顺序改变 vue不会移动dom元素的顺序,而是就地更新,确保原本指定的索引位置上渲染
为了给vue一个提示,方便跟踪每个节点的标识,从而重用和重新排序现有的元素,需要一个key唯一标志属性

四、事件处理

可以使用v-on指令(简写@)监听DOM事件,并且在事件触发的时候执行对应的JavaScript
用法:οnclick=“methodname”或@click=“handler”
事件处理器的值可以是内联事件处理器也可以是方法事件处理器

定义事件

<template>
  <button @click="count++">AddInline</button>
  <button @click="addCount">AddMethod</button>
  <p>{{count}}</p>
</template>

<script>
export default {
  name: "ListenerDemo",
  data(){
    return{
      count:1
    }
  },
  //所有方法函数都放在这里
  methods:{
    addCount(){
      this.count++
      console.log(this.count)
    }
  }
}
</script>

事件参数

事件参数可以获取event对象和通过事件传递参数
vue中event对象就是js的event对象文章来源地址https://www.toymoban.com/news/detail-696976.html

  methods:{
    addCount(e){
      this.count++
      console.log(e.target.innerHTML="Add"+this.count)
    }
<template>
  <button @click="count++">AddInline</button>
  <button @click="addCount('hello')">AddMethod</button>
  <p>{{count}}</p>

  <p @click="getNameHanlder(item)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>

<script>
export default {
  name: "ListenerDemo",
  data(){
    return{
      count:1,
      names:["张三","李四","王五"]
    }
  },
  //所有方法函数都放在这里
  methods:{
    addCount(msg){
      this.count++
      event.target.innerHTML="add"+msg
    },
    getNameHanlder(item){
      console.log(item)
    }
  }
}
</script>
<template>
  <button @click="count++">AddInline</button>
  <!-- 可以用&event 传event事件参数 -->
  <button @click="addCount('hello',$event)">AddMethod</button>
  <p>{{count}}</p>

  <p @click="getNameHanlder(item)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>

<script>
export default {
  name: "ListenerDemo",
  data(){
    return{
      count:1,
      names:["张三","李四","王五"]
    }
  },
  //所有方法函数都放在这里
  methods:{
    addCount(msg,e){
      this.count++
      e.target.innerHTML="add"+msg
    },
    getNameHanlder(item){
      console.log(item)
    }
  }
}
</script>

事件修饰符

<template>
  <h3>事件修饰符</h3>
<!--  进行修饰 实现点击但是不跳转-->
  <a @click.prevent="clickHandle" href="http://www.baidu.com">点击进入连接</a>
  <div @click="clickDiv">
<!--    让事件不冒泡到父元素-->
    <p @click.stop="clickP">测试冒泡</p>
  </div>
</template>

<script>
export default {
  name: "ListenerDemo2",
  methods:{
    clickHandle(){
      console.log("被点击了")
    },
    clickDiv(){
      console.log("DIV")
    },
    clickP(){
      console.log("P")
    }
  }
}
</script>

<style scoped>

</style>

五、数组变化侦测

<template>
  <h3>数组变化侦听</h3>
  <ul>
    <li v-for="(item,index) of names" :key="index"> {{item}}</li>
  </ul>
<!--  Vue可以侦听响应式数组的变更方法 并且在调用的时候触发相关的更新
      push()  添加
      pop()   取出最上面的一个
      shift()
      unshift()
      splice()
      sort()
      reverse() 逆置
-->
  <button @click="addListHandle1">reverse</button>
<!--
    使用替换数组的方法来更新
    filter()
    concat()
    slice()
    直接对原数组进行变更
-->
  <button @click="addListHandle2">itemupdate</button>
</template>

<script>
export default {
  name: "ArrayListenerDemo",
  data(){
    return{
      names:["张三","李四","王五"]
    }
  },
  methods:{
    addListHandle1(){
      this.names.reverse()
    },
    addListHandle2(){
      //直接this.names.concat(["123"])不会引起UI更新
      this.names=this.names.concat(["123"])
    }
  }
}
</script>

到了这里,关于Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:tabbar、事件绑定、数据绑定、模块化、模板语法、尺寸单位

    目录 1. tabbar 1.1 什么是tabbar  1.2 配置tabbar  2. 事件绑定 2.1 准备表单 2.2 事件绑定 2.3 冒泡事件及非冒泡事件  3. 数据绑定 3.1 官方文档 4. 关于模块化 5. 模板语法 6. 尺寸单位 下图中标记出来的部分即为tabbar:    官方说明文档:   说明: pagePath中指定的页面,必须在app.jso

    2024年02月04日
    浏览(61)
  • 微信小程序之WXML 模板语法之数据绑定、事件绑定、wx:if和列表渲染

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月22日
    浏览(58)
  • Vue前端框架10 组件的组成、组件嵌套关系、组件的注册方式、组件传递数据(props $emit)、数组传递多种数据类型、组件传递props校验、组件事件

    组件最大的优势就是可复用性 通常将组件定义在.vue中,也就是SFC单文件组件 组件的基本组成: 组件允许我们将UI划分为独立的、可重用的部分,并且对每个部分单独思考 实际应用中组件常常被组件成层层嵌套的树状结构 Vue组件使用前要注册,注册有两种方式:全局注册和

    2024年02月09日
    浏览(50)
  • 【Spring教程30】Spring框架实战:从零开始学习SpringMVC 之 Rest风格简介与RESTful入门案例

    欢迎大家回到《Java教程之Spring30天快速入门》,本教程所有示例均基于Maven实现,如果您对Maven还很陌生,请移步本人的博文《如何在windows11下安装Maven并配置以及 IDEA配置Maven环境》,本文的上一篇为《SpringMVC 之 服务器响应》 REST(Representational State Transfer),表现形式状态转

    2024年02月04日
    浏览(50)
  • 【Vue】二:Vue核心处理---模板语法

    {{可以写什么}} (1)在data中声明的变量,函数 (2)常量 (3)合法的javascript表达式 (4)模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math, Date Vue中所有指令都是以HTML标签当中的属性存在的。 (1)指令的位置 (2)指令的语法规则 v-标签名:参数=“表达

    2024年02月06日
    浏览(32)
  • Vue实战【Vue开发中的的前端代码风格规范】

    大家好,上一期的导航守卫篇不知大家在私底下是否进行了尝试?之前收到好多小伙伴的私信说什么时候能给大家出一期前段代码风格规范呀,有的同学觉得自己的代码编写的不是很漂亮,虽然自己知道是干啥,但是可读性一点也不高;今天博主也是根据自己多年的开发经验

    2023年04月09日
    浏览(44)
  • Vue模板语法的缩写是什么?

    Vue模板语法缩写是VTL(View Template Language),这是一种用于构建用户界面的声明式编程语言。它基于HTML,但具有更强大的数据绑定功能。下面是一些VTL的例子: 绑定文本: 这个例子中,message是Vue实例中的一个数据属性,它会被渲染在这个段落元素中。 绑定属性: 这个例子中

    2024年02月08日
    浏览(47)
  • VUE2教程-基础-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要

    2024年02月17日
    浏览(47)
  • vue3模板-vscode设置(语法糖)

    选择菜单里的 文件 首选项 用户代码片段 vscode模板 结果 useCurrentInstance.ts

    2024年02月07日
    浏览(47)
  • 【Vue3 知识第三讲】模板语法、Vue3指令

    插值表达式 {{ data }} 可以用于渲染 Vue 中提供的数据。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 注:vue中的插值提供了真正的js环境,因此我们可以直接使用 JS 表达式 2.1 概述 指令是什么 指令就是一个自定义属性,Vue中的指令都是以 v

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包