<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
/* 在html网页里面引入javascript
* 方式一:
* html网页里面,是写script标签,里面定义js代码
* 缺点:
* 1.js代码不能重复使用(不能在其他网页里面使用)
* 2.html标签和js代码耦合了,后期不便于修改和维护
* 优点:
* html标签和js代码写在一起,便于阅读和调试
* 小结:
* 在开发环境下,使用方式一
* 方式二:
* 1.在外部定义一个js文件
* ' 2.在html网页里面,通过script标签的src属性引入外部的js文件
* 缺点:
* js代码是单独的一个文件,所以在html阅读起来麻烦
* 优点:
* 1.js代码可以重复使用
* 2.js代码和html网页解耦合,便于修改和维护
* 小结:在生产环境下(代码全部开发完毕,上线),使用方式二*/
</script>
</body>
</html>
function getRandom(){
var n1 = Math.random();
var n2 = Math.floor(n1*7);
return n2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 方式二:
1.在外部定义一个js文件
2.在html网页里面,通过script标签的src属性引入外部的js文件 -->
<script type="text/javascript" src="a.js"></script>
<script>
document.write(getRandom());
</script>
</body>
</html>
function getRandom(arr){
var n1 = Math.random();
var arrLe = arr.length
var n2 = Math.floor(n1*arrLe);
return n2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="b.js"></script>
<script>
var arr = ["闹闹","皮皮","逗逗","泡泡","花花","毛毛","溜溜","可可","乐乐","微微"]
var index = getRandom(arr.length);
document.write(arr[index]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 2.div指定范围 -->
<div id="app">
{{msg}}
</div>
<!-- 1.在html引入vue.js-->
<script src="vue.js" type="text/javascript"></script>
<script>
/* 如何使用vue
* 1.在网页里面引入vue.js
* 2.在html网页里面指定vue的作用范围,通常情况下使用div指定范围
* 3.创建vue对象,给vue对象赋值,那个值就是一个json数据*/
//3.定义vue对象的参数
var config ={
"el":"#app",
"data":{
"msg":"hello vue!"
}
}
//4.创建vue对象
new Vue(config);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{methods}}
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
var config = {
"el":"#app",
"data":{
"msg":"hello vue!"
},
"methods":{
test1(){
document.write("定义方法的test1")
}
}
}
var vu = new Vue(config);
vu.test1();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<a href="http://wan.8950yx.com/on/yx-kk/cnm135p/b2/ccid8560/?bd_vid=11471003272889705510" v-html="msg"></a>
</div>
<script src="vue.js" type="text/javascript"></script>
<script>
//1.创建对象,传递json参数
new Vue({
"el":"#app",
"data":{
"msg":"我系渣渣辉,是兄弟,就来砍我呀!"
},
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" align="center">
<a v-bind:href="url" >我系渣渣辉,是兄弟,就来砍我呀!</a>
</div>
<script src="vue.js" type="text/javascript"></script>
<script>
//1.创建对象,传递json参数
new Vue({
"el":"#app",
"data":{
"url":"http://wan.8950yx.com/on/yx-kk/cnm135p/b2/ccid8560/?bd_vid=11471003272889705510",
"a":"111"
},
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" align="center">
<a href="demo07.html" v-if="num>2" >贪玩蓝月</a>
<a href="demo05.html" v-else-if="num<2">略略略</a>
</div>
<script src="vue.js" type="text/javascript"></script>
<script>
//1.创建对象,传递json参数
new Vue({
"el":"#app",
"data":{
"num":10,
"name":"jack",
},
}
);
</script>
</body>
</html>
本文主要介绍了使用HBuilder进行前端开发的经验，包括HTML和JavaScript的应用，探讨了在实际项目中如何高效地利用HBuilder提升开发效率。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
