【Vue】01 基础语法
Hello Vue的演示案例：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" ></script>
</head>
<body> <div id="container-element">
{{message}}
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
message : "Hello Vue !!!",
},
});
</script>
</body>
</html>
效果：
一个由Vue类创建的实例，el属性绑定对应元素id或者选择器，
data对象里的属性可以以键的标识进行获取和渲染
我们可以在浏览器的控制台中改变message的值，来改变渲染
Vue指令：
1、使用Bind指令来渲染
v-bind:attr="value"
用一个输入框标签，对value属性设置message的值来渲染
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" ></script>
</head>
<body> <div id="container-element">
<input type="text" v-bind:value="message">
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
message : "Hello Vue !!!",
}
});
</script> </body>
</html>
效果：
结论：一定情况下，{{field}} & v-bind 都可以渲染
2、判断指令
单个IF-ELSE：
<div id="container-element">
<p v-if="answer"> answer属性值为True </p>
<p v-else> answer属性值为False </p>
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
answer : false
}
});
</script>
效果：
设置为True时：
多分支判断：
<div id="container-element">
<p v-if="answer === 'A'"> answer属性值为A </p>
<p v-else-if="answer === 'B'"> answer属性值为B </p>
<p v-else-if="answer === 'C'"> answer属性值为C </p>
<p v-else-if="answer === 'D'"> answer属性值为D </p>
<p v-else> answer属性值为其他 </p>
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
answer : ''
}
});
</script>
效果：
遍历指令：
v-for="item in items"
items是遍历的数组名称，item即数组的每一个元素
<div id="container-element">
<p v-for="person in array"> {{person.name}} {{person.age}} {{person.gender}} </p>
</div>
<script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
array : [
{ name : "阿伟", age : 23, gender : true},
{ name : "杰哥", age : 23, gender : true}
]
}
});
</script>
效果：
3、事件绑定
使用on指令用以对设置的标签元素监听事件：
v-on=""
对这个标签使用v-on绑定事件和对应的js函数即可，要注意的是vue所采用的是jq命名的事件
<div id="container-element"> <p v-on:click="helloMethod">点击触发事件</p> </div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : { },
methods : {
helloMethod : function () {
alert("事件触发！！！");
}
},
});
</script>
效果：
可以通过this来调取这个函数所属的对象的属性：
<div id="container-element"> <p v-on:click="helloMethod">点击触发事件</p> </div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
status : 100
},
methods : {
helloMethod : function () {
alert(this.status);
}
},
});
</script>
效果：
双向绑定：
使用v-model对标签元素的value值来处理
v-model="value"
演示案例：
<div id="container-element"> <textarea name="" id="" cols="30" rows="10" v-model="input"></textarea>
<p>{{input}}</p> </div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
input : "呵呵啊"
},
methods : { },
});
</script>
效果：
对下拉列表的一些操作：
<div id="container-element"> <select v-model="the_select" name="" id="">
<option value="" disabled>- - 请选择- -</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select> <p>The Choose is {{the_select}}</p> </div> <script type="text/javascript">
let vueModel = new Vue({
el : "#container-element",
data : {
the_select : ''
},
methods : { },
});
</script>
效果：
【v-text指令用于渲染文本内容】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body> <div id="application">
<h3 v-text="message + '啊洒洒洒洒'"></h3>
</div> <script>
let vueModel = new Vue({
el : "#application",
data : {
message : "这是由v-text指令渲染的数据"
}
});
</script>
</body>
</html>
v-html指令用于渲染标签元素
普通文本和v-text无区别，但是支持将html标签转义处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body> <div id="application">
<div v-html="message"></div>
</div> <script>
let vueModel = new Vue({
el : "#application",
data : {
message : " <p> 这里是被p标签渲染的文本 <strong> 这里是被strong标签渲染的文本 </strong> </p> "
}
});
</script>
</body>
</html>
效果：
【v-on事件绑定的补充】
一般写法：
v-on:事件名称="被执行的函数名称"
简写语法：
@事件名称="被执行的函数名称"
注意，执行的函数只能在Vue对象内的methods属性对象中声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body> <div id="application">
<button @click="executing">点击执行</button>
</div> <script>
let vueModel = new Vue({
el : "#application",
methods : {
executing : function () {
alert("声明的方法执行！！！");
}
}
});
</script>
</body>
</html>
双击事件使用dblclick
<input type="button" value="双击执行" @dblclick="executing">
如果函数需要注入参数，指令绑定的时候可以这样：
<input type="button" value="双击执行" @dblclick="executing(param1,param2,...)">
如果是键盘输入的事件绑定，事件需要具体引用到某一个键入或者组合键入
<input type="button" value="双击执行" @keyup.enter="executing(param1,param2,...)">
官方文档详细：
https://cn.vuejs.org.v2/api/#v-on
【计数器案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body> <div id="application">
<button @click="decrease"> - </button>
<span v-text="number"></span>
<button @click="increase"> + </button>
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#application",
data : {
number : 5
},
methods : {
increase : function () {
if (this.number === 10) {
alert("不可相加了...");
return;
}
this.number += 1;
},
decrease : function () {
if (this.number === 0) {
alert("不可减少了...");
return;
}
this.number -= 1;
}
}
});
</script>
</body>
</html>
为0时不可以减少
为10时不可以再加
【v-show控制元素的显示 [ 展示 & 隐藏 ] 】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.min.js"></script>
</head>
<body> <div id="application">
<p v-show="isShow">这是演示的文本内容</p> <button @click="changeTrue">展示</button>
<button @click="changeFalse">隐藏</button>
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#application",
data : {
isShow : true
},
methods : {
changeTrue : function () {
this.isShow = true;
},
changeFalse : function () {
this.isShow = false;
}
}
});
</script>
</body>
</html>
或者直接使用取反赋值实现切换
// changeIsShow : function () {
// this.isShow = !this.isShow;
// }
【图片切换案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.min.js"></script>
</head>
<body> <div id="application">
<button @click="preview" v-show="index !== 1">上一张</button>
<img :src="data:imageArray[index]" alt="">
<button @click="next" v-show="index !== 8" >下一张</button>
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#application",
data : {
index : 1,
imageArray : [
'./image/img1.jpg',
'./image/img2.jpg',
'./image/img3.jpg',
'./image/img4.jpg',
'./image/img5.jpg',
'./image/img6.jpg',
'./image/img7.jpg',
'./image/img8.jpg',
]
},
methods : {
preview : function () {
this.index --; },
next : function () {
this.index ++;
}
}
});
</script>
</body>
</html>
【记事本案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table, tr, td {
border: solid 1px black;
}
</style>
<script src="./js/vue.min.js"></script>
</head>
<body> <div id="application">
<table >
<tr >
<td colspan="2" style="width: 600px"> <input style="width: 600px" type="text" placeholder="要记录的事项" v-model="inputValue" @keyup.enter="addItem"> </td>
</tr> <tr v-for="(info,index) in infoList">
<td v-text="(index + 1) + ' ' + info"> </td>
<td> <span @click="deleteItem(index)"> 删除 </span> </td>
</tr> <tr>
<td colspan="2" v-show="infoList.length !== 0">{{infoList.length}} 事项剩余 <span @click="clearList" style="background: lawngreen">清空</span> </td>
</tr>
</table>
</div> <script type="text/javascript">
let vueModel = new Vue({
el : "#application",
data : {
infoList : ["java", "c/c++", "linux", "python", "rust"],
inputValue : ''
},
methods : {
addItem : function () {
this.infoList.push(this.inputValue);
},
deleteItem : function (index) {
//alert(index);
this.infoList.splice(index, 1);
},
clearList : function () {
this.infoList = [];
}
}
});
</script>
</body>
</html>
【Vue】01 基础语法的更多相关文章
- vue学习笔记：vue.js基础语法
一.VUE 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
- vue 初识(基础语法与数据驱动模型)
1.es6的语法 let 特点: 1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const 特点: 1.局部作用域 2.不会存在变量提升 3.不能重复声明,只声明常量 不可变的量 模板字 ...
- Vue学习-基础语法
Vue v-if指令 Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTM ...
- PHP学习笔记01——基础语法
<!DOCTYPE html> <html> <?php // 1.使用$加变量名来表示变量,php是弱类型语言,不要求在使用变量前声明,第一次赋值时变量才被创建 $a ...
- Vue.js基础语法（三）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- Vue.js基础语法（一）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...
- VUE一 基础语法
一.模板语法 二.Class和Style绑定 三.条件渲染 四.vue事件处理器 五.vue组件
- Vue的基础语法
前言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
- C语言-01基础语法
1) 总结常见文件的拓展名 .c 是C语言源文件,在编写代码的时候创建 .o 是目标文件,在编译成功的时候产生 .out 是可执行文件,在链接成功的时候产生 2) 总结 ...
- Vue.js基础语法（二）组件
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...
随机推荐
- 阿里云ECS后台CPU占用100%，top却找不到
上周公司阿里云服务器后台报警,CPU占用瞬间飙升到100%: 首先想到使用top命令查询CPU占用详情: 发现进程占用CPU都比较低,在CPU占用一栏发现只有ni的占用比较高. 先了解一下CPU相关监 ...
- 判断是不是ie浏览器 加上ie11
var b_version = navigator.appVersion; var version = b_version.split(";"); var trim_Version ...
- kettle从入门到精通 第十课 kettle switch/case、过滤记录、数值范围
1.java代码里面有if else .switch-case等流程控制,kettle也有相应控件.下图便用到switch/case.过滤记录.数值范围控件. 2. switch/case步骤 1)步 ...
- C#.NET CORE .NET8连接SQL SERVER 2008 R2 报：证书链是由不受信任的颁发机构颁发的
一.C#.NET CORE .NET8连接SQL SERVER 2008 R2 报:证书链是由不受信任的颁发机构颁发的 报错内容: A connection was successfully est ...
- docker registry 镜像源
修改文件 /etc/docker/daemon.json vi /etc/docker/daemon.json添加以下内容后,重启docker服务: { "registry-mirrors& ...
- Scrapy框架(一)--初识
scrapy初识什么是框架? 所谓的框架简单通用解释就是就是一个具有很强通用性并且集成了很多功能的项目模板,该模板可被应用在不同的项目需求中. 也可被视为是一个项目的半成品. 如何学习框架? 对于刚接 ...
- @RequestMapping 注解用在类上面有什么作用？
是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径.
- fastadmin的导出到excel功能
正常的excel导出没什么问题,最近一直头疼的是怎么导出数据中包含图片,并且图片还是数组?????by user 悦悦 https://www.cnblogs.com/nuanai 1.导出的exce ...
- kong网关部署
软件版本: Postgresql:9.6 (不使用最新版,是因为 konga 不支持) Kong:3.4.2 konga:0.14.7 (UI管理界面) ### Postgresql部署 ## doc ...
- 大模型重塑软件开发，华为云AI原生应用架构设计与实践分享
在ArchSummit全球架构师峰会2024上,华为云aPaaS平台首席架构师马会彬受邀出席,和技术爱好者分享AI原生应用引擎的架构与实践. AI大模型与AI重塑软件的大趋势下,软件会发生哪些本质的变 ...