Vue学习2

最新推荐文章于 2024-05-17 18:09:22 发布

gdhz-xwx

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量956

点赞数 22

文章标签：学习

本文链接：https://blog.csdn.net/m0_56186047/article/details/132661805

版权

前言

本次讲的是非组件式开发，使用是js文件导入，步骤：

1. 进入官方网站，下载vue文件

https://unpkg.com/vue@3.3.11/dist/vue.global.js

2. 在项目直接使用

1. 一个vue文件的主要结构如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue学习</title>
  <script src="../js/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <!-- 插值语法来获取数据 -->
    <h2>{{msg}}</h2>
    <input type="text" v-model="msg" />
    <button @click="changeMsg">点击改变</button>
  </div>
  <script>
    //1. 调用vue的createApp对象
    const app = Vue.createApp({
      data () {
        return {
          msg: "hello Vue",
        }
      },
      methods: {
        changeMsg () {
          this.msg = "nihao"
        }
      },
    })
    //挂载到一个元素上
    app.mount("#app")
    //2.使用接收函数，导入方式
    // const { createApp } = Vue
    // createApp({
    //   data () {
    //     return {
    //       msg: "hello Vue",
    //     }
    //   }
    // }).mount("#app")
  </script>
  <style>

  </style>
</body>

</html>

其中的data用来书写要渲染到界面的数据，methods中用来写自定义的函数名称，app.mount("#")用来将vue元素挂载到dom界面上。这里还需要注意一些细节：

app中的data,methods都可以在该标签的内部使用,
该标签之外的标签无法使用app中的data,methods
js中, 函数声明, 普通函数, 箭头函数, this指向问题, vue中, 尽量避免使用箭头函数
普通函数中this指向的app/vue对象,箭头函数中,this指向window对象

2.插值语法

无法直接在标签属性中使用, 只能作为标签的文本内容，

不能书写if逻辑判断

3. Vue的设计模式

javaWeb中, mvc设计模式: m: model模型层 v view: 视图层展示数据 c: controller 控制器

vue设计模式: mvvm设计模式: m: model模型层(数据) v view: 视图层(模版)

vm: viewModel 视图模型, (vue)

4.Vue中指令

Vue.js指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它扩展了HTML标签的功能.

Vue指令的作用是通过v-属性名,实现对DOM的响应式加载

4.1 绑定属性

v-bind，可以简写:属性名，

v-bind 可以一次性绑定多个属性

4.2 :class 使用方式

:class=“变量名” 适用场景:样式的类名不确定,个数确定, 需要动态指定

:class=“{类名:boolean值, ….}” 适用场景:样式的类名,个数确定,但是是否使用不确定,类是否实现, 值决定,值为true,使用, false: 不使用

:class=“[‘xx’,’‘’,…]” 适用场景:样式的类名,个数都不确定,动态添加类,动态删除类

4.3 :style使用方式

:style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

css样式属性名写法: a-b: background-color font-size

:style中样式属性名写法: 1.“a-b” “background-color ” 2.小驼峰: aB backgroundColor 推荐

示例：

4.4 控制标签的显示与隐藏

v-if v-else-if v-else

v-if 控制标签显示隐藏:

对dom进行添加与删除操作

v-if=“true”, 页面添加这个dom元素,v-if=“false”, 页面删除这个dom元素

注意:

v-if, v-else, v-else-if之间不能插入其他标签,否则无效
v-show

v-show控制标签显示隐藏:

这个元素永远存在, 控制的dom元素行内样式: display, 隐藏: 给dom元素添加display:none行内样式, 显示: 把display:none 去掉

v-show效率比v-if高

二者的区别：

首先，在用法上的区别：

v-show是不支持template；
v-show不可以和v-else一起使用；

其次，本质的区别：

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

开发中如何进行选择呢？

如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
如果不会频繁的发生切换，那么使用v-if；

4.5 v-for的一些细节

v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，也就是循环指令.其中 items 是源数据的数组，而 item 是迭代项的别名：

其中的in可以用of代替

v-for中通过key管理状态

如果没有设置key, 默认使用的数组的下标进行新旧dom对比

如果是设置key, 使用的设置key进行新旧dom的对比, 效率高

实际开发中, 推荐使用for循环, 都设置key, 除非循环只是读取数据,没有修改, 可以不设置key

key: 唯一值, 字符串, 数值, 有id就使用id

4.6 v-model的使用

只能在表单元素中使用，v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

:value无法做到双向数据绑定，vue提供v-model进行表单与data中的数据双向绑定。它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

表单元素:

监听的input事件

checkbox,radio,select 监听的change事件

文本类型( 文本框,密码框, 多行文本框)的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；

<input type="checkbox"> : v-model, 绑定的checked属性,

如果单个checkbox, v-model, 绑定的checked属性, 绑定的值是 boolean类型, true: 选中,false:没有选中
如果是多个相同name的checkbox,绑定的checked属性, 绑定的值是checkbox的value值
v-model: 忽略value,checked,selected属性,这些属性无效

<input type="radio">

v-model, 绑定的checked属性, 绑定的值是checkbox的value值

select下拉框

如果是单选, v-model绑定的单个option中的value
如果是多选: v-model绑定的数组,option中的value

总结：

本次的博客用来记录的是本人学习Vue这个前端框架的心得以及一些感受，写一些随记方便总结学习，也可以方便之后的复习。前端的学习是很重要的，得好好学。在本篇博客中写到得方法，以及一些指令，都是在非组件开发中使用的，这一点也是需要注意的。

gdhz-xwx

关注

22
点赞
踩
23

收藏

觉得还不错? 一键收藏
2
评论
Vue学习2

本次的博客用来记录的是本人学习Vue这个前端框架的心得以及一些感受，写一些随记方便总结学习，也可以方便之后的复习。前端的学习是很重要的，得好好学。在本篇博客中写到得方法，以及一些指令，都是在非组件开发中使用的，这一点也是需要注意的。
复制链接

扫一扫