yb课堂 新版VueCli 4.3创建vue项目，Vue基础语法入门 《二十九》
Vue模版语法开发起步
- 基于HTML的模版语法，允许声明式地将DOM绑定至底层Vue实例的数据
- 用简洁的模版语法来声明式的将数据渲染进DOM的系统
- 结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件并应用到DOM操作上
简单入门
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源
message:"欢迎学习Vue"
}
})
</script>
</body>
</html>
{{}}
- 文本插值
- 里面JavaScript表达式
{{5+5}}
{{message.split('').reverse().join('')}}
Vue指定和参数
讲解什么是Vue指令
指令：带有V-前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM
- v-bind 指令
- HTML属性中的值更新时使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{5+5+2}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p><a v-bind:href="url">百度一下试试看</a> </p>
</div>
<script>
new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源
message:"欢迎学习Vue",
url:'http://www.baidu.com'
},
methods:{ //自定义方法 }
})
</script>
</body>
</html>
- v-if v-else 指令
- 逻辑判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random()>0.5">大于0.5</div>
<div v-else>小于0.5</div>
</div>
<script>
new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源
},
methods:{ //自定义方法 }
})
</script>
</body>
</html>
- v-model 指令
- 实现双向数据绑定
- 一般在input、select、textarea、checckbox、radio等表单上使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{phone}}</p>
手机号<input v-model="phone"/>
</div>
<script>
new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源
phone:"0000"
},
methods:{ //自定义方法 }
})
</script>
</body>
</html>
- v-for 循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="user in users">{{user.name}}</li>
</ol>
</div>
<script>
new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源
users:[
{name:"Anna小姐姐"},
{name:"老王"},
{name:"小陈"}
]
},
methods:{ //自定义方法 }
})
</script>
</body>
</html>
- v-on 指令
- 监听时间，并对用户的输入进行响应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<button v-on:click="changeTitle">完善标题</button>
</div>
<script>
new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源
title:"面试专题课程"
},
methods:{ //自定义方法
changeTitle:function(){
this.title=" || yb课堂 2020年 "+this.title;
}
}
})
</script>
</body>
</html>
常见v-bind和v-on缩写
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url" > 点我一下 </a> <!--缩写 -->
<a :href="url" > 点我一下 </a>
v-on缩写
<!-- 完整语法 -->
<a v-on:cliick="changeTitle">点我一下</a> <!-- 缩写 -->
<a @cliick="changeTitle">点我一下</a>
参数：在指令后以冒号指令，例如v-bind指令被用来响应地更新HTML属性
Vue里面的组件（多次复用）
- vue的组件
- 扩展HTML元素，封装可重用的代码（就是通用的模块）
- 注册组件
- Vue.component(组件名，选项)
- 组件可以拷贝多次，复用多次
- 每个组件都会各自独立维护它的数据
- data必须是一个函数，而不是前面讲的json对象
- 每个实例可以维护一份被返回对象的独立的拷贝，否则数据就会共享出现问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<yb_component></yb_component>
</div>
<script>
Vue.component('yb_component',{ //定义组件
data:function(){ //组件的数据源
return {
count:0
}
},
template:'<button @click="count++"> 点击{{count}}次 </button>' //定义一个模版
}) new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源 },
methods:{ //自定义方法 }
})
</script>
</body>
</html>
通过prop向子组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yb课堂快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<yb_component message="yb课堂 欢迎学习Vue "></yb_component>
</div>
<script>
Vue.component('yb_component',{ //定义组件
props: {
message:{
type:String
}
},
data:function(){
return {
count:0
}
},
template:'<button @click="count++">{{message}} 点击{{count}}次 </button>' //定义一个模版,组件里的template只能包含一个根节点
}) new Vue({
el:'#app', //绑定到那个元素
data:{ //数据源 },
methods:{ //自定义方法 }
})
</script>
</body>
</html>
yb课堂 新版VueCli 4.3创建vue项目，Vue基础语法入门 《二十九》的更多相关文章
- Vue 项目 Vue + restfulframework
Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- Vue项目搭建基础之Vue-cli模版测试
第一步安装node,nodejs.org下载node稳定版安装包.node -v (查看node版本)npm install -g vue-cli(安装Vue脚手架环境)vuevue listvu ...
- Vue搭建项目的完整流程 如何搭建一个完整的vue项目 vue项目架构
vue项目架构 技术栈:vue3.vue-router .vuex(和pinia).element plus .axios.ts.sass 1.安装vue3 脚手架+ ts vue create ad ...
- 使用IDEA创建Maven项目和Maven使用入门（配图详解）
本文详解的讲解了使用IDEA创建Maven项目,及Maven的基础入门. 1.打开IDEA,右上角选择File->New->Project 2.如图中所示选择Maven(可按自己所需添加, ...
- vue项目实基础到实战，入门到精通，移动商城
最近发现许多的朋友都问我有没有vue项目的案例学习,最近正在学习vue,在这可以分享给大家,希望大家学有所成,相互交流共同进步,先不说了,吃个宵夜. 就这么多吧,需要的可以在下方留言或者加qq:116 ...
- vue项目中快捷语法糖
1.Vue.js是渐进式框架,采用自底向上增量开发的设计基于MVVM思想. 2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 3.Vue.js 的目标是通过尽可能简 ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- Vue 2.0基础语法：系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
随机推荐
- 面向K-12学生的远程访问学校计算机实验室
为了应对新冠肺炎大流行,许多学校被迫采用远程学习和混合时间制度.在家学习的学生必须使用自己的个人设备或学校提供的设备(例如 Chromebook )来完成课堂作业. 尽管许多解决方案可以帮助学生和 ...
- 内网渗透 Metasploit(MSF)基础使用
免责申明 以下内容仅供学习使用,非法使用造成的问题由使用人承担 攻击思路 漏洞探测(信息收集) <- fsacn,namp | 漏洞利用 <- 工具(msf等) | 获取服务器权限 MSF ...
- nohup Command [ Arg … ] [ & ]
nohup 英文全称:no hang up 不挂断的意思.退出终端不挂断程序的运行.在默认的情况下,会输出一个名叫 nohup.out 的文件到当前目录下.nohup Command [ Arg - ...
- 5分钟明白LangChain 的输出解析器和链
本文介绍 LangChain 的输出解析器OutputParser的使用,和基于LangChain的LCEL构建链. 1. 输出解析器OutputParser 1.1.为什么需要OutputParse ...
- Android 13 - Media框架（17）- OpenMax（五）
关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节最后来了解 OMX_Video.h 以及 OMX_Audio.h 中的内容 1.OMX_Video.h 这里只了解该文件中的 OMX_VIDE ...
- 【Effective C++】设计与声明——考虑写出一个不抛异常的swap函数
wap是个有趣的函数.原本它只是STL的一部分,而后成为异常安全性编程的脊柱,以及用来实现自我赋值可能性的一个常见机制.所谓swap两对象值,就是将两对象的值交换. 典型实现 缺省情况下的swap动作 ...
- itest(爱测试)开源接口测试&敏捷测试&极简项目管理 7.1.0 发布，ui优化及bug修复
(一)itest 简介及更新说明 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试,接口Mock 6合1,又有丰富的统计分析.可按测试包 ...
- Java中Calendar类与SimpleDateFormat类的介绍
目录 Calendar类(关于日期的一些方法) get(Calendar.XXX); get(Calendar.Year) get(Calendar.MONTH) get(Calendar.DAY_O ...
- docker使用Open Policy Agent(OPA)进行访问控制
目录 一.系统环境 二.前言 三.Open Policy Agent 简介 四.Rego 语言简介 五.配置基本环境 六.docker安装OPA插件 6.1 安装docker 6.2 docker安装 ...
- 通过 Canal 将 MySQL 数据实时同步到 Easysearch
Canal 是阿里巴巴集团提供的一个开源产品,能够通过解析数据库的增量日志,提供增量数据的订阅和消费功能.使用 Canal 模拟成 MySQL 的 Slave,实时接收 MySQL 的增量数据 bin ...