第4篇 vue的基本语法操作以及组件，声明周期，路由的操作

一 vue常用操作案例

1.1 事件渲染

1.数据渲染的方式：使用插值表达式{{}}进行数据渲染

2.数据渲染的方式：以使用 v-bind指令，它的简写的形式就是一个冒号（:），v-bind 特性被称为指令。指令带有前缀 v-

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- {{}} 插值表达式，绑定vue中的data数据 -->div中内容： {{ message }}<h1 :title="info">{{ message }}</h1><h2 v-bind:title="content">{{ message }}</h2></div><h1 v-bind:class="myClass">这是一个标题</h1><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {message: '页面加载于 ' + new Date().toLocaleString(),content: '我是标题',info: '好痛苦..........',myClass: 'red'}})</script>
</body></html>

2.结果：

1.2 双向绑定

v-model 可以进行双向的数据绑定；

v-bind:value只能进行单向的数据渲染；

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- v-bind:value只能进行单向的数据渲染 --><input type="text" v-bind:value="searchMap.keyWord"><p>您要查询的是：{{searchMap.keyWord}}</p><!-- v-model 可以进行双向的数据绑定  --><input type="text" v-model="searchMap.keyWord"></div><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {searchMap:{keyWord: '我爱北京'}}})</script>
</body></html>

2.页面

1.3 click事件

1.说明

 v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法

2.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 --><button v-on:click="search()">查询</button>
<p>您要查询的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p></div><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {searchMap:{keyWord: 'wo ai beijing!!!'},//查询结果result: {}},methods:{search(){this.result = {"title":"baidu","site":"http://www.baidu.com"   }}}})</script>
</body></html>

3.结果

 1.4 表格提交且阻止默认行为

1.说明

     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：即阻止表单提交的默认行为 

2.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：即阻止表单提交的默认行为 --><form action="save" v-on:submit.prevent="onSubmit"><label for="username"><input type="text" id="username" v-model="user.username"><button type="submit">保存</button></label></form></div><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {user:{username:'默认值'}},methods:{onSubmit() {if (this.user.username) {alert('提交订单内容值>>>:'+this.user.username);} else {alert('请输入用户名')}}}})</script>
</body></html>

3.页面执行

1.5 for循环列表

1.说明

v-for：列表循环指令

2.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">
<!-- 2、遍历数据列表 -->
<table border="1"><!-- <tr v-for="item in userList"></tr> --><tr v-for="(item, index) in userList"><td>{{index}}</td><td>{{item.id}}</td><td>{{item.username}}</td><td>{{item.age}}</td></tr>
</table></div><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {userList: [{ id: 1, username: 'helen', age: 18 },{ id: 2, username: 'peter', age: 28 },{ id: 3, username: 'andy', age: 38 }]}})</script>
</body></html>

3.效果

1.6 if条件判断

1.说明

v:if条件指令：还有v-else、v-else-if 切换开销大

2.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><input type="checkbox" v-model="permitflag">同意许可协议<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --><h1 v-if="permitflag">if条件同意是吧.....</h1><h1 v-else>no  不同意要....</h1></div><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {permitflag:true}})</script>
</body></html>

3.效果

二  组件

2.1 组件 

2.1.1 局部

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><Navbar></Navbar></div><script src="vue.min.js"></script><script>var app = new Vue({el: '#app',// 定义局部组件，这里可以定义多个局部组件components: {//组件的名字'Navbar': {//组件的内容template: '<ul><li>首页</li><li>学员管理</li></ul>'}}
})</script>
</body></html>

2.效果

2.1.2  全局

1.自定义js文件

// 定义全局组件
Vue.component('Navbar', {template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

2.应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><Navbar></Navbar></div><script src="vue.min.js"></script><script src="zidingyi.js"></script><script>new Vue({el: '#app',data: {}})</script>
</body></html>

3.效果

三  生命周期

3.1 生命周期

1.创建时的四个事件

2.执行中的2个事件

 3.2 案例

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"></div><script src="vue.min.js"></script><script>new Vue({el: '#app',data: {},created(){alert('初始化页面.....');},mounted(){alert('渲染染成.....');}})</script>
</body></html>

2.页面

四 路由

4.1 路由的含义

 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。Vue.js 路由需要载入 vue-router 库

4.2 案例

1代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/">首页</router-link><router-link to="/student">会员管理</router-link><router-link to="/teacher">讲师管理</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div><script src="vue.min.js"></script>
<script src="vue-router.min.js"></script><script>// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Welcome = { template: '<div>欢迎</div>' }const Student = { template: '<div>student list</div>' }const Teacher = { template: '<div>teacher list</div>' }// 2. 定义路由// 每个路由应该映射一个组件。const routes = [{ path: '/', redirect: '/welcome' }, //设置默认指向的路径{ path: '/welcome', component: Welcome },{ path: '/student', component: Student },{ path: '/teacher', component: Teacher }]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({routes // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 从而让整个应用都有路由功能const app = new Vue({el: '#app',router})// 现在，应用已经启动了！</script>
</body></html>

2.页面

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/107754.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

element -ui table表格内容无限滚动 使用插件vue-seamless-scroll

element -ui table表格内容无限滚动 使用插件vue-seamless-scroll

使用插件 一、安装组件依赖 npm install vue-seamless-scroll 二、引入组件 import vueSeamlessScroll from "vue-seamless-scroll"; components: { vueSeamlessScroll }, <div class"table-list "><vue-seamless-scroll :class-option"…
阅读更多...
SSTI注入利用姿势合集

SSTI注入利用姿势合集

文章目录 前言SSTI模板注入原理&#xff1f;关于Python的类知识构造链的思路Jinjia2获取配置信息lipsumrequesturl_forget_flashed_messagesg对象 Jinjia2 Bypass.绕过引号绕过_绕过init过滤[ ]被过滤 羊城杯2023[决赛] SSTI2020XCTF 华为专项赛Tornado通用手法tornado.templat…
阅读更多...
js dispatchEvent派发自定义事件

js dispatchEvent派发自定义事件

低版本IE浏览器不兼容 dispatchEvent使用 在标准浏览器提供了元素触发自定义事件的方法 element.dispatchEvent()&#xff0c;就是说&#xff0c;我们可以不用在DOM上点击按钮触发事件&#xff0c;在代码里通过 dispatchEvent&#xff08;&#xff09;就能触发事件。如下&…
阅读更多...
NZ系列工具NZ03:利用右键进行筛选操作

NZ系列工具NZ03:利用右键进行筛选操作

【分享成果&#xff0c;随喜正能量】生活就是这样&#xff0c;别人看的是结果&#xff0c;而自己撑的却是整个过程。曾经的微笑&#xff0c;是一种心情&#xff0c;现在的微笑&#xff0c;只不过是一种表情。如果情绪不能用言语说出来&#xff0c;那就去吹吹风吧。。 我的教程…
阅读更多...
RobotFrameWork自动化测试环境搭建

RobotFrameWork自动化测试环境搭建

前言 Robot Framework是一款python编写的功能自动化测试框架。具备良好的可扩展性&#xff0c;支持关键字驱动&#xff0c;可以同时测试多种类型的客户端或者接口&#xff0c;可以进行分布式测试执行。主要用于轮次很多的验收测试和验收测试驱动开发&#xff08;ATDD&#xff0…
阅读更多...
蓝桥杯打卡Day7

蓝桥杯打卡Day7

文章目录 阶乘的末尾0整除问题 一、阶乘的末尾0IO链接 本题思路&#xff1a;由于本题需要求阶乘的末尾0&#xff0c;由于我们知道2*510可以得到一个0&#xff0c;那么我们就可以找出2的数和5的数&#xff0c;但是由于是阶乘&#xff0c;所以5的数量肯定是小于2的数量&#xf…
阅读更多...
企业网络革命：连接和访问的智慧选项

企业网络革命：连接和访问的智慧选项

近年来&#xff0c;企业网络通信需求可谓五花八门&#xff0c;变幻莫测。它不仅为企业的生产、办公、研发、销售提供全面赋能&#xff0c;同时也让企业业务规模变大成为了可能。今天&#xff0c;我们来聊聊广域网中两个不可忽视的概念&#xff1a;连接&#xff08;Connection&a…
阅读更多...
飞行动力学 - 第20节-part3-机翼位置及尾翼对横向稳定性影响 之 基础点摘要

飞行动力学 - 第20节-part3-机翼位置及尾翼对横向稳定性影响 之 基础点摘要

飞行动力学 - 第20节-part3-机翼位置及尾翼对横向稳定性影响 之 基础点摘要 1. 翼身干扰2. 平尾贡献3. 尾翼贡献4. 参考资料 1. 翼身干扰 - 机翼垂直位置 上单翼&#xff0c;增稳 下单翼&#xff0c;降低稳定性 上反角 增稳 正比于上反角 下反角 降低稳定性 反比于上反角 后掠…
阅读更多...
【窗体】Winform两个窗体之间通过委托事件进行值传递，基础篇

【窗体】Winform两个窗体之间通过委托事件进行值传递，基础篇

2023年&#xff0c;第38周。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 在实际项目中&#xff0c;我们可能会用到一些窗体做一些小工具或者小功能。比如&#xff1a;运行程序&#xff0c;在主窗体A基础上&#xff0c;点击某个按钮希望能…
阅读更多...
idea创建一个微服务项目

idea创建一个微服务项目

idea创建一个微服务项目 前提&#xff1a;懂得创建基于pom 的 springboot项目 1.像平时创建Maven项目一样创建一个项目 2.删掉src文件&#xff0c;只剩下下面的东西 3.基于这个项目创建model&#xff0c;model也是一个Maven项目&#xff0c;基于springboot mvc 都行&#xff…
阅读更多...
工作中有许多比较常用的SQL脚本

工作中有许多比较常用的SQL脚本

工作中有许多比较常用的SQL脚本&#xff0c;今天开始分几章分享给大家。 1、行转列的用法PIVOTCREATE table test (id int,name nvarchar(20),quarter int,number int) insert into test values(1,N苹果,1,1000) insert into test values(1,N苹果,2,2000) insert into test va…
阅读更多...
01-Kafaka

01-Kafaka

1、Kafka 2 的安装与配置 1、上传kafka_2.12-1.0.2.tgz到服务器并解压&#xff1a; tar -zxf kafka_2.12-1.0.2.tgz -C /opt 2、配置环境变量并更新&#xff1a; 编辑profile配置文件&#xff1a; vim /etc/profile #设置kafka的环境变量export KAFKA_HOME/opt/kafka_2.1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023