【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 把一段经常要用的东 ...
随机推荐
- 算法学习笔记(30)：Kruskal 重构树
Kruskal 重构树 这是一种用于处理与最大/最小边权相关的一个数据结构. 其与 kruskal 做最小生成树的过程是类似的,我们考虑其过程: 按边权排序,利用并查集维护连通性,进行合并. 如果我们 ...
- Python BeautifulSoup定位取值
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* ...
- C#.NET 简单使用log4net
1.nuget 中安装log4net 2.添加一个配置文件"log4net2.config",内容如下: <?xml version="1.0" enco ...
- kylin-3.1.1-bin-hadoop3搭建，构建cube报的错误，Cannot modify dfs.replication at runtime. It is not in list of params that are allowed to be modified at runtime
主要是每次构建cube时会去读取kylin安装目录下的conf/kylin_hive_conf.xml文件, 副本是无法在hive查询时修改的,注释掉这两项 这个其实还有一些参数的控制: 添加这俩个参 ...
- CentOS上安装telnet
客户端 yum -y intall telnet 服务端 yum -y install xinetd #telnet服务依赖于xinetd yum -y install telnet-server # ...
- Nginx SSL证书更新及密码套件更新
一.域名更换证书 ssl证书一般包括证书文件crt.cer.pem.pfx和私钥文件key. CER.CRT.PEM 和 PFX 是不同的证书文件格式,它们之间存在一些区别: CER (DER 编码) ...
- VBA-合并多个工作簿
'合并多个工作薄,并以工作薄的名字给sheet表命名(每个工作薄只有一张表) Sub test() Dim str As String Dim wb As Workbook str = Dir(&qu ...
- PHP 真的不行了？透过 PHP 的前世今生看真相
大家好,我是码农先森. 1994年我出生在湖南的农村,就在同年加拿大的拉斯姆斯·勒多夫创造了 PHP,这时的 PHP 还只是用 Perl 编写的 CGI 脚本.或许是时间的巧合 PHP 变成了我后半生 ...
- ELK日志缺失问题排查-多行日志聚合Logstash配置问题
1. 背景 推荐系统的推荐请求追踪日志,通过ELK收集,方便遇到问题时,可以通过唯一标识sid来复现推荐过程 最近在碰到了几个bad case,需要通过sid来查询推荐日志,但发现部分无法在kiban ...
- .NET CORE 部署提示 An error occurred while starting the application.
错误提示: 解决方法 检查一下nuget引用包 是否更新了版本,如果升级或者降级了版本,需要将新的dll文件更新一下