2025年Vue基础语法（一）

大家好，我是讯享网，很高兴认识大家。

一、模板语法

1.插值

文本

 { 
  
    
  {msg}}

讯享网

示例：

讯享网<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {ts}}</h1> <h2>插值</h2> <ol> <li>文本</li> <span> { 
  
    
  {msg}}
				</span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

讯享网

错误示范：

不信？那就去试吧！！！

<!-- ！！！错误示范！！！ --> <h1 title="{ 
   
     
   {msg}}"></h1>

html

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

示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {title}}</h1> <h2>插值</h2> <ol> <li>文本</li> <span> { 
  
    
  {msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

应该可以明显看出在span标签中有一个在data中定义的input标签

属性

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

示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {title}}</h1> <h2>插值</h2> <ol> <li>文本</li> <span> { 
  
    
  {msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:数据双向绑定
				 2.v-biand:绑定标签属性值  例：v-bind:css  v-bind:id
				 3.{
  
  
  
  
  
  
  
    
  {}}:插值，针对标签中的文本值进行操作
				 -->
				<li>v-bind绑值</li>
				<span v-bind:class="cls" v-bind:id="123">
					我变色了
				</span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

我们在外面给cl定义了一个样式，然后用v-bind给span标签绑定class,span中的内容也变色了。

又用v-bind给它绑了一个id为123，在前端控制台也能很清楚的看到

表达式

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {ts}}</h1> <h2>插值</h2> <ol> <li>文本</li> <span> { 
  
    
  {msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:数据双向绑定
				 2.v-biand:绑定标签属性值  例：v-bind:css  v-bind:id
				 3.{
  
  
  
  
  
  
  
    
  {}}:插值，针对标签中的文本值进行操作 --> <li>v-bind绑值</li> <span v-bind:class="cls" v-bind:id="123"> 我变色了 </span> <li>表达式</li> <span> { 
  
    
  {msg.substr(0,6).toUpperCase()}}<br /> { 
  
    
  { number + 1 }}<br /> { 
  
    
  { ok ? 'YES' : 'NO' }}
					<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</span>
				
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
					number:1,
					ok:true,
					id:22,
				}
			},
			
			methods:{

			}
		})
	</script>
</html>

显示：

同样也可以支持JavaScript表达式

第一个：截取（0，6）然后大写

第二个：加法运算

第三个：三元运算符

2.指令

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

核心指令

v-if/v-else/v-else-if

代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {title}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					我是男的
				</span>
				<span v-else-if="sex=='girl'">
					我是女的
				</span>
				<span v-else>
					我是男的还是女的？
				</span>
            </ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
				}
			},
			methods:{
			}
		})
	</script>
</html>

显示：

当sex=boy时：

当sex=girl时:

当sex=gay时：

总结：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

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

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

v-show

代码：

讯享网<li>v-show和v-model</li> <div> <input type="checkbox" v-model="flag" />已阅读该协议 <div v-show="flag"> 嗨害,我出来了 </div> </div> <!-- 在data中定义一个flag --> flag:false,

效果：

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

v-for

代码：

 <div id="zhq"> <h1>{ 
  
    
  {title}}</h1> <h2>指令</h2> <ol> <li>v-if / v-else / v-else-if</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"> 嗨害,我出来了 </div> </div> <li>v-for/v-model/v-bind/{ 
  
    
  {}}</li> <div v-for="(d,i) in arrays"> i={ 
  
    
  {i}},d={ 
  
    
  {d}} </div> <div> <select> <option value="">--请选择--</option> <option v-for="d in depts" v-bind:value="d.id"> { 
  
    
  {d.name}} </option> </select> </div> <span v-for="a in depts"> <input type="checkbox" v-bind:value="a.id" v-model="dt"/>{ 
  
    
  {a.name}} </span><br /> <span v-if="dt.length!=0"> { 
  
    
  {dt}} </span> </ol> </div> data:function(){ return{ ts:new Date().getTime(), sex:'gay', flag:false, depts:[ {id:1,name:'研发部'}, {id:2,name:'调研部'}, {id:3,name:'人事部'}, {id:4,name:'客服部'} ], dt:[], arrays:[1,2,3,4,5], } },

效果：

类似JS的遍历
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

v-model

在Vue入门篇有讲解

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

参数、动态参数、简写

代码：

讯享网 <li>参数、动态参数、简写</li> <span> <!-- <a href="http://www.baidu.com">百度</a><br /> --> <a v-bind:[attrname]="url">百度</a><br /> <a v-on:[eventname]="doClick">点我</a><br /> <!-- 简写 --> <!-- v-on:简写变成@ v-bind:简写变成： --> <a :href="url">百度</a><br /> <a @click="doClick">点我</a> </span> var vm=new Vue({ el:'#zhq', data:function(){ return{ ts:new Date().getTime(), sex:'gay', flag:false, depts:[ {id:1,name:'研发部'}, {id:2,name:'调研部'}, {id:3,name:'人事部'}, {id:4,name:'客服部'} ], dt:[], arrays:[1,2,3,4,5], url:'http://www.baidu.com', attrname:'href', eventname:'dblclick', } }, methods:{ doClick(){ alert(111); } } })

效果：

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定

注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

二、过滤器

全局过滤器

Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});

局部过滤器

new Vue({
filters:{'filterName':function(value){}}
});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{ { message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{ { message | filterA('arg1', arg2) }}
注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法

案例

首字母大写/日期格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {ts}}</h1> <h2>过滤器（全局，局部）</h2> <div> <!-- 局部过滤器 --> { 
  
    
  {title|strFilter}}<br/> <!-- 全局过滤器 --> { 
  
    
  {dt|dateFilter|strFilter}}
			</div>
		</div>
	</body>
	<script>
		//全局过滤器
		Vue.filter('dateFilter',function(v){
			return fmtDate(v,'yyyy年MM月dd日')
		});
		
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					title:'hello vue!!',
					dt:new Date(),
				}
			},
			
			methods:{
				
			},
			//局部过滤器
			filters:{
				strFilter:function(v){
					return v.substr(0,6).toUpperCase();
				}
			},
		})
	</script>
</html>

效果：

三、计算属性

案例

成绩的总分

代码：

讯享网<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {ts}}</h1> <h2>计算属性</h2> <div v-for="s in score"> 编号={ 
  
    
  {s.id}},科目={ 
  
    
  {s.name}},成绩={ 
  
    
  {s.sc}} </div> <span >总分：{ 
  
    
  {sum}}</span>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					score:[
						{id:1,name:'语文',sc:110},
						{id:2,name:'数学',sc:90},
						{id:3,name:'英语',sc:90},
						{id:4,name:'物理',sc:100}
					],
				}
			},
			
			methods:{
				
			},
			computed:{
				sum:function(){
					let s=0;
					for(let sc of this.score)
						s+=sc.sc;
						return s;
				}
			}
		});
	</script>
</html>

效果：

四、监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化
xxx：代表被监听的属性，必须存在
watch:{
xxx:function(v){

案例

kb/mb转换器

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{
  
  
  
  
  
  
  
    
  {ts}}</h1>
			<h2>监听属性</h2>
				kb:<input type="text" v-model="kb" /><br />
				mb:<input type="text" v-model="mb" />
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					kb:1024,
					mb:1
				}
			},
			
			methods:{
				
			},
			watch:{
				//监听属性必须保证属性是存在的
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>
</html>

效果：

小结：计算属性和监听属性的区别

自己的理解

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别：

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?

上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!