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 ...
随机推荐
- C数据结构线性表：实现顺序表的增删改查&完整篇
文章目录 ①前言 顺序表结构体的定义 ②初始化顺序表 ③插入新的元素 插入的时候需要特别注意的几点 ④删除元素 第一个删除元素功能实现 第二个删除元素功能实现 对代码下面中**i- -**的说明(第二 ...
- pageoffice6 版本实现在线打开word 文件禁止保存、禁止另存、禁止打印的需求
在实际项目需求中,有时需要限制用户的保存.另存.打印文件操作,实现此效果只需在OnPageOfficeCtrlInit或AfterDocumentOpened事件中调用js设置PageOffice控件 ...
- 磁盘空间满了报错cannot create temp file for here-document: No space left on device
如下:虚拟机设置的存储空间是20G,.目前用到100%了.执行命令会报错设备没有空间 我想删除镜像释放空间,也无法操作 分级找到文件,但是不知道删除哪个 退出的容器都找不到了 把昨天下午弄的删了 容器 ...
- .NET 将多个程序集合并成单一程序集的 4+3 种方法
将 .NET 程序集与依赖合并到一起的方法有下面四种: 使用 .NET Core 3.0 自带的 PublishSingleFile 属性合并依赖使用 Fody使用 SourceYard 源代码包使用 ...
- VisioForge.DotNet.Core.UI.WPF WPF摄像头 UVC 显示 支持 .net core
Sample applications available at https://github.com/visioforge/.Net-SDK-s-samples . Please add Visio ...
- Tkinter界面实操
常用opencv-python进行图像处理,有时需要图形用户界面,写个Demo以备不时之需. Tkinter 1. 导入库 由于 Tkinter 是内置到 python 的安装包中.只要安装好 Pyt ...
- Java常用的三个方法 `wait ` `notify` `notifyAll`
常用的三个方法 wait notify notifyAll wait();方法使当前线程进入等待状态,直到另一个线程调用该对象的notify()或notifyAll()方法来唤醒它 notify(); ...
- kettle从入门到精通 第五十三课 ETL之kettle MQTT/RabbitMQ consumer实战
1.上一节课我们学习了MQTT producer 生产者步骤,MQTT consumer消费者步骤.该步骤可以从支持MRQTT协议的中间件获取数据,该步骤和kafka consumer 一样可以处理实 ...
- idea中vue的启动方式
1.选取 2.添加 3.配置 4.启动 启动前先 在终端 执行 npm install 命令 再启动
- Mysql性能优化（详解）
引言 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操 ...