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 ...
随机推荐
- 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（12.A）- uSDHC eMMC启动时间(RT1170)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT1170 uSDHC eMMC启动时间. 本篇是 i.MXRT1170 启动时间评测第五弹,前四篇分别给大家评测了 ...
- C 语言编程 — 高级数据类型 — 指针
目录 文章目录 目录 前文列表 指针 声明指针 使用指针 NULL 指针 指针的算术运算 指向指针的指针 将指针作为实际参数传入函数 从函数返回指针 一个古老的笑话 前文列表 <程序编译流程与 ...
- Angular快速生成文件基本命令
ng new 作用:创建一个已被初始化的Angular应用 命令选项 参数 说明 --collection -c 指定工程模板 属于高阶操作,暂不知道如何使用 --directory 指定新项目创建的 ...
- 使用SQL语句完成数据表的去重工作
引入问题 可能大家都遇到过这样一种情况,一张表存在若干行数据,只是主键值相同,但是其它字段都是相同的,这就是我们通常所说的数据库重复数据,那我们是如何将这些数据删除呢?现在我们就介绍一种方法来实现数据 ...
- DRF之通过GenericAPIView的视图子类实现数据的增删改查接口
1.安装DRF pip install djangorestframework 2.将DRF注册到APP中 INSTALLED_APPS = [ 'django.contrib.admin', 'dj ...
- 用tkinter编写一个简单的登录注册界面
代码: from tkinter import * window = Tk() window.geometry('400x300+500+150') window.title('xxx系统') Can ...
- SQL KEEP 窗口函数等价改写案例
一哥们出条sql题给我玩,将下面sql改成不使用keep分析函数的写法. select deptno, ename, sal, hiredate, min(sal) keep(dense_rank f ...
- Qt-FFmpeg开发-回调函数读取数据（8）
音视频/FFmpeg #Qt Qt-FFmpeg开发-使libavformat解复用器通过自定义AVIOContext读取回调访问媒体内容 目录 音视频/FFmpeg #Qt Qt-FFmpeg开发- ...
- uniapp 跳转指定的tab导航页面
考察的知识点:1.uniapp的页面跳转方法:uni.navigateTo2.页面跳转传值的方法:'?名称=值' 的方式3.参数的接收 onload(option){} 第一个页面的写法: toCom ...
- uniapp 拨打电话功能
phoneNumber进行动态调用时候一定要添加引号,否则会报错 1 call() { 2 uni.makePhoneCall({ 3 phoneNumber: 'this.leads.tel' // ...