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 ...
随机推荐
- 超级简单实用的CSS3动画，增添网页效果
有时候做网页,如果都写成静态的没有动态效果,犹如一张张图片,没有视觉感受,没有达到很好的视觉效果. 其实一些简单的CSS3动画,可以增添网页的动态感,使自己设计的网页更有视觉享受.1.图片有一定角度的 ...
- 动态修改manifest.json
点击查看代码 // h5开发环境 const h5Dev = { baseUrl: 'https://devh5.....' } // h5测试环境 const h5Test= { baseUrl: ...
- [popover, select] el-popover内有select的时候在选择后会自动关闭
Steps to reproduce 选择某个选项后会自动关闭 What is Expected? 选择后不自动关闭,等点击按钮后再去触发组件内的关闭方法. What is actually happ ...
- 【PB案例学习笔记】-02 目录浏览器
写在前面 这是PB案例学习笔记系列文章的第二篇,该系列文章适合具有一定PB基础的读者, 通过一个个由浅入深的编程实战案例学习,提高编程技巧,以保证小伙伴们能应付公司的各种开发需求. 文章中设计到的源码 ...
- PhiData 一款开发AI搜索、agents智能体和工作流应用的AI框架
引言 在人工智能领域,构建一个能够理解并响应用户需求的智能助手是一项挑战性的任务.PhiData作为一个开源框架,为开发者提供了构建具有长期记忆.丰富知识和强大工具的AI助手的可能性.本文将介绍Phi ...
- Python提取文本文件（.txt）数据的方法
本文介绍基于Python语言,遍历文件夹并从中找到文件名称符合我们需求的多个.txt格式文本文件,并从上述每一个文本文件中,找到我们需要的指定数据,最后得到所有文本文件中我们需要的数据的合集的方法 ...
- Android OpenMAX（二）OMX Component实现基础
Android OpenMAX IL提供的API位于 frameworks/native/headers/media_plugin/media/openmax ,目录下存放有预定义的类型.组件句柄定义 ...
- request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
换华为的,否则会出问题:cnpm confg set registry https://mirrors.huaweicloud.com/repository/npm/ npm ERR! code CE ...
- 8.14考试总结(NOIP模拟39)[打地鼠·竞赛图·糖果·树]
一举一动,都是承诺,会被另一个人看在眼里,记在心上的. T1 打地鼠 解题思路 数据范围比较小,不需要什么优化. 直接二维前缀和枚举右下角端点就好了. code #include<bits/st ...
- C#笔记 窗体练习：海康相机SDK二次开发
第一次写窗体应用程序,太闲了,给自己找点事情做... 1. 最基本的打开关闭 代码:https://gitee.com/yurj0403/hik-camera 强行练习一下用git 2. 加了状态栏 ...