HTML周记3

最新推荐文章于 2022-10-22 14:53:47 发布

玲飞(ಡωಡ)

最新推荐文章于 2022-10-22 14:53:47 发布

阅读量109

点赞数

分类专栏：周记文章标签： java

本文链接：https://blog.csdn.net/weixin_49000273/article/details/118391304

版权

周记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客主要探讨了Vue.js的基本语法，包括data对象、methods的使用以及$前缀的含义。此外，还详细讲解了AJAX的概念，强调了其在网页异步更新中的作用，并举例展示了jQuery中AJAX load()方法的用法和回调函数的应用。

摘要由CSDN通过智能技术生成

文章目录

前言
一、Vue.js
二、AJAX （ Asynchronous JavaScript and XML）
- 1.jQuery - AJAX load()
- 2.callback

前言

好好学习，天天向上！

一、Vue.js

1.语法格式及代码

         var vm = new Vue({
         // 选项
         })

<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "VUE",
				url: "https://blog.csdn.net/cjy1602?spm=1001.2100.3001.5343",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " vue的学习从现在开始";
				}
			}
		})
	</script>
</body>

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

2.从data对象中找属性

例：

d
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
	document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>

3.用$前缀

vue 实例提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
例：

	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>Alexa : {{alexa}}</h1>
	</div>
	<script type="text/javascript">
	// 我们的数据对象
	var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
	var vm = new Vue({
		el: '#vue_det',
		data: data
	})

	document.write(vm.$data === data) // true
	document.write("<br>")
	document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>
</body>

二、AJAX （ Asynchronous JavaScript and XML）

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

1.jQuery - AJAX load()

例：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>

2.callback

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息

代码如下（示例）：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>