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

Vue 3 day1106

news 2024/11/6 21:45:39

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.mrgr.cn/news/67043.html

相关文章：

  • Windows Server2012 R2搭建NFS服务器
  • Linux操作系统:学习进程_对进程的深入了解
  • 程序员开发速查表
  • 【java】ArrayList与LinkedList的区别
  • SQL拦截（二）InnerInterceptor
  • 计算机网络：网络层 —— 移动 IP 技术
  • string模拟实现find
  • 六个核桃斥资千万研究脑健康，核桃健脑作用科学具象化了
  • SpringBoot配置Rabbit中的MessageConverter对象
  • 01简介——基于全志V3S的Linux开发板教程笔记
  • 信息安全工程师（78）网络安全应急响应技术与常见工具
  • 对比JavaScript、C、Python在声明变量后未初始化处理上的差异与深度解析
  • springboot-Ioc-Di
  • 内网渗透-信息收集篇
  • 输入/输出系统
  • 呼叫中心如何安排用户回访？
  • 编译工具与文件学习(一)-YAML、repos、vcstoolcolcon
  • NoSQL基础知识总结
  • xftp连接中不成功 + sudo vim 修改sshd_config不成功的解决方法
  • Linux 高级IO
  • sqli-labs（第三关）
  • 全流程揭秘：如何打造一个虚拟3D展厅？
  • memcache redis区别
  • 支持向量机相关证明 解的稀疏性
  • 如何解决反向代购业务中的物流难题？
  • 拦截器获取controller上的自定义注解