Vue与AJAX语法糖：从胡子语法到Vue3.0组件化-CSDN博客

本文链接：https://blog.csdn.net/Cvlino/article/details/130193105

Vue

胡子语法
AJAX
Vue3.0

胡子语法

胡子语法：{{参数}}

<body>
		<div class="d1">
			<!-- <input type="text" :value="cwl"/> -->
			<p>{{c}}</p>
			<p>{{c+"真不错"}}</p>
			<span v-text="c">色鬼法国v</span><br /><!-- 修改文本 -->
			<span v-html="d">而放弃发过去</span><br /><!-- 修改标签和文本 -->
			<span v-once>{{d}}</span><!-- 仅初始化一次 -->
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			let a=new Vue({  /* vue实例 */
				el:".d1",/* 绑定 */
				data:{
					c:"cwl",
					d:"<strong>哈哈哈哈</strong>",
				}
			});
		</script>
	</body>

语法糖（Syntactic Sugar）是指一种编程语言的语法特性或写法，它并没有引入新的功能，而是通过提供更简洁、易读或更具表达力的语法来使代码更加易于编写和理解。

AJAX

		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			
			$(function(){
				$.ajax({
					url:"http://localhost:8080/SpringMVC-day1/student/list.do",	//请求的路径
					type:"get",	//请求的方法类型
					data:{},	//参数
					dataType:"json",
					success:function(data){	//成功执行时的回调函数
						console.log(data);
					}
				})
			})
		</script>

补充JQ：

JQ的优点：对JS获取节点的方式做了增强$(“selector”)；批量操作；优化了DOM操作的方法html()、text()、val()、css
JQ的缺陷：无法动态更新

开闭包： 将声明好的数据放在一个.js文件中，在特定的js中调用，如下示例

comment.js组件模块：

function demo1(){	//声明函数方便调用
	console.log("1111111");
}

function demo2(){
	console.log("2222222");
}

let str1="qwer";	//声明变量

const str2="asdf";	//也可以声明变量

export{demo1,demo2,str1,str2}	//导出

main.js来调用：

import {demo1} from "./comment.js"

demo1()

由html来运行：

	<body>
								<!-- type要是一个模块 -->
		<script src="js/main.js" type="module"></script>	<!-- 自动执行js/main.js -->
	</body>

Vue3.0

Vue项目目录结构讲解：
在这里插入图片描述

Vue项目目录结构讲解

Vue部分笔记

Vue

胡子语法

AJAX

Vue3.0