HTML页面中使用Vue示例进阶（快速学会上手Vue）
Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面—数据变成界面；渐进式—Vue可以自底向上逐层的应用。
Vue有两种使用方式，一种实在html中直接使用Vue做开发，一种是企业级的单页面应用。后者是主流的使用方式，真正项目中很少使用前一种方式。前一种方式通过在大家熟悉的HTML环境中使用Vue，大家很容易去了解和熟悉VUE。
一、Vue框架的两种使用方式
1、单页面应用：使用Vue CLI工具生成脚手架，这是最常见的使用方式
2、传统多页面应用：通过script引入Vue.js
二、HTML页面中简单使用Vue
首先在head中引入vue的文件
然后在body中写上一个带有id的div
首先创建一个new Vue对象 , 一个中括号 , 然后创建一个{} , 中间书写一个el : #id 选中这个div , 然后书写数据展示区域data:{ } 括号中定义数据变量 , 以及变量的值
{{变量名称}}用来在页面上展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{shuju}}
{{NUMBER*10}}
{{falese?"ok":"no"}}
</div>
</body>
<script>
new Vue(
{
el:"#app",
data:{
shuju:"hello 陈小姐",
NUMBER: 10,
}
}
);
</script>
</html>
三、点击事件示例
首先定义一个button按钮 , v-on: click=“func”
定义一个methods :{ } 和data是一个级别的 , 然后你刚才定义的方法名:function(){ }
然后在方法体中 , 写出你要执行的语句
另外上面的func(‘哈哈哈’) 这个哈哈哈就是方法的一个参数 ,
然后function(msg ){} msg与上文中的哈哈哈对应 , 然后我们把msg赋值给messge , 所以message就显示为哈哈哈了
<body>
<div id="app">
{{message}}
<button v-on:click="func('哈哈哈哈')" id="mybotton">vue的onclick</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"hello"
},
methods:{
func:function (msg) {
alert("陈小姐 , 你愿意做我女朋友吗?")
this.message=msg;
}
}
});
</script>
四、键盘事件示例
和上面的点击事件一样 ,只不过是把click 换成了keydown
另外$event 与下文中的event是一个对象 , 也就是与我们传统JS中的event中的对象是一样的
然后我们定义一个变量 , 也就是代表每一个按键的Unicode编码 , 然后我们可以不让键盘起作用 , 使用event.preventDefault() 这样就可以阻止键盘起作用 ;
<body>
<div id="app">
<input type="text" v-on:keydown="fun($event)">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
meg:"这是一段无敌的代码"
},
methods:{
fun:function (event) {
/*event是vue事件对象 和我们传统JS中的event对象是一样的*/
var keyCode = event.keyCode;
if (keyCode<48||keyCode>57){
//不让键盘的按键起作用
event.preventDefault();
}
alert("我就是喜欢你");
}
}
});
</script>
五、鼠标移动事件示例
定义事件的操作和上面的操作没有什么区别 , 只是换成了mouseover , 另外一个就是 ,v-on: 可以换成@, 两者之间是等价的
然后还有一个阻止事件传播 , 及时这个文件域是定义在div中的 , 所以移动到文件域就相当于移动到了div中 ,所以我们需要在文件域的函数中阻止事件传播
event.stopPropagation();
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("这是一个div区域");
},
fun2:function (event) {
alert("这是一个文件域");
event.stopPropagation();
}
}
});
</script>
六、事件修饰符示例
这个就是在提交表单的时候 , 会触发一个函数 , 因为后边加了prevent 所以也就是阻止提交 ,
然后我们在创建一个Vue对象 , 这样我们就可以对这个表单进行控制了
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="get">
<input type="submit" value="点点我进行提交">
</form>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
七、V-text和V-html示例
两者之间的区别就是V-text不会去解析等各种HTML标签 , 而V-html则会去解析这些东西
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"<h1>陈小姐 , 做我女朋友吧 !<h1>"
}
});
</script>
八、V-bind示例
插值表达式不能作用于HTML标签的属性取值 ,要想给HTML属性设置变量的值 , 需要使用V-bind
<body>
<div id="app">
<font v-bind:color="c1">我是一个小逗比</font>
<hr>
<font v-bind:color="c2">我是一个大逗逼</font>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
c1:"green",
c2:"blue"
}
});
</script>
九、V-for示例
首先在vue中定义一个数组让我用来遍历 , 然后使用v-for即可 , v-for=" ", " "中写上一个变量并且在哪个数组中
<body>
<div id="app">
<li v-for="(item) in arr">{{item}}</li>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
arr:['陈','小','姐','我','喜','欢','你'],
}
});
</script>
遍历集合
<body>
<div id="app">
<li v-for="(k,v) in stu">{{v}}={{k}}</li>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
stu:{
id:1,
name:"张三丰",
age:"100",
height:"173"
}
}
});
</script>
遍历对象数组
<body>
<div id="app">
<table border="1px">
<tr>
<td>ID</td>
<td>name</td>
<td>age</td>
</tr>
<tr v-for="(stu,index) in stus">
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
stus:[
{id:1, name:"张三丰", age:"100"},
{id:2, name:"科比", age:"40"},
{id:3, name:"张帅", age:"25"}
]
}
});
</script>
十、遍历对象数组示例
<body>
<div id="app">
<table border="1px">
<tr>
<td>ID</td>
<td>name</td>
<td>age</td>
</tr>
<tr v-for="(stu,index) in stus">
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
stus:[
{id:1, name:"张三丰", age:"100"},
{id:2, name:"科比", age:"40"},
{id:3, name:"张帅", age:"25"}
]
}
});
</script>
十一、V-model示例
v-model就是可以取出一些对象格式的数据 , 利用对象名 .属性名 即可取出这些东西
<body>
<div id="app">
<form action="#" method="post">
<input type="text" v-model="user.username">
<br>
<input type="password" v-model="user.password">
</form>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
user:{
username:"张无忌",
password:"1234"
}
}
});
</script>
十二、v-show和v-if示例
show和if其实没有太大区别 ,可以用来控制是否显示内容 ,true就显示 ,false就不显示
<body>
<div id="app">
<span v-if="show">你好啊</span>
<hr>
<span v-show="show">今天天气不错</span>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
show:true
}
});
</script>
到此这篇关于HTML页面中使用Vue（快速学会上手YUE）的文章就介绍到这了,更多相关HTML中使用Vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最近翻阅了一下vue。发觉有一个单文件组件之前基本忽视掉了。所以本文就详细的介绍了vue单文件组件的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了基于vue的短信验证码倒计时demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue js格式化数字为金额格式代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,就是在保持代码运行结果不变的前提下,去除无用的代码,本文给大家介绍Vue 3.0中Treeshaking特性是什么,感兴趣的朋友一起看看吧2023-10-10
本文主要介绍了vue-router后台鉴权流程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
收集表单数据可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用，这篇文章主要介绍了vue的表单数据收集，基本指令和自定义指令,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了element-ui封装一个Table模板组件的示例，帮助大家更好的理解和学习vue框架的使用，感兴趣的朋友可以了解下2021-01-01
最新评论