【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 把一段经常要用的东 ...
随机推荐
- php简单登录
<?php // 1,php接收参数 $userName = $_POST['userName']; $userPwd = $_POST['userPwd']; // 2,PHP需要操作数据库 ...
- 获取URL中查询参数 URL中动态参数
通过 req.query 对象,可以访问到客户端通过查询字符串的形式发送到服务器的参数 app.get('/',(req,res)=>{ console.log(req.query) }) .U ...
- Unity3D 内存管理非代码技巧
在场景管理器新建 gameobjct 使用代码在类初始化时 NEW 普肉fai包(包)然后将相同的类NEW够挂载到 gameobjct子节点上 在操控列表中类的时候用for循环遍历操作移动还是怎么样( ...
- redis 远程连接
redis-cli -h host -p port -a password -h 服务器地址 -p 端口号 -a 密码
- 《Android开发卷——开卷》
打算在自己在工作中遇到的问题,技术难点都记录下来,让其他人可以借鉴或者指点,这样既可以成长自己也可以成长别人.因为自己已经在工作了,所以遇到的问题非常具有代表性,所以不能简单简单的像网上一些小学生一样 ...
- 贝壳找房: 为 AI 平台打造混合多云的存储加速底座
贝壳机器学习平台的计算资源,尤其是 GPU,主要依赖公有云服务,并分布在不同的地理区域.为了让存储可以灵活地跟随计算资源,存储系统需具备高度的灵活性,支持跨区域的数据访问和迁移,同时确保计算任务的连续 ...
- AI赋能ITSM：企业运维跃迁之路
随着企业信息化建设的深入,IT运维管理作为保证企业信息系统稳定运行的重要工作,越来越受到重视. 那么,什么是IT运维呢? 简单地说,IT运维是一系列维护.管理和优化企业IT基础设施.系统和应用程序的活 ...
- Libgdx游戏开发(5)——碰撞反弹的简单实践
原文: Libgdx游戏开发(5)--碰撞反弹的简单实践-Stars-One的杂货小窝 本篇简单以一个小球运动,一步步实现碰撞反弹的效果 本文代码示例以kotlin为主,且需要有一定的Libgdx入门 ...
- electron 安装遇到的各种奇怪问题解决
在国内,electron经常遇到各种问题,导致无法安装 在安装electron官网的快速入门步骤,到npx electron-forge import的时候,遇到了各种问题 npm install - ...
- CLR via C# 笔记 -- 委托(17)
1. 委托是方法的包装器,使方法能通过包装器来间接回调.在一个类型中通过委托来调用另一个类型的私有成员,只要委托对象是具有足够安全性/可访问性的代码创建,便没有问题. 2. 协变性:方法能返回从委托的 ...