Vue之模块语法(二）

最新推荐文章于 2022-07-27 16:26:02 发布
最新推荐文章于 2022-07-27 16:26:02 发布
阅读量177 收藏
点赞数
分类专栏： 前端 文章标签： Vue 模块语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44255950/article/details/100936751
版权

博客目标

讲解Vue的基本使用(上）

1. 模板语法

1.1插值

1.1.1文本插值

	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
                    <h3>文本</h3>
					{{msg}}
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k'
				}
			}
		});
	</script>

效果如下：
在这里插入图片描述

1.1.2 html

<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
                    <h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html  使用v-html指令用于输出html代码    </h3>
					<div v-html="vueHtml"></div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					vueHtml:'<span style="color:red;" >vue对html的解析</span>'
				}
			}
		});
	</script>

效果图：
在这里插入图片描述

1.1.3 属性

<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
                    <h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html  使用v-html指令用于输出html代码    </h3>
					<div v-html="vueHtml"></div>
				</li>
				<li>
					<h3>属性</h3>
					<input type="text" :value="msg" />
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					vueHtml:'<span style="color:red;" >vue对html的解析</span>'
				}
			}
		});
	</script>

效果图：
在这里插入图片描述

v-bind:与v-model:的区别

v-model是做数据双向绑定的指令
					 v-bind只是将对应的值给填写到指定的属性中
					 列如：
					 v-bind:Value就是将值填写到value=""
					 然后value的值发生改变，并不会影响Vue实例中的变量值
					 v-on简写是@  v-bind简写是：

1.1.4 表达式

	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
                    <h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html  使用v-html指令用于输出html代码    </h3>
					<div v-html="vueHtml"></div>
				</li>
				<li>
					<h3>属性</h3>
					<!-- v-bind:与v-model:的区别
					 v-model是做数据双向绑定的指令
					 v-bind只是将对应的值给填写到指定的属性中
					 列如：
					 v-bind:Value就是将值填写到value=""
					 然后value的值发生改变，并不会影响Vue实例中的变量值
					 v-on简写是@  v-bind简写是：
					 -->
					<input type="text" :value="msg" />
	            </li>
				<li>
					<h3>表达式</h3>
	     {{str.substr(0,6).toUpperCase()}}
          {{ number + 1 }}
          {{ ok ? 'YES' : 'NO' }}
				</li>
	<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					vueHtml:'<span style="color:red;" >vue对html的解析</span>',
					str:'http://www.baidu.com',
					number:6,
					ok:true,
					id:5
				
				}
			}
		});
	</script>

效果图：
在这里插入图片描述

1.2 指令

1.2.1 核心指令

1.2.1.1 条件指令 （场景：分数判断等级）

<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
           <h3>条件指令 （if elseif else)</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="score">E</div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					score:88
				}
			}
		});
	</script>

默认效果图：
在这里插入图片描述
效果图：
在这里插入图片描述

1.2.1.2 V-Show

<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
           <h3>条件指令 （if elseif else)</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="score">E</div>
				</li>
				<li>
					<h3>V——Show</h3>
					<input type="text" v-model="show" />
					<div v-show="show">输入了内容，出来吧</div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					score:88,
					show:null
				}
			}
		});
	</script>

默认效果：
在这里插入图片描述
改变效果：
在这里插入图片描述

本质原因：style样式

在这里插入图片描述
与if条件的差别：

if是根本就不存在这个代码，
这个是代码存在但是被隐藏了

1.2.1.3 V-for

	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
           <h3>条件指令 （if elseif else)</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="score">E</div>
				</li>
				<li>
					<h3>V——Show</h3>
					<input type="text" v-model="show" />
					<div v-show="show">输入了内容，出来吧</div>
				</li>
				<li>
					<h3>V——for</h3>
					<div v-for="item,index in arr">
						{{item}},{{index}}
					</div>
					<div v-for="item,index in objArr">
						{{item}},{{index}}<br />
						{{item.name}},{{index}}
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					score:88,
					show:null,
					arr:[14,7,9,21],/* 数组 */
					objArr:[{id:'s001',name:'狗蛋'},{id:'s002',name:'哇哈'},{id:'s003',name:'曦大厦'}]/* json数组 */
				}
			}
		});
	</script>

效果图：
在这里插入图片描述
1.2.1.4 动态参数调用

<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
           <h3>条件指令 （if elseif else)</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="score">E</div>
				</li>
				<li>
					<h3>V——Show</h3>
					<input type="text" v-model="show" />
					<div v-show="show">输入了内容，出来吧</div>
				</li>
				<li>
					<h3>V——for</h3>
					<div v-for="item,index in arr">
						{{item}},{{index}}
					</div>
					<div v-for="item,index in objArr">
						{{item}},{{index}}<br />
						{{item.name}},{{index}}
					</div>
				</li>
				<li>
					<h3>动态参数</h3>
					<input type="text" v-model="evname" />
					
					<button v-on:[evname]="xxx">点我</button>
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello only老k',
					score:88,
					show:null,
					arr:[14,7,9,21],/* 数组 */
					objArr:[{id:'s001',name:'狗蛋'},{id:'s002',name:'哇哈'},{id:'s003',name:'曦大厦'}],/* json数组 */
			    evname:'click'
				}
			}
			,methods:{
				xxx(){
					console.log('xxx方法执行');
				}
			}
		});
	</script>

效果图在控制台看：

以及可以更改成为任何在v-on:方法中出现的方法

1.3 过滤器

1.3.1局部过滤器

	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}
					{{msg | a}}
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello,only老k'
				}
			},
			filters:{
				a(v){
					
					console.log(v);
					return v.substring(4)
				}
			}
		});
	</script>

效果图：
在这里插入图片描述

1.3.2 局部过滤器串联

	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}
					{{msg | a}}
				</li>
				<li>
					<h3>局部过滤器可串联  拿到only老k</h3>
					{{msg}}
					{{msg | a | b}}
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello,only老k'
				}
			},
			filters:{
				a(v){
					
					console.log(v);
					return v.substring(4)
				},
				b(v){
					return v.substring(2,8)
				}
			}
		});
	</script>

效果图：
在这里插入图片描述

1.3.3 全局过滤器

<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}
					{{msg | a}}
				</li>
				<li>
					<h3>局部过滤器可串联  拿到only老k</h3>
					{{msg}}
					{{msg | a | b}}
				</li>
				<li>
					<h3>全局过滤器 拿到only老k</h3>
					{{msg | c}}
				</li>
			</ul>
		</div>
	</body>
	<script>
		Vue.filter('c',function(v){
			 return v.substring(6,12)
		})
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello,only老k'
				}
			},
			filters:{
				a(v){
					
					console.log(v);
					return v.substring(4)
				},
				b(v){
					return v.substring(2,8)
				}
			}
		});
	</script>

效果图：
在这里插入图片描述

1.4 计算属性以及监听属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>计算属性以及监听事件</title>
	</head>
	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					数量：<input type="text" v-model="num" />
				    单价：<input type="text" v-model="price" />
				    计算总价：{{total}}
				</li>
				<li>
					<h3>监听属性 单位换算</h3>
					km:<input type="text" v-model="km" />
					m:<input type="text" v-model="m" />
				</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					num:1,
					price:16,
					km:1,
					m:1000
				};
			},
			computed:{
				//在计算属性中在定义的时候,是可以获取到vue实例中的任何变量
				total(){
					return parseInt(this.num) * parseInt(this.price) 
				}
			},
			watch:{
				km(v){
					this.m=v*1000;
				},
				m(v){
					this.km=v/1000;
				}
			}
		});
	</script>
</html>

效果图：
在这里插入图片描述

简单购物车实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue简单购物车</title>
	</head>
	<body>
		<!-- 定于vue实例的挂载边界 -->
		<div id="app">
			<ul>
				<li>
              <h3>简单页面购物车</h3>
							<h5>苹果数量默认1  苹果单价默认10</h5>
							<h5>橘子数量默认2  橘子单价默认20</h5>
				</li>
				<li>
					苹果数量：<input type="text" v-model="pgnum" />
					苹果单价：<input type="text" v-model="pgprice" />
					苹果总价：{{pgtotal}}
				</li>
				<li>
					橘子数量：<input type="text" v-model="jznum" />
					橘子单价：<input type="text" v-model="jzprice" />
					橘子总价：{{jztotal}}
	        </li>
					<li>
						全部：{{money}} 元
						</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
				pgnum:1,
				pgprice:10,
				jznum:2,
				jzprice:20
				}
			},
			computed:{
				pgtotal(){
					return parseInt(this.pgnum) * parseInt(this.pgprice) 
				},
				jztotal(){
					return parseInt(this.jznum) * parseInt(this.jzprice) 
				}	,
				money(){
						return this.pgtotal+this.jztotal;
				}
			}
		});
	</script>
</html>

效果图;
在这里插入图片描述

only老K
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue之模块语法
weixin_44222931的博客
09-18 156
1. 模板语法 1.1 插值 <body> <div id="app"> <ul> <li> <h3>文本</h3> {{msg}} </li> </ul> </div&g...
Vue模块语法
weixin_35988035的博客
12-20 265
Vue模块语法 文章目录Vue模块语法@[toc]一、插值(1) ``{{ }}`` 文本插值(2) ``v-html`` 输出 html 代码(3) ``v-bind`` 绑定属性二、用户输入(1) ``v-model`` 双向数据绑定(1.1) ``v-model`` 基础(1.2) ``v-model``原理(1.3) ``v-model`` 缺点的解决1.v-model 用在 input...
JZ DAY2总结
Sheep*的博客
01-22 237
DAY3DAY3DAY3 T1T1T1 学习神技学习神技学习神技 王仙女打开了《葵花宝典》，第一页上赫然写道：欲练此功，必先学习上古神技：等比数列求和！ 王仙女心想：等比数列是什么**东西？难道我的修仙之路要止步于此了吗？ 还好，天无绝人之路，在宝典的第二页上，写着密密麻麻的等比数列的介绍： 等比数列为这样一个数列，它的首项为a_1,第i项为a_1*q^(i-1)，其中q为此等比数列的公比。等比数...
JZ_app.zip
05-19
纯原生项目，全部代码 首页模块: :账单列表显示,以天为单位分块显示,账单的头显示本月支出和收入,可以按年月筛选具体月份的数据,其次还增加了显示当前用户账单的总资产.列表左滑可进行编辑和删除操作,点击账单则是弹窗显示账单详情. 图表模块 图表可视化统计分析账单数据,年度收入支出对比的双曲线,饼图的话按占比显示账单数据,可选择时间范围查看.整个模块还能进行时间筛选. 记账模块 记账模块分支出和收入,账单录入分类.金钱.时间.备注.也阔以进行账单分类的添加 扩展模块 这个模块仅仅是为了让APP不显得那么单调,增加了多个分类的新闻查看,列表-详情 我的模块 用户信息修改,登录(方便账单的线上线下同步),账单以excle形式导出以及账单分类的管理`````
Java NIO（三）通道Channel
少女秘封俱乐部
03-12 2万+
1.使用RandomAccessFile.getChannel()实现文件复制 public void fileCopy() throws IOException{ RandomAccessFile source = new RandomAccessFile("D:" + File.separator + "x.txt", "r"); RandomAcc...
Golang之Channel
tangyaya8的博客
03-14 255
什么是coroutines 协程是计算机程序的一类组件，推广了非抢先多任务的子程序，允许执行被挂起与被恢复。相对子例程而言，协程更为一般和灵活，但在实践中使用没有子例程那样广泛。协程源自Simula和Modula-2语言，但也有其他语言支持。协程更适合于用来实现彼此熟悉的程序组件，如合作式多任务、异常处理、事件循环、迭代器、无限列表和管道。 简单的说协程就是比线程更小的执行单位，但是线程是CPU调...
vue-multipage vue 模块化开发打包
11-23
3. **公共模块共享**：虽然页面是分离的，但Vue-multipage 仍然允许你定义公共模块，如Vue实例、全局组件、样式等，这些公共模块会被所有页面共享，减少重复代码。 4. **插件支持**：Webpack 插件体系强大，Vue-...
vue语法.rar
08-16
二、Vue的数据驱动---mvvm模式的介绍 Vue是一款轻量级的渐进式前端框架，主要功能： 1、模板渲染/数据同步 2、组件化、模块化 3、扩展功能：路由 等等 Vue资源： 中文官网：https://cn.vuejs.org/ Github源码...
vue3.0基础语法的练习笔记
02-07
Vue 3.0 基础语法实践笔记 Vue 3.0 是一个革命性的前端框架，提供了许多新的语法和功能，本笔记将对 Vue 3.0 的基础语法进行实践和总结。 Vite Vite 是 Vue 3.0 的一个新的开发服务器，取代了传统的 Webpack。...
vue模块移动组件的实现示例
10-15
Vue模块移动组件是一种允许用户通过鼠标操作将特定模块在页面中自由移动的交互设计，常见于需要自定义布局的应用场景，如简历编辑器。在Vue框架中实现这种功能需要掌握以下核心知识点： 1. **动态组件（Dynamic ...
Vue小模块之功能全面的表格
06-08
Vue小模块之功能全面的表格，是一个基于Vue.js框架实现的高效、灵活的表格组件，旨在提供丰富的数据展示和操作功能。这个模块充分利用了Vue.js的响应式特性，结合Element UI库，实现了增删改查、Excel导入导出等多种...
JZ 链表有关
越来越棒鸭
06-17 409
文章目录1. JZ 3 从尾到头打印链表2. JZ 14 链表中倒数第k个结点3. JZ 15 反转链表4. JZ 16 合并两个排序的列表5. JZ 25 复杂链表的复制6. JZ 26 二叉搜索树与双向链表7. JZ 36 两个链表的第一个公共结点8. JZ 55 链表中环的入口结点9. JZ 56 删除链表中重复的结点 1. JZ 3 从尾到头打印链表 /*function ListNode(x){ this.val = x; this.next = null; }*/ //list
关于golang的channel
书山有路勤为径
09-01 3722
go语言中的goroutine通道通信依靠的是channle 下面我们来认识一下channle的语法 func chanDemo(){ var c chan int //定义变量c为chan类型 并且chan接收数据类型是int c = make(chan int) //初始化变量c 只有初始化后才可以使用 go func(){ //一般来讲channel与goroutine配合使用...
Java NIO 通道（Channel） 学习笔记
热门推荐
YuZongTao
10-16 12万+
 一、通道（Channel）：用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据，因此需要配合缓冲区进行传输。    二、通道的主要实现类      java.nio.channels.Channel 接口：          |--FileChannel          |--SocketChannel          |--Serve...
golang ---------- channel 通道（二 等待任务结束）
田园园野的博客
04-22 4584
1、一个任务结束后，才执行下一个任务type channell struct { in chan int done chan bool } func workGo(id int,c chan int,done chan bool) { for a := range c{ fmt.Printf("work %d received %d\n",id,a) done &lt;- true...
今天开始学习struts2
jz_crc的专栏
04-14 427
   1、下载 struts-2.0.14-all.zip 下载地址就不多少了 自己到官方网站去下；        2、新建web工程 名叫 struts2  导入如下jar包       3、修改 web.xml 文件 如下 ： xmlns="http://java.sun.com/xml/ns/j2ee"  xmlns:xsi="http://www.w3.org/20
vue 引入腾讯地图实现多边形绘制功能
Kamikorosu的博客
07-27 2757
vue 接入腾讯地图实现多边形绘制功能
ES6（一）
only老K的博客 qq:1025271924
11-27 984
博客目标let和const关键字let特点const特点对象定义简写模板字符串箭头函数简单来一手 let和const关键字 let特点 1.在块级作用域里有效（比如循环遍历内部就可以用let定义变量） { let a='https://blog.csdn.net/weixin_44255950'; var b='only老K'; console.log(b); ...
vue2和vue3的语法
最新发布
05-20
Vue 2和Vue 3的语法有一些区别，下面是一些主要的区别： ...Vue 3对性能进行了优化，比如使用了模块化编译，提高了渲染速度等。 总的来说，Vue 3相比Vue 2在语法上更加灵活，性能更加优化，但需要学习新的语法和API。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值