Vue基础语法 一

已于 2022-05-04 17:19:48 修改
阅读量143 收藏
点赞数
文章标签： vue.js html 前端
于 2022-05-04 17:15:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59453307/article/details/124556733
版权

目录

 插值

    文本  

​    html

​    属性         

​    表达式   

 指令

v-show

v-for

参数

v-model

属性计算

过滤器

全局过滤器

局部过滤器

监听属性

 插值


    文本  

        数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>1.插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
                    msg:'hello vue!!!',
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

结果：


          
    html
          使用v-html指令用于输出html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>1.插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
                    <li>html</li>
				<span v-html="html"></span>
				</span>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
                    msg:'hello vue!!!',
                    html:'<input type="text value="2"/>',
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

结果：


    属性
          HTML属性中的值应使用v-bind指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>1.插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
                    <li>html</li>
				<span v-html="html"></span>
                <li>v-bind绑值</li>
				<!-- 
				 1)v-model:数据双向绑定
				 2)v-bind:绑定标签属性值  例如：v-bind:class/v-bind:id...
				 -->
				<span v-bind:class="cls">
					啊吧啊吧啊吧啊吧
				</span>
				</span>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
                    msg:'hello vue!!!',
                    html:'<input type="text value="2"/>',
                    cls:'cl',
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

结果:


    表达式
          Vue提供了完全的JavaScript表达式支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>1.插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
                    <li>html</li>
				<span v-html="html"></span>
                <li>v-bind绑值</li>
				<!-- 
				 1)v-model:数据双向绑定
				 2)v-bind:绑定标签属性值  例如：v-bind:class/v-bind:id...
				 -->
				<span v-bind:class="cls">
					啊吧啊吧啊吧啊吧
				</span>
				<li>表达式</li>
				<span>
					 {{msg.substr(0,6).toUpperCase()}}
					 {{ number + 1 }}
					 {{ ok ? 'YES' : 'NO' }}
					 <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</span>
				</span>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
                    msg:'hello vue!!!',
                    html:'<input type="text value="2"/>',
                    cls:'cl',
					number:'10',
					ok:true,
					id:1011
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

结果：
          

 指令

        指的是带有“v-”前缀的特殊属性

            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>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if/v-else-if/v-else</li>
				<span v-if="sex=='boy'">
					男
				</span>
				<span v-else-if="sex=='girl'">
					女
				</span>
				<span v-else>
					妖
				</span>
				
			</ol>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
					sex:'girl',
					
				},
				methods:{
					
				}
			})
		</script>

	</body>
</html>

结果： 

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if/v-else-if/v-else</li>
				<span v-if="sex=='boy'">
					男
				</span>
				<span v-else-if="sex=='girl'">
					女
				</span>
				<span v-else>
					妖
				</span>
				<li>v-show和v-model</li>
				<div>
					<input type="checkbox" v-model="flag"/>已阅读该协议
					<div v-show="flag">
						123456789
					</div>
			</ol>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
					sex:'girl',
					flag:true,
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

 结果：如果√取消就不会显示123456789

 v-for：类似JS的遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if/v-else-if/v-else</li>
				<span v-if="sex=='boy'">
					男
				</span>
				<span v-else-if="sex=='girl'">
					女
				</span>
				<span v-else>
					妖
				</span>
				<li>v-show和v-model</li>
				<div>
					<input type="checkbox" v-model="flag"/>已阅读该协议
					<div v-show="flag">
						123456789
					</div>
					</div>
					<li>v-for/v-model/v-bind/{{}}</li>
					<!-- for{Object i: arrays} -->
					<!-- <div v-for="(d,i) in arrays"> -->
                         <!--i={{i}},d={{d}}-->
					<div v-for="d in depts">
						{{d.id}},{{d.name}}
                            <!-- <div>
					<select>
						<option value="">----请选择----</option>
						<option v-for="d in depts" v-bind:value="d.id">
							{{d.name}}
						</option>
					</select>
					</div>
					 <span v-for="s in depts">
						<input type="checkbox" v-bind:value="s.id" v-model="rs"/>                                                                
                                          {{s.name}}
					</span>
					<span v-if="rs.length!=0">
					{{rs}}
					</span> -->
						</div>
			</ol>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
					sex:'girl',
					flag:true,
					depts:[
						{id:1,name:'研发部'},
						{id:2,name:'市场部'},
						{id:3,name:'客服部'},
						{id:4,name:'人事部'}
					],
					arrays:[1,2,3,4],
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

结果：

  参数，动态参数及简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl {
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
				<span>
					<li>参数，动态参数及简写</li>
					<a v-bind:[attrname]="url">百度</a>
					<a v-on:[eventname]="doClick">点我</a>
					<a :href="url">百度</a>
					<a @click="doClick">点我</a>
				</span>
			</ol>
		</div>
		<script>
			//每一个Vue实例都是从new构造函数开始
			var vm = new Vue({
				el: '#app',
				data: {
					ts: new Date().getTime(),
					
					rs:[],
					url:'http://www.baidu.com/',
					attrname:'href',
					eventname:'dblclick'
				},
				methods: {

				}
			})
		</script>
	</body>
</html>

 结果：

简写：

                    v-bind:简写变成: 例如:v-bind:id->id
                    v-on:简写变成@   例如:v-on:click ->@click

v-model：用来在 input、select 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值  --------上篇博客有

属性计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="add">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
			<div v-for="s in score">
				id={{s.id}},科目={{s.name}},成绩={{s.sc}}
			</div>
			<span>总分:{{sum}}</span>
		</div>
		<script>
		//全局过滤器
		
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#add',
				data:{
					ts:new Date().getTime(),
					score:[
						{id:1,name:'语文',sc:100},
						{id:2,name:'数学',sc:10},
						{id:3,name:'英语',sc:200},
						{id:4,name:'理综',sc:300}
					]
				},
				methods:{
					},
					computed:{
						sum:function(){
							let s=0;
							//面试题
							//let是局部定义
							//var是全局定义，容易参数数据干扰或者数污染
							for(let sc of this.score)
							s+=sc.sc;
							return s;
						}
					}
			});
		</script>
	</body>
</html>

在计算属性中需要注意的几点；

如果在页面中动态绑定计算属性，计算属性必须有返回值。
在计算属性的方法中，方法中返回值的变量改变时都会调用该方法（对象和数组对其本身进行操作/引用改变时会调用（eg:数组进行push/splice操作以及重新给其赋值时会调用））
计算属性的get和set方法（在下面例子中，改变firstName/secondName/fullName都会导致其余两个变化）

过滤器

使用：

  1. 在html中使用：{{变量 | filters中定义的方法}}
  2. 在filters:{}中定义所有管道符后面的方法

全局过滤器

        全局过滤器定义在实例化外面,过滤全局

局部过滤器

        局部过滤器写在vue里面，过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="add">
			<h1>{{ts}}</h1>
			<h2>过滤器（局部和全局）</h2>
			<!-- 局部过滤器 -->
			{{title|strFilter}}<br/>
			<!-- 全局过滤器 -->
			{{dt|dateFilter|strFilter}}
		</div>
		<script>
		//全局过滤器
		Vue.filter('dateFilter',function(v){
			/* return fmtDate(v) */
			return fmtDate(v,'yyyy年MM月dd日')
		});
		
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#add',
				data:{
					ts:new Date().getTime(),
					title:'hello vue!!!',
					dt:new Date()
				},
				methods:{
					},
					//局部过滤器
					filters:{
						strFilter:function(v){
							return v.substr(0,6).toUpperCase();
						}
					}
			});
		</script>	
	</body>
</html>

结果：

监听属性

监听变量的变化。函数名为变量名。
若改变数组的元素/对象属性值不会触发watch中的函数，只有当对数组/对象本身进行操作时才会触发（数组/对象的重新赋值、数组的增删）
watch中的每个方法可以接收两个值==（newVal,oldVal）==，只有当数组和对象的引用改变时，新值和旧值时不同的。若只是对数组进行增加元素、删除元素操作，新旧值仍是相同的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式二：CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js" type="text/javascript"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<!-- <h1>{{ts}}</h1> -->
			<h2>监听属性</h2>
			kb:<input type="text" v-model="kb"/><br />
			mb:<input type="text" v-model="mb"/>
			</div>
		<script type="text/javascript">
			//每一个Vue实例都是从new构造函数开始
			var vm=new Vue({
				el:'#app',
				data:{
					ts:new Date().getTime(),
					kb:1024,
					mb:1
				},
				watch:{
						kb:function(v){
							this.mb=v/1024;
						},
						mb:function(v){
							this.kb=v*1024;
						}
					}
			});
		</script>
	</body>
</html>

结果：

 

监听器和过滤器的区别

一般是使用计算属性， 因为他有缓存
methods一般是处理业务使用的， 只要手动调用了这个方法就会执行， 但是computed计算属性，因为他有缓存
watch，是对我们data上面的一些数据进行 观察和响应； 一般的时候使用 计算属性替代watch；因为滥用watch的话，会影响性能。(最开始的Angularjs1.x 就有这个问题)。 但是watch有它自己的使用场景，别人不能替代。 当需要在数据变化时执行异步或开销较大的操作时。

计算属性和监听属性的区别

   自己的理解
         computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
         computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
         举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 
         与watch之间的区别：

　　     刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
         watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象


        那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
        上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

粉蛋大爷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue模板语法
qq_62331938的博客
09-02 2284
本篇文章将要分享的内容为Vue的模板语法。
vue模板语法
yzq102873的博客
09-02 851
vue模板语法
Vue框架---Vue模板语法（一）
鑫709的博客
04-27 796
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上 插入 文本 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值： <script src="js/vue.js" type="text/javascr
Vue.js 基本语法
weixin_30488313的博客
11-23 122
插值 Html 使用 v-html 指令用于输出 html 代码： <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 基础语法 实例演示 示例代码
最新发布
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
Vue 模板语法
金溪的博客
07-03 270
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量, 也可以不用模块, 直接写渲染函数, 使用可选的JSX语法. 1. 插值 (1) 文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: <span>Message: {{ msg }}</span> mustache标签将会被替代为对应数据对象上msg属性的值, 无论何时,...
Vue的模板语法
m0_46176643的博客
04-20 3429
1.3.模板语法 1.3.1效果 第一大类是插值语法：把指定的值放入指定的位置 插值语法往往是用于指定标签体内容(起始标签和结束标签中间所夹着的内容就是一个标签体) 第二大类是指令语法：固定的写法: <h></h> v-bind:是绑定的 意思，它可以给所有的任何一个标签属性动态的去绑定值 简写：v-bind: ====> : 指令语法管理标签属性 总结： Vue模板语法有2大类： 插值语法： 功...
vue的模板语法
过客如期的博客
05-10 301
一，前言 1.Vue的核心是使用模板语法，声明式的将data数据渲染进DOM系统。 2.模板语法是响应性data数据在dom中的声明的地方。 二，操作文本节点的模板语法 1.在vue中文本插值使用双大括号语法 <p> {{value}} </p> 2.在双大括号中，除了可以简单的传值外，还可以使用表达式，每个绑定都只能包含单个表达式。 <p> {{value.split().reserve().join()}} </p> 3.双括号里的值会被解析成普通文本
Vue基础语法详解及项目构建规范介绍
Vue是一种流行的JavaScript框架，它具有简单易用的语法和强大的功能，使得构建单页面应用程序变得更加容易。在Vue的项目中，有一些重要的概念需要理解和掌握。 首先，Vue中使用的一些重要概念包括单页面应用程序、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值