Vue之模块语法

最新推荐文章于 2024-02-04 14:52:21 发布
最新推荐文章于 2024-02-04 14:52:21 发布
阅读量157 收藏
点赞数
文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44222931/article/details/100976484
版权

1. 模板语法

1.1 插值

	<body>
   	<div id="app">
   		<ul>
   			<li>
                  <h3>文本</h3>
   		     		{{msg}}
   			</li>  
   		</ul>
   	</div>
   </body>
   <script>
   	new Vue({
   		el: "#app",
   		data() {
   			return {
   				msg: '冲冲冲'
   			}
   		}
   	});
   </script>

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

1.1.2 html

<body>
		<!-- vue所管理的边界 -->	
		<div id="app">
		 <ul>
	        <li>
          <h3>文本</h3>
			{{msg}}
		    </li>
		  <li>
		  <h3>html片段</h3>
		  {{htmlStr}}
		  <div v-html="htmlStr"></div>
		  </li>
	     </ul>
		</div>
	</body>
<script type="text/javascript">
		
		new Vue({
			el:'#app',
			data(){
				
				return{
					msg:'冲冲冲',
					htmlStr:'<span style="color:red;">要显示的片段</span>'
				}
			}
  		})
	</script>

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

1.1.3 属性

<body>
		<!-- vue所管理的边界 -->	
		<div id="app">
		 <ul>
	        <li>
          <h3>文本</h3>
			{{msg}}
		    </li>
		  <li>
		  <h3>html片段</h3>
		  {{htmlStr}}
		  <div v-html="htmlStr"></div>

		  </li>
		  <li>
		  <h3>属性</h3>
		  
              <input name="hobby" value="篮球" />
			  <input name="hobby" v-bind:value="a"/>
			
			
		  </li>
	     </ul>
		</div>
	</body>
	<script type="text/javascript">
		
		new Vue({
			el:'#app',
			data(){
				
				return{
					msg:'冲冲冲',
					htmlStr:'<span style="color:red;">要显示的片段</span>',
					a:'足球2',
				}
			}
  		})
	</script>

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

1.1.4 表达式

<body>
		<!-- vue所管理的边界 -->	
		<div id="app">
		 <ul>
	        <li>
          <h3>文本</h3>
			{{msg}}
		    </li>
		  <li>
		  <h3>html片段</h3>
		  {{htmlStr}}
		  </li>
		  <li>
		  <h3>属性</h3>
              <input name="hobby" value="篮球" />
			  <input name="hobby" v-bind:value="a"/>
		  </li>
		  <li>
		  <h3>表达式</h3>
		  	 {{str.substr(0,6).toUpperCase()}}
             {{ number + 1 }}
             {{ ok ? 'YES' : 'NO' }}
          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
		  </li>
	     </ul>
		</div>
	</body>
	<script type="text/javascript">
		
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'冲冲冲',
					htmlStr:'<span style="color:red;">要显示的片段</span>',
					a:'足球2',
					str:'https://www.baidu.com',
					number:7,
					ok:false,
					id:7
					
				}
			}
  		})
		
		
	</script>

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

1.2 指令

1.2.1 核心指令

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

<body>
		<!-- vue所管理的边界 -->	
		<div id="app">
		 <ul>
	        <li>
          <h3>条件指令 if,elseif,else</h3>
          {{msg}}
					<div v-if="score > 90"></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="">E</div>
		   </li>
	     </ul>
		</div>
</body>
<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return
                msg:'冲冲冲',
                score:80
                	}
			}
  		})
		
		
	</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>
				 </li>
	     </ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
                score:80,
								show:null,
									}
			}
  		})
		
		
	</script>

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

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>
		 	<li>
		 	<h3>循环指令 v-for</h3>
	   	<!-- 有一组复选框，想要获取复选框被选中的值 -->
			<div v-for="item in hobby">
				<input type="checkbox" name="hobby" :value="item.id"/>{{item.name}}
			</div>
		 </li>
	     </ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
                score:80,
								show:null,
								hobby:[{
									id:1,
									name:'篮球'
									},
									{
										id:2,
										name:'RAP'
									},{
										id:3,
										name:'draw'
									}],
									checkedVals:[]
				}
			}
  		})
		
		
	</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>
		 	<li>
		 	<h3>循环指令 v-for</h3>
	   	<!-- 有一组复选框，想要获取复选框被选中的值 -->
			<div v-for="item in hobby">
				<input type="checkbox" name="hobby" v-model="checked":value="item.id"/>{{item.name}}
			</div>
		 </li>
		 <input v-model="checked" />
					<!-- 下拉框 --><h5>下拉框</h5>
					<select name="likes" v-model="selected">
						<option v-for="item in hobby" :value="item.id">{{item.name}}</option>
					</select>
					<input v-model="selected" />
				</li>
		 <li>
					<h3>动态参数</h3>
					<input type="text" v-model="evname" />
					
					<button v-on:[evname]="xxx">点我</button>
				</li>
	     </ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
                score:80,
								show:null,
								hobby:[{id:1,name:'篮球'},{id:2,name:'RAP'},{id:3,name:'draw'}],
									checked:[],
									selected:[],
									evname:'click'
									
				}
			},methods:{
				xxx(){
					alert('click')
		  	}
			}
  		})
		
		
	</script>

在这里插入图片描述

过滤器

全局过滤器

Vue.filter('filterName', function (value) {
 // value 表示要过滤的内容
});
局部过滤器
new Vue({
   filters:{'filterName':function(value){}}
});

 vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 -->
{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数 
注2：过滤器可以串联     
    {{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数： 
     {{ message | filterA('arg1', arg2) }}

注4：js定义一个类
     function Stu(){};
     Stu.prototype.add(a,b){};//添加一个新的实例方法
 	Stu.update(a,b){};//添加一个新的类方法

效果

在这里插入图片描述

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>计算属性及监听属性</title>
	</head>
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h2>计算属性</h2>
					苹果单价：<input v-model="price" /><br />
					购买的数量：<input v-model="num" /><br />
					小计：{{total}}
				</li>
				<li>
					<h2>监听属性</h2>
					km：<input v-model="km" /><br />
					m：<input v-model="m" /><br />
					
				</li>
				<li>
					<h2>简单的购物车模拟</h2>
					苹果单价：<input v-model="price1" />
					购买的数量：<input v-model="num1" />
					小计：{{ptotal1}}<br />
					西红柿单价：<input v-model="price2" />
					购买的数量：<input v-model="num2" />
					小计：{{xtotal2}}<br>
					总计:{{sum}}
				</li>
				

			</ul>
		</div>

		<script>
			//通过vue实例渲染vue所管理的边界
			new Vue({
				el: '#app',
				data() {
					return {
						price:6,
						num:10,
						km:1,
						m:1000,
						price1:10,
						num1:1,
						price2:20,
						num2:1,
					}
				},
				computed:{
					total(){
						return this.price*this.num;
					},
					ptotal1(){
						return this.price1*this.num1;
					},
					xtotal2(){
						return this.price2*this.num2;
					},
					sum(){
						return this.ptotal1+this.xtotal2;
					}
					
				}
			});
		</script>

	</body>
</html>

在这里插入图片描述

Sirm3998
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue模板语法（上）
xyy_0517的博客
11-01 218
一，插值 二，指令（指的是带有“v-”前缀的特殊属性） 三，过滤器 1，全局过滤器 2，局部过滤器 3，串联 4，过滤器传参 四，计算属性&监听属性 两者区别： ①、监听属性必须在变量中定义 ②、计算属性是变量当方面影响另一方面，监听属性是相互影响 ...
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...
vue【v-if 判断案例】
weixin_45044349的博客
11-29 1681
vue中条件判断 <template> <div class="test-container"> <h1 v-if="score>=80">优</h1> <h1 v-else-if="score>=60">良</h1> <h3 v-else>差</h3> </div> </template> <script> export default
用vue的方法判断是否通过考试---60分通过
qq_43733682的博客
05-30 1552
这个主要是Vue比较简单的方法去判断你的分数是否通过了考试 这个功能是特别简单。基础的，后续有了更好的方法和更美观的改进，会更新的 实现的效果是 当分数大于等于60的时候 当分数小于60分的时候 他的vue核心代码如下 <template> <div id="app"> <div class="container"> <p v-if="score!==''">是否通过考试 ：{{isPassed()?'恭喜你，通过了考试':'很
[Vue]---Vue的模块语法知识点（一）
IT_qslong的博客
11-01 278
文章目录Vue模块语法模块语法的概述如何理解前端渲染？前端渲染方式指令v-clock指令用法数据绑定指令数据响应式双向数据绑定事件绑定Vue如何处理事件？事件函数的调用方式事件函数参数传递事件修饰符按键修饰符自定义按键事件修饰符 Vue模块语法 模块语法的概述 如何理解前端渲染？ 把数据填充到HTML标签中 前端渲染方式 原生js拼接字符串 基本上就是将数据已字符串的方式拼接到HTML标签中 缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来 前端模块引擎 优点：大
vue-multipage vue 模块化开发打包
11-23
7. **预编译语言支持**：Vue-multipage 集成了Babel，使得可以使用ES6+的语法编写代码，同时支持其他预编译语言如Pug（HTML模板引擎）和Sass/LESS（CSS预处理器）。 在实际使用Vue-multipage 开发时，你需要先安装...
vue语法.rar
08-16
2、组件化、模块化 3、扩展功能：路由 等等 Vue资源： 中文官网：https://cn.vuejs.org/ Github源码：https://github.com/vuejs/vue MVVM: M：Model数据模型 负责数据存储 V：View视图 负责页面的显示 VM：...
vue3.0基础语法的练习笔记
02-07
Vue 3.0 基础语法实践笔记 Vue 3.0 是一个革命性的前端框架，提供了许多新的语法和功能，本笔记将对 Vue 3.0 的基础语法进行实践和总结。 Vite Vite 是 Vue 3.0 的一个新的开发服务器，取代了传统的 Webpack。...
从Vue基础语法入手
08-10
Vue的核心概念之一是数据绑定。通过`v-bind`指令，你可以将HTML元素的属性与Vue实例的数据对象中的属性关联起来。例如，`v-bind:href`可以动态改变链接地址。`v-model`则用于双向数据绑定，常用于表单元素，如输入框...
Vue小模块之功能全面的表格
06-08
Vue小模块之功能全面的表格，是一个基于Vue.js框架实现的高效、灵活的表格组件，旨在提供丰富的数据展示和操作功能。这个模块充分利用了Vue.js的响应式特性，结合Element UI库，实现了增删改查、Excel导入导出等多种...
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9294
vue基础语法、尚硅谷、欢迎交流
vue基本语法
qq_62087717的博客
04-16 3695
1、插值表达式 {{ 、、、 }} 大括号中可以写变量名，对象.属性等，还可以写入js语句 2.变量显示在界面上 v-text： v-html： 两者的区别v-text把内容当纯文本处理，v-html遇到html的标签会当html代码处理 如： v-text: v-html: 3.v-moldel实现双向动态绑定 data:{ username: “” ​ } 当username改变时，页面上的username也会动态改变 页面上的username改变时，data中的us
Vue的基本语法
j20020227的博客
03-17 7033
1、Vue 基本语法 在标签中绑定 v-bind ：（要绑定的属性,也可以自定义声明的变量）="(要绑定的属性值)" 动态绑定数据。 如以下使用 注：这里的message是声明的变量 <span v-bind:message="message">{{message}}</span> <span v-bind:style="message" >{{message}}</span> <span v-bind:t.
Vue 的这些基本语法，小白必备！！
林夕
04-26 2625
单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在一个HTML页面中，仅在该HTML页面初始化时加载相应的资源（HTML、JavaScript、CSS）。一旦页面加载完成了，单页面应用程序不会因为用户的操作而进行页面间的重新加载或跳转。因为只有一个 html 页面，不需要页面间的跳转，而是利用JavaScript动态的变换HTML的内容，从而实现页面与用户的交互。用于解析标签体内容。{{xxx}}xxx是。
vue核心语法(超详细)
小罗的博客
03-09 6516
全称是Vue.js或者Vuejs。 基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型。
Vue基础一文速通（基础语法篇）
qq_45799465的博客
03-17 2419
插值表达式 v-text v-html v-cloak v-once v-bind v-on 语法v-on的修饰符 v-on的事件对象event v-on的按键修饰符 ​v-model v-for v-if v-show 自定义指令 computed计算属性 watch监听属性 filter过滤器
vue基本语法总结大全
最新发布
xueluoyouying的博客
02-04 2008
vue基本语法总结
vue export default语法
09-08
Vue中的`export default`语法用于导出一个默认的模块。 在Vue组件中，我们可以使用`export default`来导出一个Vue实例，使其可以在其他文件中使用。例如： ```javascript // MyComponent.vue <!-- Vue组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值