（一）快速上手VUE 基础 常用语法示例（html纯引用vue.js）

最新推荐文章于 2023-10-27 11:48:10 发布
最新推荐文章于 2023-10-27 11:48:10 发布
阅读量586 收藏 17
点赞数 3
分类专栏： vue学习笔记 文章标签： vue.js html 纯引用 常用语法 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43291242/article/details/87166749
版权

摘要:
通过对vue的基础语法系列示例，对初学者来说，放到浏览器中直接运行，可得到直观的认识和理解。

生产环境：
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

知识点目录

vue指南官网地址：https://cn.vuejs.org/v2/guide/

1、构造函数体\变量 基础操作

小节笔记说明

 模板语法：
 （1）插值
	a.  文本：{{}}
	b.  纯HTML
	     v-html 防止XSS
	c.  表达式

（2）指令：是带有 v- 前缀的
    v-bind
    v-if
    v-on:click

（3）缩写
    v-bind:src =>  :src
    v-on:click => @click

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_构造函数体\变量</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="box">
		{{name}}
		<span>{{age}}</span>
		<p v-html="hname"></p>   
		<!-- 输出html：<p><b>xiaoming</b></p> -->
		
		<p>{{10+20}}</p>  
		<!-- //输出：30 -->
		
		<p>{{10>20?'大于':"小于"}}</p>  
		<!-- //输出：小于 -->
		 
		<p>{{age + "xiaoming的年龄"}}</p>  
		<!-- //输出 18xiaoming的年龄 -->
		
		<p v-if="isShow">我是动态创建和删除</p>
		<!-- //输出：（空） -->

		<p v-show="isShow">我是动态隐藏和显示</p>
		<!-- //输出：<p style="display:none;">我是动态隐藏和显示</p> -->
		
		<p><button v-on:click="handleClick">click</button></p>
		<!-- //简写： -->
		<button @click="handleClick">click 简写</button>
		
		<p>//bind 绑定某个属性名，控制属性值</p>
		<p v-bind:class=" isShow ? 'aa' : 'bb' ">class是bb</p>
		//简写：
		<p :class=" isShow ? 'aa' : 'bb' ">class是bb</p>
	</div>
	<script type="text/javascript">
		var vue = new Vue({
		   el:"#box",
		
		   data:{
		      name:"xiaoming",
		      age:18,
		      hname:"<b>xiaoming</b>",
		      isShow: false
		    },
		
		     methods:{
		         handleClick:function(){
		            this.name="aa";
		            this.isShow = !this.isShow;
		            // this.isShow = true; 和 this.isShow = false;	相互切换           
		         }
		     }
		})
	</script>
</body>
</html>

输出：
在这里插入图片描述

Tips：console 控制台测试，直接输入vm对象名找到下面的name，还可以直接对其赋值操作:

在这里插入图片描述

2、计算属性和观察者

小节笔记说明

计算属性-复杂逻辑

（1）基础例子

（2）计算缓存 VS methods
     - 计算属性是基于它们的依赖进行缓存的。
     - 计算属性只有在它的相关依赖发生改变时才会重置。

 总结，计算属性没有methods那么灵活，可以通过传参做各种改变；
 计算属性主要的用法是“getter方法”获取“参数”进行计算

（3）计算属性 VS watch
     总结，计算属性
     
（4）计算setter
    计算属性主要的用法是“getter方法”获取“参数”进行计算。同时，他也有setter的方法，但是不常用。

（1）基础例子

（2）计算缓存 VS methods

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_计算属性 vs methods</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  <!-- //将姓名的首字母大写 -->
	  {{name.substring(0,1).toUpperCase()+name.substring(1)}}
	
	  <p>我是计算属性{{changeword}}</p>
	  <p>我是计算属性{{changeword}} 只执行一次，优秀</p>
	  <p>我是普通方法{{changewordMethod()}}</p>
	  <p>我是普通方法{{changewordMethod()}} 调用一次，就执行一次，冗余</p>
	  
	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	  data:{
	     name:"xiaoming"
	   },	
	   // 普通方法
	   methods:{
	      changewordMethod:function(){
	      	console.log("普通方法，执行了！")
	        return this.name.substring(0,1).toUpperCase()+this.name.substring(1)	              
	       }
	   },
	
	   //计算属性
	   computed:{
	        changeword:function(){
	        	console.log("计算属性，执行了！")
	             return this.name.substring(0,1).toUpperCase() + this.name.substring(1)	              
	         }
	    }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

（3）计算属性 VS watch

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_计算属性 VS watch</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  <p>模拟一个购物车的计算	</p>
	  <p>单价：<input type="text" v-model="price" /></p>
	  <p>数量：<input type="text" v-model="number" /></p>

	  <p>sum总额：{{sum}}</p>	
	  <p>computedsum总额：{{computedsum}}</p>	  
	</div>
	<script>
	var vm = new Vue({
	  el:"#box",
	
	  data:{
	     price:100,
	     number:0,
	     sum:0
	   },
	
	   //观察者方法 watch,通过观察price和number的变化，去计算总价
	   watch:{
	      price:function(newvalue){
	      	  console.log("执行了price监测")
	          this.sum = newvalue*this.number
	       },
	       number:function(newvalue){
	      	  console.log("执行了number监测")
	       	   this.sum = newvalue*this.price
	       }
	   },
	
	   //计算属性
	   computed:{
	        computedsum:function(){
	   	        console.log("执行了计算属性")
	            return this.number * this.price
	         }
	    }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

Tips：初始加载时，立即执行了计算属性。

（4）计算setter

示例输入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_计算属性的setter用法</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  {{getData}}  
	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	  //计算属性
	   computed:{
	       getData:{
	       	get:function(){
	       		return "xiaoming"
	       	},
	       	set:function(value){
	       		console.log(value)
	       	}
           }
	    }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

3、class和style绑定用法

（1）绑定HTML Class & 绑定内联样式：
        - 对象语法
        - 数组语法

（1）绑定HTML Class & 绑定内联样式

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_class与style</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  <p class="default" :class="isShow?'aa':'bb'">
	  	class样式，三元判断式
	  </p>
	  
	  <p class="default" :class="{active:isShow}">
	  	class样式,对象语法单个
	  </p>	  
	  
	  <p class="default" :class="{active:isShow,show:isShow2}">
	  	class样式,对象语法多个
	  </p>
	  
	  <p class="default" :class="['active','show']">
	  	class样式,数组式
	  </p>
	  
	  <p class="default" :class="[obj,'show']">
	  	class样式,数组式,用参数化写入，例：obj变量，obj="active"
	  </p>
	  
	  <p class="default" :style="{background:color}">
	  	style样式,数组式,用参数化写入，例：color变量，color="#ccc"
	  </p>

	  <p class="default" :style="objstyle">
	  	style样式,数组式,数组写入。
	  </p>

	  <p class="default" :style="[objs1,objs2]">
	  	style样式,数组式,分开数组写入。
	  </p>
	  
	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	isShow:false,
	  	isShow2:true,
	  	obj:"active",
	  	color:"#ccc",

	  	objstyle:{
	  		background:"red",
	  		fontSize:"30px" //font-size 需要写成 fontSize
	  	},

	  	objs1:{
	  		background:"red",
	  	},
	  	objs2:{
	  		fontSize:"30px"
	  	}
	  },
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

4、条件渲染

（1）v-if
（2）v-else
（3）template v-if
（4）v-show

（1）v-if

（2）v-else

（3）template v-if

（4）v-show

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_条件渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  <p v-if="isCreated">我是高级渲染，为否的时候，就连html都不显示</p>
	  <p v-else>我的else</p>
	  
	  <template v-if="isCreated">
	  	<div>hello</div>
	  	<div>hello</div>
	  	<div>hello</div>
	  </template>

	  <p v-show="isShow">我是动态隐藏和显示，style=“display：none”的那种</p>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	isCreated:true,
	  	isShow:false
	  },
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

5、列表渲染

小节笔记说明

（1）v-for
   a. in
   b. of

（1）v-for

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  
	  <ul>
	  	<li v-for="item in datalist">
	  		{{item}}
	  	</li>
	  </ul>

	  <ul>
	  	<li v-for="(item,index) in datalist">
	  		索引为{{index}}，内容为{{item}}
	  	</li>
	  </ul>

	  <ul>
	  	<li v-for="(item,index) of datalist">
	  		of写法，一样渲染。
	  		索引为{{index}}，内容为{{item}}
	  	</li>
	  </ul>
	  
	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["aa","bb","cc"]
	  },
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

（2）key

*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">
	  
	  <ul>
	  	<li>
	  		<p>v-bind:key可以定义key，但是不建议用index索引来做id（key）</p>
	  	</li>
	  	<li v-for="(item,index) of datalist" v-bind:key="index">
	  		索引为{{index}}，内容为{{item}}
	  	</li>
	  	
	  	<li>
	  		<p>可简写为 => :key="index" ,效果一致：</p>
	  	</li>
	  	<li v-for="(item,index) of datalist" :key="index">
	  		索引为{{index}}，内容为{{item}}
	  	</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",		 
	  data:{
	  	datalist:["aa","bb","cc"]
	  },
	})
	</script>
</body>
</html>

输出：

（3）数组更新检测

a. 使用以下方法操作数组，可以检测变动
push() 追加，返回值：长度
pop() 删除并返回数组的最后一个元素
shift() 删除并返回数组的第一个元素。
unshift() 向数组的开头添加一个或更多元素，返回新的长度
splice() 插入/替换
sort() 排序
reverse() 倒序

vue中，push()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>push()	向数组末尾添加一个或N个元素，并<b>返回新的长度</b>。</p>
	  <p>例：datalist:["aa","bb","cc"]</p>
 
	  <p>示例1：return this.datalist.push("dd")</p>
	  <ul>
	  	<li v-for="item in push_computed_datalist1">{{item}}</li>
	  </ul>
 
	  <p>示例2：先执行push(),然后 return this.datalist2</p>
	  <ul>
	  	<li v-for="item in push_computed_datalist2">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["aa","bb","cc"],
	  	datalist2:["aa","bb","cc"],
	  },

	  computed:{
	  	push_computed_datalist1:function(){
	  		return this.datalist.push("dd")
	  	},

	  	push_computed_datalist2:function(){
	  		this.datalist2.push("ff","gg")
	  		return this.datalist2
	  	}
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

vue中，pop()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>pop()	删除并返回数组的最后一个元素，长度减少。</p>
	  <p>例：datalist:["aa","bb","css"]</p>

	  <p>示例1：return this.datalist.pop()</p>
	  <ul>
	  	<li v-for="item in pop_computed_datalist1">{{item}}</li>
	  </ul>

	  <p>示例2：先执行pop()，return this.datalist2</p>
	  <ul>
	  	<li v-for="item in pop_computed_datalist2">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["aa","bb","css"],
	  	datalist2:["aa","bb","css"]
	  },

	  computed:{
	  	pop_computed_datalist1:function(){
	  		return this.datalist.pop()
	  	},
	  	pop_computed_datalist2:function(){
	  		this.datalist2.pop()
	  		return this.datalist2
	  	},
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

vue中，shift()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>shift() 删除并返回数组的第一个元素。</p>
	  <p>例：datalist:["aa","bb","css"]</p>

	  <p>示例1：return this.datalist.shift()</p>
	  <ul>
	  	<li v-for="item in shift_computed_datalist1">{{item}}</li>
	  	<li>shift_computed_datalist1 计算属性：{{shift_computed_datalist1}}</li>
	  </ul>

	  <p>示例2：先执行shift()，return this.datalist2</p>
	  <ul>
	  	<li v-for="item in shift_computed_datalist2">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["aa","bb","css"],
	  	datalist2:["aa","bb","css"]
	  },

	  computed:{
	  	shift_computed_datalist1:function(){
	  		return this.datalist.shift()
	  	},
	  	shift_computed_datalist2:function(){
	  		this.datalist2.shift()
	  		return this.datalist2
	  	},
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

vue中，unshift()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>unshift() 向数组的开头添加一个或更多元素，并返回新的长度。。</p>
	  <p>例：datalist:["aa","bb","css"]</p>

	  <p>示例1：return this.datalist.unshift()</p>
	  <ul>
	  	<li>unshift_computed_datalist1 计算属性：{{unshift_computed_datalist1}}</li>
	  </ul>

	  <p>示例2：先执行unshift()，return this.datalist2</p>
	  <ul>
	  	<li v-for="item in unshift_computed_datalist2">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["aa","bb","css"],
	  	datalist2:["aa","bb","css"]
	  },

	  computed:{
	  	unshift_computed_datalist1:function(){
	  		return this.datalist.unshift("haha")
	  	},
	  	unshift_computed_datalist2:function(){
	  		this.datalist2.unshift("haha")
	  		return this.datalist2
	  	},
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

vue中，splice()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。</p>
	  <p>语法：arrayObject.splice(index,howmany,item1,.....,itemX)</p>
	  1、index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。<br />
      2、howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。<br />
      3、item1, ..., itemX	可选。向数组添加的新项目。<br />
            
	  <p>
	  示例1：插入<br />
      arr.splice(2,0,z)<br />
      [a,b,c] => [a,b,z,c]
      </p>      
	  <ul>
	  	<li v-for="item in splice_computed_datalist1">{{item}}</li>
	  </ul>

	  <p>
	  示例2：替换<br />
      arr.splice(2,1,z)<br />
      [a,b,c] => [a,b,z]
      </p>
	  <ul>
	  	<li v-for="item in splice_computed_datalist2">{{item}}</li>
	  </ul>

	  <p>
	  示例3：替换多个<br />
      arr.splice(1,2,z)<br />
      [a,b,c] => [a,z]
      </p>
	  <ul>
	  	<li v-for="item in splice_computed_datalist3">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["aa","bb","cc"],
	  	datalist2:["aa","bb","cc"],
	  	datalist3:["aa","bb","cc"],
	  },

	  computed:{
	  	splice_computed_datalist1:function(){
	  		this.datalist.splice(2,0,"~zz~")
	  		return this.datalist
	  	},
	  	splice_computed_datalist2:function(){
	  		this.datalist2.splice(2,1,"~zz~")
	  		return this.datalist2
	  	},
	  	splice_computed_datalist3:function(){
	  		this.datalist3.splice(1,2,"~zz~")
	  		return this.datalist3
	  	}
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

vue中，sort()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>sort() 对数组的元素进行排序。</p>            
	  
	  <p>例1：字母排序。例：datalist:["sa","bb","cc","aa"]</p>
	  <ul>
	  	<li v-for="item in sort_computed_datalist1">{{item}}</li>
	  </ul>

	  <p>例2：数字排序需要一个"排序函数"。例：datalist1:[1,100,6,55]</p>
	  <ul>
	  	<li v-for="item in sort_computed_datalist2">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["sa","bb","cc","aa"],
	  	datalist1:[1,100,6,55],
	  },

	  methods:{
	  	//排序函数
	  	sortNumber:function (a,b){
		  return a - b
		}
	  },

	  computed:{
	  	sort_computed_datalist1:function(){
	  		this.datalist.sort()
	  		return this.datalist
	  	},
	  	sort_computed_datalist2:function(){
	  		this.datalist1.sort(this.sortNumber) //调用排序函数
	  		return this.datalist1
	  	},
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

vue中，reverse()示例

输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p>数组更新显示法：</p>
	  <p></p>
	  <p>reverse()	颠倒数组中元素的顺序。</p>            
	  
	  <p>例1：字母排序。例：datalist:["bb","cc","aa","zz"]</p>
	  <ul>
	  	<li v-for="item in reverse_computed_datalist1">{{item}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	datalist:["bb","cc","aa","zz"]
	  },

	  computed:{
	  	reverse_computed_datalist1:function(){
	  		this.datalist.reverse()
	  		return this.datalist
	  	}
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述

（4）应用：显示过滤结果，使用计算属性

示例输入：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01 模板语法_列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>	
	<div id="box">

	  <p><input type="text" v-model="mytext" /></p>         

	  <ul>
	  	<li v-for="data in cmputeddatalist">{{data}}</li>
	  </ul>

	</div>
	<script>
	var vm = new Vue({
	  el:"#box",	
	 
	  data:{
	  	mytext:"",
	  	datalist:["aa","bb","cc","dd"]
	  },

	  computed:{
	  	cmputeddatalist:function(){
	  		return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
	  	}
	  }
	})
	</script>
</body>
</html>

输出：
在这里插入图片描述
在这里插入图片描述

综上所述

通过对vue的基础语法系列示例，对初学者来说，放到浏览器中直接运行，可得到直观的认识和理解。

后续笔记示例：
（二）.vue 结尾的单体页面示例。
（三）路由示例。
（四）api接口数据接入，并部署上线示例。

Breanne Hui~辉
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法小案例
前端爆米花
03-13 1618
本节课带着大家做个vue小案例，包含很多vue常用语法，简单实用 完成效果如下图，当在input框输入值之后，点击submit按钮，即可添加一个 li标签 <div id="app"> <!-- v-model 表示双向绑定--> <input type="text" v-model="ivalue"> <!-- @click 表示点...
HTML——Vue—基本语法
piduocheng0577的博客
03-19 205
Vue基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"&gt...
Vue.js基础语法
lei_1994的博客
01-24 498
在实际操作中建议定义全局id 即在body标签中给定，不要重复使用new Vue 第一次测试Vue.js --> .class1{ background: #666; color: #fff; } {{ messagefirst }} 修改颜色
Vue——html中的基本语法
奔跑的程序员
08-30 1403
引入Vue JS文件，创建Vue实例 new Vue({ el: '.container',//挂载实例 data: { first: '初次使用Vue', arr: ['第一个', '第二个', '第三个'], show: true, text: '<h1&g...
Vue——html引用cdn
tellmewsm
09-30 1960
单页面引用cdn 显示图表和表单,构建本地简单的测试报告 Echarts： https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts element-ui： https://element.eleme.cn/#/zh-CN/component/installation...
Vue开发的一个应用程序.zip
最新发布
06-20
Vue.js 是一款流行的前端JavaScript框架，由尤雨溪（Evan You）开发，用于构建用户界面。Vue的特点在于其简洁的API、组件化结构以及易上手的学习曲线，使其在Web开发领域广受欢迎。Vue的核心理念是数据驱动视图，...
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
Vue.js是一个轻量级、高性能的前端JavaScript框架，它具有组件化、响应式、易于上手的特点。在本项目中，我们使用Vue.js构建了一个微商城应用，结合Node.js作为后端服务器，为用户提供了一套完整的电商解决方案。...
vue-example：Vue.js示例
02-06
Vue.js是一种轻量级的前端JavaScript框架，以其易学易用和灵活性著称。这个"vue-example"项目是一个专门展示Vue.js应用实例的资源，它旨在帮助开发者更好地理解和实践Vue.js的核心特性，以及如何与其他现代构建工具...
vue.js做一个简单的编辑菜谱功能
10-18
Vue.js是一个轻量级的前端JavaScript库，它提供了一套声明式的编程方式，使得构建用户界面变得更加简单。在这个示例中，我们将实现以下主要功能： 1. **获取菜品数据**： 菜谱编辑功能的第一步是获取所有可用的菜...
【前端-PC】html vue.js 跨域.zip
05-20
Vue.js 是一个流行的轻量级JavaScript框架，用于构建用户界面。它以其简洁的API、易于上手的特性和强大的功能而受到广泛欢迎。Vue的核心特性包括声明式渲染、组件化、虚拟DOM、指令系统等，这些使得开发者能高效地...
Vue基本语法及常用指令
sleepwalker_1992的专栏
07-24 400
Vue基本语法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue基本语法&lt;/title&gt; &lt;!--1.导入Vue的包--&gt; &lt;s
【原生html使用vue混入功能】html文件引入vue语法，在html中使用vue混入功能
seeeeeeeeeee的博客
02-23 1693
最近遇到的需求，需要在html页面上用vue的混入功能然后我网上找了很久没有试出来然后就自己琢磨怎么弄，没想到还真试出来了。这里就来记录一下，万一以后又遇到这情况，知道如何混入了- -！
在 HTML 中引入 vue.js 写页面
Start2019
12-05 1万+
突然说要写两个页面（只有两个页面，不是一个完整的项目。。），有点懵，不知道从哪下手，而且只对 vue 熟悉那么一丢丢。但是没办法鸭，只能硬着头皮去做了！在这里做一下笔记。 一、前期准备 1. 新建文件夹，并且命名为： css、imgs、pages、js，在对应的文件夹下放对应的文件。 2. 引入样式。 不想要自己写样式和逻辑，而且是要基于 vue 的，那就只好找基于 vue 的 UI 库了—— e...
如何在原生HTML里面使用VUE（保姆级教学）
热门推荐
qq_57956183的博客
07-14 1万+
上面是在原生HTML里面引入vue的方法，其他的同理，如：elementUI、ant Desgin Vue等，都可以用类似的方式引入到原生HTML里。这样就可以在html里面使用Vue了，下期我将分享在html里面使用Vue组件~成功引入vue后，我们就可以在html文件里使用vue，下面是示例；将上面代码添加到html的head里，即可全局使用vue的方法；（2）将搜索到的内容全选复制项目的vue.js文件里，如图；（3）在index.html里面引入；）复制到浏览器，并搜索；（1）将CDN的路径（
html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus
夜空孤狼啸的博客
08-30 3085
html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus，本次项目中，需要引入github中别人写好的插件，插件比较大，没有方法直接在自己项目中，把别人的项目打包合并生成html（类似于前端项目打包生成的 dist ），修改这里面的html，这种情况要么用原生js写或者jquery还相对快一些，那为什么不直接用vue语法呢？哈哈哈，下面就教你怎么写。这里用antDesignVue4.0 直接上代码，
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 6316
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
weixin_28692153的博客
06-16 1357
vue.js怎样引入到HTML中如何将vue.js引入HTML，把vue.js引入HTML的方法：一、下载vue . js；然后在HTML中添加vue.js包，其语法为“script src=’ $ { path }/web/constant/vue . js ‘/script”。这个教程操作环境：windows7系统，2.0版，这个方法适合所有品牌的电脑。推荐：《vue教程》vue.j...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
梆子井欢喜坨的博客
06-24 4053
本篇博客基于Vue2.x 官方文档：https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目，而同学找的模板不是前后端分离的 因此只能学习一下在 html文件中如何使用Vue，并学习一些之前没有理清的概念。 1. Vue实例 在Vue的官方教程中，也是从在html中使用Vue起步的， 下面是一个简单的Hello World 例子。 <!DOCTYPE html> <html> <head> <
HTML页面中简单使用Vue
老婆就是要败家
07-15 8510
Vue入门案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app">
vue学习文档.pdf
12-10
Vue.js提供了一个快速入门的示例代码，展示了如何使用Vue.js创建一个简单的Web应用程序。该示例代码包括HTML、CSS和JavaScript三部分，展示了如何使用Vue.js实现数据绑定和事件监听。 **插值表达式数据绑定** Vue....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值