Web前端 - Vue
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{}} 插值表达式，绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
基本数据渲染和指令
v-bind 特性被称为指令。指令带有前缀 v-，除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
<!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指令
单向数据绑定
这个指令一般用在标签属性里面，获取值
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!--简写方式-->
<h2 :title="message">
{{message}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
v-model 双向数据绑定
<!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="text" v-bind:value="searchMap.keyWord"/>
<!--双向绑定-->
<input type="text" v-model="searchMap.keyWord"/>
<p>{{searchMap.keyWord}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: 'soyoungboy'
}
}
})
</script>
</body>
</html>
事件操作
methods节点和绑定事件的操作
v-on 进行数件处理，v-on:click 表示处理鼠标点击事件
<!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绑定事件,调用方法 search-->
<button v-on:click="search()">查询</button>
<!--vue绑定事件简写,调用方法f1-->
<button @click="f1()">查询1</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{//定义多个方法
search() {
console.log('search....')
},
f1() {
console.log('f1...')
}
}
})
</script>
</body>
</html>
修饰符
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<!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">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username"/>
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods:{
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
})
</script>
</body>
</html>
条件渲染
v-if：条件指令
<!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="ok"/>是否同意
<!--条件指令 v-if v-else -->
<h1 v-if="ok">so young boy</h1>
<h1 v-else>so old boy</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
//默认false
ok:false
}
})
</script>
</body>
</html>
列表渲染
v-for：列表循环指令
<!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">
<ul>
<li v-for="n in 10"> {{n}} </li>
</ul>
<ol>
<li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
</ol>
<hr/>
<table border="1">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.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>
组件
全局组件
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
复用全局组件， 为引入上面的组件
<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="components/Navbar.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
实例生命周期
- beforeCreate: 第一个被执行的钩子方法，实例被创建出来之前执行,data 和 methods 中的 数据都还没有没初始化。
- created: 第二个被执行的钩子方法，data 和 methods 都已经被初始化好了,如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作。
- beforeMount：第三个被执行的钩子方法，模板已经在内存中编辑完成了，尚未被渲染到页面中。
- mounted：第四个被执行的钩子方法，内存中的模板已经渲染到页面，用户已经可以看见内容。
运行中的两个事件
beforeUpdate：数据更新的前一刻
updated：内存中的数据已更新，并且页面已经被渲染
Vue路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库。
<!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>
Web前端 - Vue的更多相关文章
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
随机推荐
- 4- 信号量& 互斥量
信号量,计数值 问题: 还是那个AB任务互斥调度的问题,B等A执行完毕的过程中,判断标志位会耗费CPU资源 利用信号量,当没有信号的时候,不参与调度 计数信号量(不能用来传输数据) static S ...
- vue 下 placeholder 修改颜色
input::placeholder{ color:#585c89 !important; }
- Vite-vue3 架构设计
Vite-vue3 架构设计 基础信息 Gitee项目地址:https://gitee.com/pengchenggang/vite-vue3 1 创建vite-vue3 初始化脚本 $ npm in ...
- 向TreeView添加自定义信息
可在 Windows 窗体 TreeView 控件中创建派生节点,或在 ListView 控件中创建派生项. 通过派生可添加任何所需字段,以及添加处理这些字段的自定义方法和构造函数. 此功能的用途之一 ...
- [.NET项目实战] Elsa开源工作流组件应用（一）： Elsa工作流简介
Elsa工作流简介 工作流是什么? 引用维基百科中对工作流的解释: 是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.工作流建模,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以 ...
- 一个.net6开发的截图后ocr小工具
软件使用 .net6 winfrom 开发 ocr使用的是paddleOCR .net下调用paddleOCR 用 sdcb.PaddleOCR https://github.com/sdcb/Pad ...
- CloudXR技术如何运用于农业？
随着科技的不断发展和应用的深入,农业领域也在逐渐引入新技术来优化生产效率和成本.改进管理和监控等.云化XR(CloudXR)作为一种融合了云计算.虚拟现实(VR)和增强现实(AR)等技术的解决方案,也 ...
- ElasticSearch - 基础概念和映射
前言 写这篇东西,是因为官方文档看着太痛苦,于是乎想用大白话来聊聊 ElasticSearc (下面都简称ES).所以下文对于 ES 一些概念的表述可能会与官方有出入,所以需要准确的表述和详细定义的, ...
- 记录--不定高度展开收起动画 css/js 实现
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 不定高度展开收起动画 最近在做需求的时候,遇见了元素高度展开收起的动画需求,一开始是想到了使用 transition: all .3s; ...
- 记录--新的HTML标签 ：<search>
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本文介绍了一种新的HTML元素搜索方法,并提供了一个实用的工具来帮助开发者快速找到所需的元素.这对于那些需要处理大量HTML元素的开发者来 ...