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

Wantfly99512023-09-10 20:55

目录

一、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开发准备工作

bash 复制代码 
查看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解析器解释

文本插值

双大括号进行数据绑定文本插值

每个绑定支持单一表达式

javascript 复制代码 
<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指令

javascript 复制代码 
<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>

条件渲染

javascript 复制代码 
<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>

列表渲染

javascript 复制代码 
<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"

事件处理器的值可以是内联事件处理器也可以是方法事件处理器

定义事件

javascript 复制代码 
<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对象

javascript 复制代码 
  methods:{
    addCount(e){
      this.count++
      console.log(e.target.innerHTML="Add"+this.count)
    }
javascript 复制代码 
<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>
javascript 复制代码 
<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>

事件修饰符

javascript 复制代码 
<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>

五、数组变化侦测

javascript 复制代码 
<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>
相关推荐
喵叔哟1 分钟前
重构代码之取消临时字段
java·前端·重构
青锐CC27 分钟前
webman使用中间件验证指定的控制器及方法[青锐CC]
中间件·前端框架·php
还是大剑师兰特42 分钟前
D3的竞品有哪些，D3的优势，D3和echarts的对比
前端·javascript·echarts
王解42 分钟前
【深度解析】CSS工程化全攻略（1）
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览，而是下载文件？
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
man20171 小时前
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
vue.js·spring boot·后端
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建（module）
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题
前端·架构·web
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08文件或文件夹名称中有空格如何批量去除09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能