vue的基本语法

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

1，插值

1.1 简单的插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
		        {{ msg }}
		 </div>
		<script>
			const vm = new Vue({
		            el:'#app',
		            data:{
		                msg:'hello Vue'
		            }
		        })
		</script>

	</body>
</html>

 

1.2 进行文本转义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
			<div id="app">
				<p v-html="msg">html文本转义</p>
		 </div>
		<script>
			const vm = new Vue({
		            el:'#app',
		            data:{
		                msg:'<span style="color:red;">hello Vue...</span>',	
		            }
		        })
		</script>
	</body>
</html>

1.3 v-bind指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
				<input type="" name="" id="" value="msg" /><br>
				<input type="" name="" id="" v-bind:value="msg" /><br>
				<input type="" name="" id="" :value="msg" /><br>
		 </div>
		<script>
			const vm = new Vue({
		            el:'#app',
		            data:{
		                msg:'Hello Vue',	
		            }
		        })
		</script>

	</body>
</html>

 

 我们可以看到绑定v-bind之后显示的就是msg的value值 并且v-bind=“ ：” 它们的效果是一样的。

1.4 vue中的js支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>Vue中对js的支持</p>
			<p>{{ str }}</p>
			<p>{{ str.substring(0,5) }}</p>
			<p>{{ num+1 }}</p>
			<p>{{ flag?"yes":"no" }}</p>
		 </div>
		<script>
			const vm = new Vue({
		            el:'#app',
		            data:{
		                str:'HelloVue',
						num:10,
						flag:false
		            }
		        })
		</script>
	</body>
</html>

 如图这些函数和判断都可以使用

2，指令

2.1 v-if,v-else-if,v-else 的使用

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素，他们只能是兄弟元素，

v-else-if上一个兄弟元素必须是v-if，v-else上一个兄弟元素必须是v-if或者是v-else-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
	 	<div id="app">
	 		<input v-model="score" />
		    <span v-if="score > 90">优秀</span>
		    <span v-else-if="score > 80">中等</span>
		    <span v-else-if="score > 70">良好</span>
		    <span v-else-if="score > 60">合格</span>
		    <span v-else="">不合格</span>
		    
		     <!--<span v-if="score > 100">不存在</span>-->
  		</div>
  <script>
    const app = new Vue({
      el: '#app',
      data() {
      	return{
      		
              score: 95
      	}
      }
    })
  </script>
	</body>
</html>

 

2.2 v-show控制元素的隐藏和显示

 v-if是真的不存在
 v-show是存在但是被css样式隐藏了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
	 	<div id="app">
	 		<input v-model="score" />
		    <span v-if="score > 90">优秀</span>
		    <span v-else-if="score > 80">中等</span>
		    <span v-else-if="score > 70">良好</span>
		    <span v-else-if="score > 60">合格</span>
		    <span v-else="">不合格</span>
		    
		     <span v-if="score > 100">不存在</span>
		     <p>v-show</p>
		     <span v-show="score>100">不存在</span>
  		</div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data() {
      	return{
      		
              score: 95
      	}
      }
    })
  </script>
	</body>
</html>

 2.3 v-for 循环遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
	 	<div id="app">
		     <p>v-for</p>
		     <div v-for="n in arr">
		     	{{n}}<br>
		     </div>
  		</div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data() {
      	return{
              arr:['吃饭','睡觉','打豆豆'],
              likes:[
              {id:1,name:'洗头'},
              {id:2,name:'洗澡'},
              {id:3,name:'洗衣服'}
              ]
      	}
      }
    })
  </script>
	</body>
</html>

 2.4 v-on 绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
	 	<div id="app">
	 	
		     <p>v-on</p>
		     <button type="button" v-on:click="do_spa">点我</button>
		      <button type="button" @click="do_spa">点我</button>
  		</div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      methods:{
      	do_spa(){
      		alert('叫了一个spa服务')
      	}
      }
    })
  </script>
	</body>
</html>

添加一个魔法按钮

可以通过input内输入特定值click才可以触发这个魔法按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
	 	<div id="app">	 		
		     <p>v-on</p>
		     <button type="button" v-on:click="do_spa">点我</button>
		      <button type="button" @click="do_spa">点我</button>
		      <br />
		      <input v-model="magic"><br />
			<button type="button" v-on:[magic]="do_spa">魔法按钮</button>

  		</div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data(){
					return{
							magic:'click'
					}
				},

      methods:{
      	do_spa(){
      		alert('叫了一个spa服务')
      	}
      }
    })
  </script>
	</body>
</html>

 

 

3，过滤器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="date.js"></script>
	</head>
	<body>
		<div id="app">
			<p>基本过滤器</p>
			{{ str }}<br>
			
			<p>调用过滤器A</p>
			{{ str|filterA }}<br>
			
			<p>过滤器串联</p>
			{{ str|filterA|filterB }}<br>
			
			<p>过滤器传参</p>
			{{ str|filterC(0,8) }}<br>
			{{ str|filterC(0,4) }}<br>
			
					
		</div>
		<script>
		
		Vue.filter('format',function(v){
			return fmtDate(v,'yyyy-MM-dd hh:mm:ss')
		})
		const vm = new Vue({
			el:'#app',
			filters:{
				filterA(v){
					return v.substring(0,5);
				},
				filterB(v){	
						return v.substring(1,2)
				},
				filterC(v,start,end){
					return v.substring(start,end)
				}
			},
			data:{
				str:'HelloVueVue',
				curtime: new Date()
			}
		})
		</script>
	</body>
</html>

 

4，计算属性和监听属性

4.1 监听属性是双向影响 改变一方的值另一方也会随之改变

4.2 计算属性 适合用于购物车计算 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>监听属性</p>
			m:<input v-model="m" />
			km:<input v-model="km" />
			
			<p>计算属性</p>
			<table>
				<tr>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td><input v-model="danjia"/></td>
					<td><input v-model="num"/></td>
					<td>{{ total }}</td>
				</tr>
			</table>
		</div>
		<script>
		const vm = new Vue({
			el:'#app',
			data:{
				m:1000,
				km:1,
				danjia:2,
				num:10
			},
			watch:{
				m:function(value){
					this.km = parseInt(value)/1000;
				},
				km:function(value){
					this.m=parseInt(value)*1000;
				}
			},
			computed:{
				total:function(){
					return this.danjia*this.num;
				}
				
			}
		})
		</script>
	</body>
</html>

 

嘎嘎西红柿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基本语法讲解.pdf
05-11
Vue 基本语法讲解 一、 Vue 项目重点概念介绍 1. 单页面应用程序：单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在...
vue基本语法综合案例
08-09
vue基本语法综合案例
vue 简单语法
monica12的专栏
08-06 487
参考文档：https://vuejs.org/v2/guide/#Getting-Started 问题一、既然已经有javascript,那么是不是也像jquery一样，用一些简单的符号来表示 javascript？ 问题二、是不是直接在html文件直接引用jquery.js? 一、也是直接引用vue.js script src="https://unpkg.com/v
Vue的基本语法
j20020227的博客
03-17 7044
1、Vue 基本语法 在标签中绑定 v-bind ：（要绑定的属性,也可以自定义声明的变量）="(要绑定的属性值)" 动态绑定数据。 如以下使用 注：这里的message是声明的变量 <span v-bind:message="message">{{message}}</span> <span v-bind:style="message" >{{message}}</span> <span v-bind:t.
vue基础语法
MakChiKin
02-02 821
模板语法 Mustache语法:{{msg}} html赋值: v-html = "" 绑定属性 v-bind:id="" 表达式: {{OK ? 'white':'black'}} 文本赋值: v-text="" 指令 v-if="" 过滤器：{{message | capitalize}}和 v-bind:id = "rawld | formatld" Class和
vue语法大全
weixin_43802883的博客
08-17 782
vue指令大全 1.为原生属性绑定数据 v-bind:属性名=“数据名”/：属性名=“数据名” 如： <a v-bind:href="url">或者<a :href="url"> 2.为标签绑定事件 v-on:事件名=“要执行的少量代码/methods中的函数名/methods中的函数名（实参）”或者语法糖@代表v-on: <template> <div> <p>你点击了这么多次{{count}}</p> <!--
vue.js基本语法
bird_tp的博客
11-08 2435
Vue.js的指令是以v-开头的 1.v-if: v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下： v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。 2.v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它...
180315_VueTest:Vue基本语法测试
04-29
1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue...
vue基础语法练习源码
12-09
通过实际操作和练习，你可以快速掌握Vue的基本语法，并逐步提升到更高级的开发技巧。 总之，Vue.js的这些基础知识对于任何想要进入前端开发领域的学习者来说都是至关重要的。过滤器、插件和列表渲染只是Vue众多功能...
vue2.0基本语法思维脑图1，一起来学vue
01-14
vue2.0基本语法思维脑图1，一起来学vue
Vue语法，看这一篇就够了
热门推荐
不停
02-11 1万+
文章目录一 初识Vue二 Vue模板语法1. Mustache语法(双大括号)2. v-once（静态数据）3. v-html（添加标签）4. v-text（添加文本）5. v-pre（禁止解析）6. v-cloak（遮挡）7. v-pre（禁止解析）8. v-bind（:）（动态绑定属性）9. v-on（@）（监听事件）10. v-if v-else-if v-else11. v-show12....
vue模板语法及指令
高山景行，一尘不染
08-22 1741
  模板语法： 以下写法是正确的写法 &lt;span&gt;{{ msg }}&lt;/span&gt; &lt;div&gt; //一元运算符 &lt;p&gt;hello {{`world + '!'`}} &lt;/p&gt; //模板字符串 &lt;p&gt;{{`hello${world}!`}} &lt;/p&gt; //三元运算符
Vue 的这些基本语法，小白必备！！
林夕
04-26 2650
单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在一个HTML页面中，仅在该HTML页面初始化时加载相应的资源（HTML、JavaScript、CSS）。一旦页面加载完成了，单页面应用程序不会因为用户的操作而进行页面间的重新加载或跳转。因为只有一个 html 页面，不需要页面间的跳转，而是利用JavaScript动态的变换HTML的内容，从而实现页面与用户的交互。用于解析标签体内容。{{xxx}}xxx是。
vue基本语法总结大全
最新发布
xueluoyouying的博客
02-04 2105
vue基本语法总结
vue基本语法
qq_62087717的博客
04-16 3732
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中...（扩展运算符）的作用
nalanxiaoxiao2011的博客
10-07 2853
vue 扩展运算符 ... 特殊运算符
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9388
vue基础语法、尚硅谷、欢迎交流
Vue基础语法总结大全
qq_38577700的博客
11-26 1516
data属性 - v-html，v-text 采用{{}}语法==>插值运算 　　　　v-html：它可以加标签，它会解析成html 　　　　v-text：不能加标签，如果加了，它会当作字符串展示出来 例子： <div id="app"> <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题，可以显示++++ -...
Vue基础语法介绍
qq_42697338的博客
01-01 1万+
什么是Vue？ Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。 它的作者是：尤雨溪 vue对比ang...
vue基本语法思维导图
08-26
请注意，以上只是Vue基本语法的思维导图，具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [vue（框架 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值