当前位置： 首页 > article >正文

Vue 3 day1106

article 2024/12/24 11:27:08

ok了家人们，这周学习vue前端框架，let’s go

一.Vue概述

  • Vue 是一套前端框架，用于免除原生 JavaScript 中的 DOM
    操作，简化书写。

  •  

     基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。 

     
     
  • 官网： https://cn.vuejs.org/ 

 二.Vue快速入门

1. 新建 HTML 页面，引入 Vue.js 文件
2. 在 JS 代码区域，创建 Vue 核心对象，进行数据绑定
3. 编写视图
  •  新建 HTML 页面，引入 Vue.js文件
 <script src="js/vue.js"></script>
  • 在JS代码区域，创建Vue核心对象
 <script>
    // 创建Vue实例
    const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
        username: 'zhangsan'
      },
      methods: {  //用来定义函数
        
      },
    })
  •  编写视图

  <div id="app">
    <h1>Hello {{username}}</h1>
    <p>{{username}}</p>
  </div>
  •  el的两种写法
$mount() 方法手动将 Vue 组件挂载到 DOM 元素上。在 Vue
3 中，通常通过 createApp().mount() 自动挂载，少数情况
下需要手动挂载。

<body>

  <div id="app">
    <h1>Hello {{username}}</h1>
    <p>{{username}}</p>
  </div>

  <script src="js/vue.js"></script>

  <script>
    // 创建Vue实例
    const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
        username: 'zhangsan'
      },
      methods: {  //用来定义函数
        
      },
    })
    setTimeout(function(){
        vm.$mount('#app');
    },3000);
  </script>
</body>
  •  data的两种写法
<body>
<div id="app">
<h1>Hello {{username}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
el:"#app", //Vue应用实例接管的区域
是'#app'
// data:{ //用来定义数据模型 对象
式
// username:"zhangsan"
// },
// data:function(){ //函数式
// return{
// username:"zhangsan"
// }
// },
//函数式 简写
data(){
return{
username:"zhangsan"
}
},
methods:{ //用来定义函数
}
});
</script>
</body>

三.插值语法

  • 形式：{{ . . . }}
  • 内容可以是：
    • 变量： {{message}}
    • 算术运算：{{10 + 20}}
    • 三元表达式：{{message ? '有值':'没值'}}
    • 函数调用：{{message.toUpperCase()}}
作用： {{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，
到时候会将该模型的数据值展示在这个位置。且可以直接读取
到 data 中的所有属性   
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h1>Hello {{username}}</h1>
    {{10+10}}--{{username=="zhangsan"?"是":"否"}}--{{username.toUpperCase()}}--{{getAge()}}
    <p>{{username}}</p>
  </div>

  <script src="js/vue.js"></script>

  <script>
    // 创建Vue实例
    const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
        username: 'zhangsan'
      },
      methods: {  //用来定义函数
        getAge:function(){
          return 18
        }
      },
    })
  </script>
</body>
</html>

 四.Vue指令

4.1 指令介绍

指令： HTML 标签上带有 v- 前缀的特殊属性，不同指令具有
不同含义。例如： v-if ， v-for…
常用的指令有：
指令
作用
v-bind
为 HTML 标签绑定属性值，如设置 href , css 样
式等
v-model
在表单元素上创建双向数据绑定
v-on
为HTML标签绑定事件
v-if
条件性的渲染某元素，判定为 true 时渲染 , 否则
不渲染
v-else-if
条件性的渲染某元素，判定为 true 时渲染 , 否则
不渲染
v-else
v-show
根据条件展示某元素，区别在于切换的是display属性的值
v-for
列表渲染，遍历容器的元素或者对象的属性

4.2 v-bind 与 v-model

指令
作用
v-bind
为 HTML 标签绑定属性值，如设置 href , css 样
式等
v-model
在表单元素上创建双向数据绑定

 

  • v-bind 
该指令可以给标签原有属性绑定模型数据。这样模型数据发生
变化，标签属性值也随之发生变化
例如：
<a v-bind:href = "url" > 百度一下 </a>

上面的v-bind:" 可以简化写成 : ，如下：

<!-- v-bind 可以省略 -->
<a :href = "url" > 百度一下 </a>

  •  v-model
该指令可以给表单项标签绑定模型数据。这样就能实现双向绑
定效果。例如：
<input type = "text" v-model = "username" >
  • 代码实现 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h1>Hello {{username}}</h1>
    <a v-bind:href="url1">京东官网</a>
    <a :href="url2">小米官网</a>
    <hr/>

    <input type="text" v-model="username"/>

  </div>
  <script src="js/vue.js"></script>
  <script>
    // 创建Vue实例
    const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
        username: 'zhangsan',
        url1:"https://www.jd.com",
        url2:"https://www.mi.com"
      },
      methods: {  //用来定义函数
        getAge:function(){
        
      }},
    })
  </script>
</body>
</html>

 4.3 v-on

指令
作用
v-on
为HTML标签绑定事件
我们在页面定义一个按钮，并给该按钮使用 v-on 指令绑定单
击事件， html 代码如下
<input type = "button" value = " 一个按钮 " v-on:click = "handle()" >
而使用 v-on 时还可以使用简化的写法，将 v-on: 替换成 @ ，
html 代码如下
<input type = "button" value = " 一个按钮 "  @click = "handle()" > 
上面代码绑定的 handle() 需要在 Vue 对象中的 methods 属
性中定义出来
new Vue({
        el: "#app",
        methods: {
                handle:function(){
                        alert("我被点了");
                }
        }
});

 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <input type="button" value="点我" v-on:click="method01()"/><br/>
      <input type="button" value="点我试试" @click="method02()"/><br/>
      <input type="button" value="不传参数" @click="method03"/><br/>
      <input type="button" value="传递参数" @click="method04(10)"/>
    </div>

  <script src="js/vue.js"></script>
  <script>
     // 创建Vue实例
     const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
        username: 'zhangsan',
        url1:"https://www.jd.com",
        url2:"https://www.mi.com"
      },
      methods: {  //用来定义函数
       method01:function(){
          alert("点击了按钮1")
       },

       method02:function(){
          alert("点击了按钮2")
       },

       method03:function(){
          alert("点击了按钮3")
       },

       method04:function(num){
          alert("点击了按钮"+num)
       }
      },
    })
  </script>
</body>
</html>

 4.4 v-if 与 v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <input type="text" v-model="money"/><br>

    当前用户的工资等级为: {{money}} , 当前用户为:
    <span v-if="money>=0 && money<=10000">工程师</span>
    <span v-else-if="money>=10000 && money<=20000">高级工程师</span>
    <span v-else>高收入</span>

    <br/>

    当前用户的工资等级为: {{money}} , 当前用户为:
    <span v-show="money>=0 && money<=10000">
    低收入</span>
    <span v-show="money>10000 && money<20000">中收入</span>
    <span v-show="money>=20000">高收入</span>
  </div>
  <script src="js/vue.js"></script>
  <script>
     // 创建Vue实例
     const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
       money:10000
      },
      methods: {  //用来定义函数
      
      },
    })
  </script>
</body>
</html>

 4.5 v-for

这个指令看到名字就知道是用来遍历的，该指令使用的格式如
下：
  • 语法：v-for = "(item,index) in items"
  • 参数：
    • items 为遍历的数组
    • item 为遍历出来的元素
    • index 为索引/下标，从0开始 ；可以省略，省略index
      语法： v-for = "item in items"
       
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <p v-for="addr in address">{{addr}}</p>
      <p v-for="(addr,index) in address">{{index+1}} : {{addr}}</p>
  </div>
  <script src="js/vue.js"></script>
  <script>
     // 创建Vue实例
     const vm = new Vue({
      el: '#app',//Vue应用实例接管的区域是'#app'

      data: {  //用来定义数据模型
          address:["北京","上海","广州","深圳"]
      },
      methods: {  //用来定义函数
      
    }
    },)
  </script>
</body>
</html>

 五.Vue的生命周期

vue 的生命周期：指的是 vue 对象从创建到销毁的过程。
vue 的生命周期包含 8 个阶段：每触发一个生命周期事件，会
自动执行一个生命周期方法，这些生命周期方法也被称为钩子
方法。
状态
阶段周期
beforeCreate
创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy 销毁前
destroyed销毁后
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过
程及各个阶段对应的钩子函数：

 

其中我们需要重点关注的是 mounted ， 其他的我们了解即可。
mounted ：挂载完成， Vue 初始化成功， HTML 页面渲染成功。以后我们一般用于页面初始化自动的 ajax 请求后台数据

ok了家人们明天见byebye

 


http://www.kler.cn/a/382158.html

相关文章：

  • 写作词汇积累：纰漏、坎肩、颠三倒四、隔阂
  • java全栈day20--Web后端实战(Mybatis基础2)
  • API开发：Flask VS FastAPI
  • SQL Server 解决游标性能问题的替代方案
  • 合并比对学习资料
  • 【服务器】MyBatis是如何在java中使用并进行分页的？
  • Linux初阶——线程（Part3）：POSIX 信号量 CP 模型变体
  • 求助帖【如何学习核磁共振的原理】
  • 04音视频——基于全志V3S的Linux开发板教程笔记
  • 消息通知——公众号、小程序、短信对比
  • Vue进阶指南：Watch 和 Computed 的深度理解
  • docker、es数据库
  • OpenCv综合应用——人脸识别
  • 一次32bit有符号数据类型转换为64bit无符号数据类型引发的溢出错误
  • 各地级市能源消耗量数据-基于灯光数据的反演（2000-2022年）
  • 在 Hive SQL 中判断字段是否包含指定字符串的几种方法
  • 安卓内核内存回收
  • RHCE-SElinux+防火墙
  • Git 测验
  • JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
  • C#应用随系统启动 - 开源研究系列文章
  • Tornado简单使用
  • React中 useEffect 的原理
  • Python数据可视化seaborn
  • Idea如何推送项目到gitee
  • 使用 Python 写一个后端程序的项目方案