Vue前端框架的使用
目录
一、什么是Vue
1.2 如何使用Vue
1.3 el挂载点
1.4 date属性
二、Vue的指令
2.1 Vue指令（v-text v-html）
2.2 Vue指令（v-on）
2.3 Vue指令（v-show v-if）
2.4 Vue指令（v-bind）
2.5 Vue指令（v-for）
2.6 Vue指令（v-on的补充）
2.7 Vue指令（v-model）
三、总结
一、什么是Vue
1.2 如何使用Vue
- 引入Vue.js
- 创建Vue对象
- 把Vue对象挂载到一个Html双向标签上
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--①引入vue.js--><script type="text/javascript" src="/js/vue.js"></script></head><body><!--②创建一个双标签--><div id="app">{{msg}}</div></body><!--③创建自己的js代码--><script>/*创建Vue对象*/var app=new Vue({//el:表示把vue对象挂载到哪个表示上el:"#app",//data:vue中的数据data:{msg:"老闫真牛连vue也会，他是被逼的2。",}})</script></html>1.3 el挂载点
Vue实例的作用范围是什么呢
Vue会管理el选项名中的元素及其内部的后代元素
是否可以使用其他的选择器
可以的，一般我们使用id选择器，因为id选择器是唯一的
是否可以设置其他的dom元素呢？
可以的，该dom必须是一个双标签，不能是body--html标签
1.4 date属性
data表示vue中定义的数据变量。 数据可以时对象，数组，普通数据类型【int double string】
<!--②创建一个双标签-->
<div id="app">{{msg}}<p>{{msg}}</p>{{hobby}}<br>{{people.name}}
</div><div>{{msg}}
</div>
</body>
<!--③创建自己的js代码-->
<script>/*创建Vue对象*/var app=new Vue({//el:表示把vue对象挂载到哪个表示上el:"#app",//data:vue中的数据data:{msg:"老闫真牛连vue也会，他是被逼的2。",age: 15,hobby:["吸烟","喝酒","打牌","钓鱼"],people:{"name":"刘德华","age":18,"address":"香港"}}})
</script>二、Vue的指令
2.1 Vue指令（v-text v-html）
相当于标签中的属性，加在标签内。 设置标签的文本值（textContent）
v-text:不能解析html标签
v-html: 可以解析html标签。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--①引入vue.js--><script type="text/javascript" src="js/vue.js"></script>
</head>
<body><!--②创建一个双标签-->
<div id="app"><!--v-text:会把该标签内的原来内容覆盖--><p v-text="msg">你好李焕英</p><p>你好李焕英{{msg}}</p><!--v-html和v-text的区别v-html可以解析html标签--><p v-html="msg"></p>
</div></body>
<!--③创建自己的js代码-->
<script>/*创建Vue对象*/var app=new Vue({//el:表示把vue对象挂载到哪个表示上el:"#app",//data:vue中的数据data:{msg:"<font color='red'>老闫</font>真牛连vue也会，他是被逼的2。",age: 15,hobby:["吸烟","喝酒","打牌","钓鱼"],people:{"name":"刘德华","age":18,"address":"香港"}}})
</script>
</html>2.2 Vue指令（v-on）
为元素绑定事件， 等价于onclick 在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascript" src="js/vue.js"></script></head><body><%--创建一个双标签--%><div class="app">{{age}}<br><%--绑定点击事件--触发add方法。在vue中定义方法。如果方法是无参可以省略（）--%><input type="button" value="点击" v-on:click="add"/><br><%--vue提供了一种简洁模式@等价于v-on:--%><input type="button" value="点击2" @click="sub"/><br></div></body><script>/*创建一个Vue对象*/var app = new Vue({//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效el:".app",data:{name:"刘德华",age:18,hobby:["你好","大家好"]},//表示vue中定义得方法。methods:{//无需添加function关键字add(){//使用上面得data数据. this当前类对象 Vue对象this.age++;},sub(){this.age--;}}})</script>
</html>2.3 Vue指令（v-show v-if）
根据表达式的真假，切换元素的显示和隐藏
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascript" src="js/vue.js"></script></head><body><%--创建一个双标签--%><div class="app">{{age}}<br><%--v-show:判断表达式是否为真如果为真则显示指令所在得标签。通过css得display来控制标识得显示和隐藏--%><img src="imgs/1.jpg" width="100" height="200" v-show="age>18&&age<25"/><%--v-if:根据表达式得真假控制标签得显示。通过创建和移除标签来控制显示和隐藏。如果显示和隐藏得频率非常高，那么该标签得效率会低--%><img src="imgs/1.jpg" width="100" height="200" v-if="age>18&&age<25"/><br><input type="button" value="点检" @click="fun"/></div></body><script>/*创建一个Vue对象*/var app = new Vue({//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效el:".app",data:{flag:true,age:17,},methods:{fun(){this.age++;}}})</script>
</html>2.4 Vue指令（v-bind）
设置元素的属性（比如 : src,title,class） 设置元素的属性 绑定元素得属性值
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascript" src="js/vue.js"></script><style>.myimg {border: 2px solid red;}</style>
</head>
<body>
<%--创建一个双标签--%>
<div class="app"><%--v-bind:设置标签得属性--%><img v-bind:src="imgSrc" width="100px" height="100px" v-bind:class="flag?'myimg':''"/><%--vue提供了一种简洁模式: 省略v-bind --%><img :src="imgSrc" width="100px" height="100px" :class="flag?'myimg':''"/><br><input type="button" value="点击" @click="fun"/>
</div></body><script>/*创建一个Vue对象*/var app = new Vue({//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效el: ".app",data: {imgSrc: "imgs/1.jpg",flag: true},methods: {fun() {this.imgSrc = "imgs/dl.jpg";this.flag = !this.flag}}})
</script>
</html>2.5 Vue指令（v-for）
根据数据生成列表结构 循环遍历指令 v-for="(变量名,下标) in 数组|集合"
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascript" src="js/vue.js"></script></head><body><%--创建一个双标签--%><div class="app"><ul><li v-for="(a,index) in hobby">{{index}}---->{{a}}</li></ul><table border="1" width="200" cellpadding="0" cellspacing="0"><tr v-for="(item,index) in peoples"><td>{{index}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td></tr></table></div></body><script>/*创建一个Vue对象*/var app = new Vue({//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效el:".app",data:{hobby:["游泳","爬山","看书"],peoples:[{"name":"张三1","age":15,"address":"郑州1"},{"name":"张三2","age":15,"address":"郑州2"},{"name":"张三3","age":15,"address":"郑州3"}]}})</script>
</html>2.6 Vue指令（v-on的补充）
调用事件方法时可以传递参数 传递自定义参数,事件修饰符
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascript" src="js/vue.js"></script></head><body><%--创建一个双标签--%><div class="app"><table border="1" width="200" cellpadding="0" cellspacing="0"><tr v-for="(item,index) in peoples" ><td>{{index}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td><td><a @click="del(item)">删除</a></td></tr></table><%--keyup:键盘弹起事件 enter:回车键--%><input type="text" name="name" @keyup.enter="show('hello')"/></div></body><script>/*创建一个Vue对象*/var app = new Vue({//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效el:".app",methods:{del(n){console.log(n);//浏览器控制台输出},show(c){alert("触发了回车键"+c);}},data:{peoples:[{"name":"张三1","age":15,"address":"郑州1"},{"name":"张三2","age":15,"address":"郑州2"},{"name":"张三3","age":15,"address":"郑州3"}]}})</script>
</html>2.7 Vue指令（v-model）
获取和设置==表单元素==的值 （双向数据绑定）
哪些是表单元素
<input type="text" | password | hidden | radio | checkbox"/>
<select>
<textarea>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascript" src="js/vue.js"></script></head><body><%--创建一个双标签v-model它属于双向绑定:如果输入框发送改变，属性name也会跟着变。如果name属性改变，则输入得内容也会改变。--%><div class="app">{{name}}<br><input type="text" v-model="name"/><button @click="fun">点击</button></div></body><script>/*创建一个Vue对象*/var app = new Vue({//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效el:".app",data:{name:"张三",},methods:{fun(){this.name="刘德华"}}})</script>
</html>三、总结
（1）创建Vue对象
var app = new Vue({
el:"",
date:{},
methods:{
},
})（2）Vue指令
-v-text v-html
-v-on（补充 传递参数 键盘事件）
-v-show v-if
-v-bind
-v-for
-v-model --设置和获取表单元素的值
Vue前端框架的使用相关推荐
- 2021 年 Angular vs. React vs. Vue 前端框架对比
2021 年 Angular vs. React vs. Vue 前端框架对比 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...
- 使用Vue前端框架实现知乎日报app
使用Vue前端框架实现知乎日报app 这是:主页代码 <template><view class="content"><view class=&quo ...
- vue前端框架有哪些
vue前端框架有哪些 2022-02-23 · Worktile 项目协作工具 vue前端UI框架有:1.Element 2.iview 3.vuetify 4.vue-strap 5.cube-ui ...
- 分布式电商项目十四：Vue前端框架简介及使用
Vue前端框架简介及使用 就像是后端我们使用springboot来进行开发一样,前端需要使用Vue框架进行开发.由于前端不是我们的主要内容,所以只介绍简单的使用内容.具体更深的内容请参考Vue的官方网 ...
- Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板 演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
- Vue前端框架选型论述
Vue前端框架选型论述 1. 前端3大巨头框架综述 React 起源于 Facebook 的内部项目,社区非常活跃,下载使用当前排行第一名,但是 React 的只能是半开源,在不涉及到 Faceboo ...
- 搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
- 基于vue前端框架_基于前端访问控制框架的Vue
基于vue前端框架 权限访问控制 (vue-access-control) Vue-Access-Control is a solution of front-end user rights cont ...
- html接入qq客服,Vue 前端框架接入QQ在线客服
Vue 前端框架接入QQ在线客服,效果如下图: 后面就根据自己的需要选择不同的方式,下面是使用教程: ------------------------------------------------- ...
- 开发基于vue前端框架下的系统的UI自动化，记录总结踩的坑
在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑. 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 ...
最新文章
- AI 产品经理的三重门
- OpenCV的k - means聚类 -对图片进行颜色量化
- ZOJ 3430 Detect the Virus 【AC自动机+解码】
- [NOIP2016 提高组] 愤怒的小鸟
- 腾讯会议扩容背后：100万核计算资源全由自研服务器星星海支撑
- 蓝桥杯 ALGO-47 算法训练 蜜蜂飞舞
- 为什么再次调用编辑器总是加载同一张图片？
- 伤感日志：时光远走，流年轻度
- 阿里云OSS上传图片、PDF设置链接预览
- 开源分布式配置组件conf使用教程
- python数据分析之《太平洋汽车》点评数据及论坛文本分析
- web开发详解，学习web前端开发的网站
- 20201104CSP提高组训练
- 漫谈SOA(面向服务架构)
- TNS-01189、TNS-01106
- Javascript 中发出 HTTP 请求
- 4.12 通联支付面试题
- 远鉴科技“语音识别”技术获美亚柏科青睐！
- 算法练习 护林员盖房子
- oppo手机隐藏的计算机冷知识,OPPO手机那些隐藏按键里的功能有什么用？