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 ...
随机推荐
- Splashtop用于远程实验室的功能得到增强
加利福尼亚州圣何塞,2020年8月11日,远程访问和远程支持解决方案的领导者Splashtop Inc. 宣布更新其 Splashtop for Remote Labs 产品.该产品旨在帮助学生通 ...
- 鸿蒙HarmonyOS实战-ArkUI事件（组合手势）
一.组合手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式.手势操作可以包括点击.滑动.双击.捏合等动作,用于实现不同的功能和操作. HarmonyOS中常见的手势操作及其 ...
- SQL Server实战七：自定义数据类型、标量值、内嵌表值、多语句表值函数的操作
本文介绍基于Microsoft SQL Server软件,实现数据库用户自定义数据类型的创建.使用与删除,以及标量值.内嵌表值.多语句表值函数等用户定义函数的创建.使用.删除方法. 目录 1 用S ...
- CentOS7部署Redis（离线单机）
一.检查是否安装 ## 检查是否安装了Redis [root@localhost /]# ps -ef | grep redis ## 存在就删除 [root@localhost /]# sudo y ...
- 4G EPS 中的 Control Plane
目录 文章目录 目录 前文列表 控制平面 归属环境部分 无线接入网络部分 核心网络 EPS CP 中的 GTP-C UP 中的 GTP-U Tunnel 两端的 F-TEID 需要通过 CP 的信令流 ...
- C#应用的用户配置窗体方案 - 开源研究系列文章
这次继续整理以前的代码.本着软件模块化的原理,这次笔者对软件中的用户配置窗体进行剥离出来,单独的放在一个Dll类库里进行操作,这样在其它应用程序里也能够快速的复用该类库,达到了快速开发软件的效果. 笔 ...
- vue-cli3 项目路由 history 模式部署到 nginx 服务器
1.项目修改vue.config.js增加 publicPath: '/' 2.nginx配置 location / {#访问前端页面 root /data/dist;#vue项目存放路径 index ...
- docker使用Open Policy Agent(OPA)进行访问控制
目录 一.系统环境 二.前言 三.Open Policy Agent 简介 四.Rego 语言简介 五.配置基本环境 六.docker安装OPA插件 6.1 安装docker 6.2 docker安装 ...
- js数组操作——对象数组根据某个相同的字段分组
先说点废话 最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结. 当然需要注意的是,在开发过程这种数组 ...
- asp.net中gridview隐藏一列并且使用这列数据的方法
方法一:在RowCreated事件中添加如下代码可隐藏此列,使用this.grdView.Rows[index].Cells[1].Text获取值,index为行号. 1 protected void ...