Vue的框架(了解)
ztj100 2024-12-31 15:58 24 浏览 0 评论
前端MVC设计模式
- MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
- Model: 模型, 指数据模型,这个数据一般来自于服务器
- View: 视图, 指页面标签内容
- Controller:控制器, 指将数据展示到视图中的过程代码
- 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.
M,V,VM设计模式
- Model: 模型, 指数据模型,这个数据一般来自于服务器
- View: 视图, 指页面标签内容
- ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.
Vue
- Vue框架是目前最流行的前端框架
- Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.
安装独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
<script src="https://cn.vuejs.org/js/vue.min.js">官网链接地址<script>模板语法
- 插值 文本（数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值）
- v-text="变量", 让元素的文本内容和变量进行绑定
- 使用 v-html 指令用于输出 html 代码：
<div>
<!-- {{info}}插值，让此处的文本和data里面的变量进行绑定-->
<h1>{{info}}</h1>
<!-- v-text="变量"，让此处的文本和data里面的变量进行绑定-->
<p v-text="info"></p>
<hr>
{{info}}
<p v-html="address"></p>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:"文本相关练习",
address:"地址<b>杭州</b>"
}
})
</script>- 属性 （HTML 属性中的值应使用 v-bind 指令）
- v-bind:属性名="变量", 让元素的xxx属性和变量进行绑定 可以省略掉v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a><body>
<div>
<!--v-bind属性绑定-->
<input type="text" v-bind:value="msg">
<!--v-bind属性绑定 简写-->
<input type="text" :value="msg">
<a :href="url">超链接</a>
<img :src="imgUrl" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
msg:"属性绑定测试",
url:"http://www.baidu.com",
imgUrl:"../b.jpg"
}
})
</script>
</body>- 用户输入（input 输入框中我们可以使用 v-model 指令来实现双向数据绑定）
- v-model="变量", 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.
<body>
<div>
<!--当需要获取input值的时候使用双向绑定-->
<input type="text" v-model="msg">
<h1>{{msg}}</h1>
a b
<hr>
<input type="radio" v-model="gender" value="男">男
<input type="radio" v-model="gender" value="女">女
<h2>{{gender}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
msg:"双向绑定测试",
gender:"男"
}
})
</script>- 事件处理器（事件监听可以使用 v-on 指令）
- v-on:事件名="方法", 事件绑定 简写@事件名="方法" , 调用的方法必须声明在Vue里面的methods里面
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a><body>
<div>
<input type="button" value="按钮1" v-on:click="f()">
<input type="button" value="按钮2" @click="ff()">
{{info}}
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{info:"事件绑定"},
methods:{
f:function () {
v.info="按钮1点击了";
},
ff(){
v.info="按钮2点击了";
}
}
})
</script>- 条件判断v-if（条件判断使用 v-if 指令）
- v-if 指令将根据表达式 isVisible的值(true 或 false )来决定
- v-else 可以用 v-else 指令给 v-if 添加一个 "else" 块
- v-else-if v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。
- v-show 我们也可以使用 v-show 指令来根据条件展示元素
<body>
<div>
<!--v-if让元素是否显示和变量进行绑定, 不显示时是把元素删除了-->
<h1 v-if="isVisible">刘德华</h1>
<!--v-else和v-if结合使用 和上面条件取反-->
<h1 v-else>刘苍松</h1>
<!--v-show让元素是否显示和变量进行绑定, 不显示时是把元素隐藏了
(频繁切换显示状态时使用)-->
<h2 v-show="isVisible">张学友</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
isVisible:true
}
})
</script>循环语句 (循环使用 v-for 指令)
v-for 指令需要以 car in arr 形式的特殊语法， car是源数据数组并且 arr是数组元素迭代的别名。
<body>
<div>
<table border="1">
<caption>国产车</caption>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>类型</th>
</tr>
<tr v-for="(car,i) in arr">
<td>{{i+1}}</td>
<td>{{car.name}}</td>
<td>{{car.price}}</td>
<td>{{car.type}}</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
arr:[{name:"比亚迪",price:250000,type:"轿车"},
{name:"红旗",price:888888,type:"轿车"},
{name:"东风导弹",price:9999999999,type:"导弹"}]
}
})
</script>
</body>Ajax(axios) -GET
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://www.celinf.com/json_demo.json')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})Ajax(axios) -POST
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.post('https://www.celinf.com/axios_post.php')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})阻止a标签跳转四种方法
<!--第一种-->
<a href="javascript:;">我不会被跳转</a>
<!--第二种-->
<a href="javascript:void(0)">我不会被跳转</a>
<!--第三种-->
<a href="http://www.baidu.com" onclick="fn.skip_1();return false">我不会被跳转</a>
<!--第四种-->
<a href="http://www.baidu.com" onclick="fn.skip_2()">我不会被跳转</a>
<script>
var fn = {
skip_1: function() {
console.log('我不会被跳转');
},
skip_2: function() {
//阻止冒泡
console.log('我不会被跳转')
var event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
</script>学习记录，如有侵权请联系删除
相关推荐
- 人生苦短，我要在VSCode里面用Python
-
轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里，VisualStudioCode（以下简称VSCode）可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...
- 亲测可用:Pycharm2019.3专业版永久激活教程
-
概述随着2020年的到来，又有一批Pycharm的激活码到期了，各位同仁估计也是在到处搜索激活方案，在这里，笔者为大家收录了一个永久激活的方案，亲测可用，欢迎下载尝试：免责声明本项目只做个人学习研究之...
- Python新手入门很简单（python教程入门）
-
我之前学习python走过很多的歧途，自学永远都是瞎猫碰死耗子一样，毫无头绪。后来心里一直都有一个做头条知识分享的梦，希望自己能够帮助曾经类似自己的人，于是我来了，每天更新5篇Python文章，喜欢的...
- Pycharm的设置和基本使用（pycharm运行设置）
-
这篇文章，主要是针对刚开始学习python语言，不怎么会使用pycharm的童鞋们；我来带领大家详细了解下pycharm页面及常用的一些功能，让大家能通过此篇文章能快速的开始编写python代码。一...
- 依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!
-
我真的想知道作者到底咋把PyTorch教程整得这么牛的啊？明明在内容上已经足以成为付费教材了，但作者偏要免费开源给大家学习！...
- 手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace
-
这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace，并手把手教你如何在自己的电脑端进行部署和测试运行，运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世，...
- 进入Python的世界02外篇-Pycharm配置Pyqt6
-
为什么这样配置，要开发带UI的python也只能这样了，安装过程如下：一安装工具打开终端：pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin，安装汉化插件，...
- vs code如何配置使用Anaconda（vscode调用anaconda库）
-
上一篇文章中（Anaconda使用完全指南），我们能介绍了Anaconda的安装和使用，以及如何在pycharm中配置Anaconda。本篇，将继续介绍在vscode中配置conda...
- pycharm中conda解释器无法配置（pycharm配置anaconda解释器）
-
之前用的好好的pycharm正常配置解释器突然不能用了？可以显示有这个环境然后确认后可以conda正在配置解释器，但是进度条结束后还是不成功！！试过了pycharm重启，pycharm重装，anaco...
- Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!
-
我们都知道现在已经进入了Rust时代，不仅很多终端常用的工具都被rust重写了，而且现在很多前端工具也开始被Rust接手了，这不，现在就出现了一款JS工具管理工具，有了它，你可以管理多版本的js工具，...
- 开发者的福音，ElectronEgg: 新一代桌面应用开发框架
-
今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员，以前面对这项任务桌面应用开发在时，可能会感到无从下手，甚至觉得这是一项困难的挑战。ElectronEgg的出现，它能...
- 超强经得起考验的低代码开发平台Frappe
-
#挑战30天在头条写日记#开始进行管理软件的开发来讲，如果从头做起不是不可以，但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的，将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...
- 一文带你搞懂Vue3 底层源码（vue3核心源码解析）
-
作者：妹红大大转发链接：https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...
- 基于小程序 DSL(微信、支付宝)的，可扩展的多端研发框架
-
Mor(发音为/mr/，类似more)，是饿了么开发的一款基于小程序DSL的，可扩展的多端研发框架，使用小程序原生DSL构建，使用者只需书写一套（微信或支付宝）小程序，就可以通过Mor...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 人生苦短，我要在VSCode里面用Python
- 亲测可用:Pycharm2019.3专业版永久激活教程
- Python新手入门很简单（python教程入门）
- Pycharm的设置和基本使用（pycharm运行设置）
- 依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!
- 手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace
- 进入Python的世界02外篇-Pycharm配置Pyqt6
- vs code如何配置使用Anaconda（vscode调用anaconda库）
- pycharm中conda解释器无法配置（pycharm配置anaconda解释器）
- Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)