vue高级（第二十三天）

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量34 收藏
点赞数
文章标签： html5 vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56036033/article/details/120203759
版权

vue指令

使用方式：就是再HTML的标签上，加上一些v-的指令

1，v-model:实现数据驱动，双向绑定

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript">
            
        </script>
        <style type="text/css">
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body> 
        <div id="app" v-cloak>
            <input type="text" v-model="mas"></br>
            <p v-html="mas"></p>
            <p v-if="age>=21">lb</p>
            <p v-if="age>=25">nb</p>
            <p v-show="age>=21">{{mas}}</p>
            <p v-if="type==='A'">良好</p>
            <p v-else-if="type==='A'">超良好</p>
            <p v-else>好</p> 
            <p v-for="i in arr">{{i}}</p>
            <p v-for="i,index in arr">{{i}}{{index}}</p>
            <p v-on:onli></p>
            </div>
        
        <script type="text/javascript">
            new Vue({ 
                el:"#app",
                data:{
                    type:'A',
                    mas:"<h1>sb</h1>",
                    arr:[
                        '杨幂','d','asd'
                    ],
                    age:24
                },
                methods:{}
            })
        </script>
    </body>
</html>

二，命令

创建命令并调用

双向绑定 v-model:修改一方同时修改相同的另一方，达到数据同时更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-命令</title>
		<script src="vue.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{name}}
			<input type="text" v-model="name" />
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					name:"王振亚",
					age:26
				},
				methods:{
					show(){
						console.log("喜欢展出")
					}
				}
			})
		</script>
	</body>
</html>

闪现 v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>注册表单</h1>
		<form v-cloak>
        ......
        </form>
	</body>
</html>

v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div id="app">
			<p v-if="age>=27">成年人</p>
			<p v-if="age<27">成年人</p>
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					name:"王振亚",
					age:27
				},
				methods:{
					show(){
						console.log("我是谁")
					}
				}
			})
		</script>
	</body>
</html>

v-for 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="sss">
			<!-- 其中i是数组，index是下标 -->
			<p v-for="i,index in arr">{{i}}{{index}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#sss",
				data:{
					name:"wangzhenya",
					age:25,
					arr:[
						"aaa","bbb","ccc"
					]
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

v-bind 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="amg">
			<a v-bind:href="url" target="_blank">{{name}}</a>
		</div>
		<script>
			new Vue({
				el:"#amg",
				data:{
					name:"wangzhenya",
					age:28,
					url:"http://www.taobao.com"
				}
			})
		</script>
	</body>
</html>

v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="amg">
			<p v-html="name">{{name}}</p>
		</div>
		<script>
			new Vue({
				el:"#amg",
				data:{
					name:"<h1>wangzhenya</h1>",
					age:28,
					url:"http://www.taobao.com"
				}
			})
		</script>
	</body>
</html>

2.所有命令的巩固

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-for="i,index in desc">{{index}}.{{i}}</p>
            <input v-model="name" type="text"/></br>{{name}}
            <p v-if="age>60">{{age}}</p>
            <ol>
                <li v-html="address">{{address}}</li>
                <a @click="show()">点我</a>
                <a :href="url">点击</a>
                <h1 v-show="seen">see you again</h1>
                <input type="radio" value="w3c" v-model="site" />w3c
                <input type="radio" value="runoob" v-model="site" />runoob
                <p>你选择的是：{{site}}</p>
            </ol>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    site:'',
                    name:"2507",
                    address:"<h1>淮北</h1>",
                    age:56,
                    seen:true,
                    url:"http://www.pinduoduo.com",
                    desc:['小李飞刀','降龙十八掌','葵花宝典','九阴白骨爪']
                },
                methods:{
                    show(){
                        console.log("笑傲江湖")
                    }
                }
            })
        </script>
    </body>
</html>

程序员慕慕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【三十天精通Vue 3】第二天 Vue 3带来的新特性
陈书予
04-08 9932
Vue 3 是 Vue.js 框架的最新版本，它引入了许多新的功能和改进，包括 Composition API、Vuex 3、Vue Router 4、响应式系统等等。在本文中，我们将介绍 Vue 3 的各个方面，以便您了解如何在当前项目中使用 Vue 3。
【三十天精通Vue 3】 第十八天 Vue 3的国际化详解
陈书予
04-26 9290
国际化（Internationalization，缩写为 i18n）是指为不同语言和文化习惯的用户提供相同的软件服务和用户界面，包括语言、货币、时间、数字格式等方面的适应性。通过国际化，用户可以在他们熟悉的语言和文化环境中使用应用程序。在使用国际化时，定义一致的翻译规范是非常重要的。这样做可以确保整个项目中的翻译风格、命名方式、格式等保持一致，使得代码更易于维护。命名方式：在命名翻译项时，使用一致的命名规则，例如使用驼峰命名法或下划线命名法。翻译格式：使用一致的翻译格式，例如使用。
第十八天 Vue-前端工程化总结
HuanLe.的博客
03-20 1186
前端api管理工具Yapi、Vue-cli安装与使用、Vue组件库ElementUI
vue高级开发的技巧
lixiaolong240035的博客
09-17 1235
1.在v-for中使用函数 2.使用Object.assign进行多个响应式属性赋值 3.使用修饰符.passive提升移动端性能 3.使用inheritAttrs:false禁止属性集成，但是不影响class和style的合并 4.使用.sync来简化父子组件的通讯 5.使用@hook:生命周期来优化代码，增加可维护性 将绑定监听函数和解绑监听函数写到同一个钩子中，便于维护 在组件外部监听组件的生命周期，而不需要改动组件逻辑 6.小型项目采用vue2.6提供的新API Vue.observ
vue高级
weixin_53468073的博客
12-20 871
安装node，学习vue高级部分 1、node.js 2、npm 3、vue-cli 4、vue的目录结构 5、vue项目的启动流程 6、单文件组件 7、路由 8、router-link 9、router-view 10、redirect重定向 11、router.js的引入组件的方式 12、vue的路由模式 13、组件拆分 14、MPA-SPA 15、vue项目中集成axios
Vue进阶（四十七）：面试必备：2024 Vue经典面试题总结（含答案）
热门推荐
IT全栈 华强工作室
04-22 19万+
MVVM是的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI 组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的， 因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。ViewModel。
Vue高级
fl8545的博客
03-16 154
Vue高级 上一篇中介绍了vue的基础部分，包括指令、组件、生命周期等，基本上已经可以在平常的开发中使用，接下来介绍Vue高级部分，包括路由、脚手架、elementUI等等。
Vue2~3高级用法
weixin_45291798的博客
11-27 394
2、v-slot:header="header" 将header插槽中的数据绑定到header变量中，可在父组件中直接使用。#header 无法实现将header插槽中的数据绑定到变量中。slider.js 在Mixins文件夹下建一个slider.js文件。1、v-slot:header 等于#header。页面（组件）引用mixins。comp.vue 组件。
【三十天精通 Vue 3】 专栏内容介绍
陈书予
04-27 2万+
在这个专栏中，我们将带你深入了解 Vue 3 的各个方面。首先，我们将带你了解 Vue 3 的新特性和改进，包括 Composition API、Provide/Use Case、Vuex 3 等。然后，我们将详细介绍 Vue 3 的组件化开发、路由、状态管理等方面的内容。以上是专栏的链接（持续更新）
Vue 3 第二十二章：组件十（组件高级特性-组件的渲染函数和JSX/TSX语法）
to_the_Future的博客
05-24 2489
在 Vue3 中，我们可以选择使用模板语法、渲染函数或 JSX 语法来定义组件的模板。使用哪种方式取决于我们的个人喜好和项目的需求。渲染函数可以让我们更加灵活地定义组件的模板，并且可以让我们在编写组件时使用 JavaScript 的全部语言特性。JSX 语法是一种将 XML 语法嵌入到 JavaScript 中的语法，可以让我们更加灵活地定义组件的模板。
详解vue高级特性
10-15
主要介绍了vue高级特性的相关知识，文中介绍非常细致，帮助大家更好的参考和学习，感兴趣的朋友可以了解下
vue项目中使用天地图
01-08
2.创建自己的vue项目，这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ ...
在vue中使用天地图dome
05-31
包含轨迹图添加——开始暂停结束、多个标注的显隐、缩放控件、地图换颜色、区域图
Vue.js中的高级面试题及答案
11-27
Vue-loader 是 Webpack 的加载模块，它使我们可以用 Vue 文件格式编写单文件组件。 单文件组件文件有三个部分，(模板、脚本和样式)。 vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) ...
HTML5表单元素：重塑数据收集的艺术
艾恩小灰灰的博客
06-08 450
HTML5表单元素和属性的引入，不仅简化了前端开发者的代码，更重要的是，它们为用户提供了更加友好和直观的交互体验。从自动验证到动态反馈，从自动完成到无障碍支持，HTML5表单功能的提升为现代Web应用设计奠定了坚实的基础。作为开发者，掌握并有效利用这些特性，将大大提升表单的数据收集效率和用户满意度。随着Web技术的不断发展，探索和实践这些新特性，将使我们的网页应用更加先进和富有竞争力。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 390
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 573
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 281
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 208
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
vue高级前端面试题
08-29
当谈到Vue.js的高级前端面试题时，以下是一些可能的问题： 1. 谈谈Vue的生命周期钩子函数及其用途。 2. 什么是Vue的响应式系统？它是如何工作的？ 3. 如何在Vue中实现组件间的通信？ 4. 什么是Vue的虚拟DOM？它有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员慕慕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值