【vue-02】基础语法
插值操作
插值运算符
语法：{{数据}}
插值运算符可以对数据进行显示{{msg}}，也可以在插值运算符中进行表达式计算{{cnt*2}}。
v-html
希望以html格式进行输出
htmlData :<p>你好</p>
<h2 v-html="htmlData"></h2>
v-text
v-text作用和插值运算符比较类似，都是用于将数据显示在页面中。通常情况下，v-text接受一个string类型。v-text会替换标签内的内容。
在下面的例子中会直接替换Hello字符串
<h2 v-text="name">Hello</h2>
v-clock
在某些情况下，我们浏览器可能会直接显示出未编译的插值运算符
<h2 v-clock>{{firstName}} {{lastName}}</h2>
<style>
[v-clock] {
display: none;
}
</style>
过滤器
filters属性与data和methods平级，用于定义过滤器。过滤器本质上是一个方法，接收一个参数。
在页面中，使用插值运算符，语法：{{数据 | 过滤器名称}}，不需要写参数，不需要写括号，过滤器默认会把前面的数据作为参数传递给方法。
过滤器的方法需要返回一个数据，返回的数据作为最终结果渲染到页面中。
比如：可以用在日期格式化
<body>
<div id="app">
<h2>{{count | filterEven}}</h2>
<h2>{{count2 | filterEven}}</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
count: 10,
count2: 11
},
filters: {
filterEven(num) {
if (num % 2 === 0) {
return num
} else {
return '非法数字'
}
}
}
})
</script>
数据绑定
数据双向绑定：数据层的变化会影响到展示层的展示，而展示层的变化，也会影响数据层的变化。
数据单向绑定：数据层的变化会影响到展示层的展示，而展示层的变化，不会影响数据层的变化。
v-bind
插值操作处理内容需要动态决定，某些属性我们也希望动态来绑定，比如a标签的href、img标签的src等。这时候我们可以使用v-bind指令。
<a v-bind:href="baiduLink">百度</a>
<!-- v-bind有简写方式 -->
<a :href="baiduLink">百度</a>
v-bind绑定class
很多时候，我们希望动态的来切换class。比如当数据为某个状态的时候，字体显示红色，当是另一种状态时，字体显示绿色。
v-bind绑定class，可以接受一个对象，也可以接受一个数组。
<style>
.active:{
color:red;
}
.size:{
font-size:30px;
}
.h2-border{
border:1px solid red;
}
</style>
<body>
<div id="app">
<!-- 方式1：直接通过{}绑定一个类 -->
<h2 :class="{'active':isActive}">Hello Vue</h2>
<!-- 方式2：这种方式可以通过判断，传入多个值 -->
<h2 :class="{'active':isActive, 'size': big}">Hello Vue</h2>
<!-- 方式3：和普通类同时存在，并不冲突 -->
<h2 class="h2-border" :class="{'active':isActive, 'size': big}">Hello Vue</h2>
<!-- 方式4：如果过于复杂，可以放到一个data中 -->
<h2 class="h2-border" :class="classes">Hello Vue</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
isActive: true,
big: true,
classes: ['active', 'size']
}
})
</script>
v-model
vmodel一般用于表单的提交。
文本框
<div id="app">
输入的文本：<input type="text" v-model="msg">{{msg}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:""
}
});
</script>
单选框
<div id="app">
<!-- 绑定的是value-->
<input type="radio" name="sex" value="男" v-model="showSex">男
<input type="radio" name="sex" value="女" v-model="showSex">女
<p>
选中了谁：{{showSex}}
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
showSex:""
}
});
</script>
下拉框
<body>
<div id="app">
<select v-model="mySelect">
<option value="java">Java从入门到精通</option>
<option value="python">python从入门到精通</option>
<option value="php">php从入门到精通</option>
<option value="mysql">mysql从删库到跑路</option>
</select>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
mySelect: 'php'
}
})
</script>
计算属性
什么是计算属性
我们知道在模板中可以通过插值语法现实一些data中的数据。
但是 某些情况，我们可能需要对数据进行一些转换后再实现，或者需要将多个数据结合起来进行实现。
计算属性是一个属性，而不是方法。虽然写法是方法，但是我们使用的时候是直接视为一个属性去操作的，使用方式和data一致。
计算属性中使用到的data中的数据只要发生了变化，计算属性就会重新计算。如果两次获取计算属性的时候，里面使用到的属性没有发生变化，计算属性会直接使用之前缓存的值。
例子
注意：methods和computed里面的方法名不能一致
<div id="app" >
<p>现在时间戳：{{currentTime2}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello"
},
methods:{
currentTime1:function () {
return Date.now();
}
},
computed:{
currentTime2:function () {
this.msg;
return Date.now();
}
}
});
</script>
分析：
每调用一个方法currentTime1()，就会计算，currentTime2只有在msg发送变化的时候，才会刷新内存，重新计算
总结：
调用方法时，每次都需要进行计算，既然有计算过程肯定会产生系统开销，那如果这个结果不是经常变化的呢？此时就可以考虑将结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
事件监听
当通过methods定义方法，以供@click调用时，需要注意参数问题
- 如果该方法不需要参数，那么方法后的括号不可以添加。因为存在某些框架，如果加了括号之后，可能在页面渲染完毕后立即加载一遍该方法。
<button v-on:click="sayHi">click me</button>
- 如果需要传入某个参数，那么这个时候需要括号，并且需要在括号中传入参数。
v-on:click可以简写成@click
<button v-on:click="alertMsg('nihao')">click me</button>
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello vue"
},
methods:{//方法必须定义在Vue的Methods对象中
sayHi() {
alert(this.msg);
},
alertMsg(info){
alert(info)
}
}
});
</script>
条件循环
v-if、v-else-if、v-else
<body>
<div id="app">
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 75">良好</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>
<button @click="delScore">减分</button>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
score: 100
},
methods: {
delScore() {
this.score -= 10
}
}
})
</script>
v-show
v-show的用法与v-if类似，也是用于条件判断的。
<body <div id="app">
<div v-show="score >= 90">优秀</div>
<div v-show="score >= 75 && score < 90">良好</div>
<div v-show="score >= 60 && score < 75">及格</div>
<div v-show="score < 60">不及格</div>
<button @click="delScore">减分</button>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
score: 100
},
methods: {
delScore() {
this.score -= 10
}
}
})
</script>
两者区别
v-if是动态的向DOM树内添加或者删除DOM元素；若表达式初始值为 false，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。
v-show是通过设置DOM元素的display样式display：none，无论条件真假都会被编译；
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
v-for遍历数组
<body>
<div id="app">
<ul>
<li v-for="(item,index) in dataList">{{item}}</li>
</ul>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
dataList: [
'Java从入门到精通',
'php从入门到精通',
'mysql从删库到跑路',
'Vue从单身到脱单'
]
}
})
</script>
v-for遍历对象数组
<body>
<div id="app">
<table border="1">
<tr v-for="(item,index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[
{id:1,username:"jane",age:18},
{id:2,username:"peter",age:20},
{id:3,username:"小明",age:10}
]
}
})
</script>
</body>
我们传统的操作方式是使用JavaScript/JQuery获取到ul的dom，然后构造li的dom，拼接到ul中进行渲染。而vue中则只需要在data中定义这个数组，我们就可以使用v-for指令在页面中循环输出。
vue生命周期
https://www.cnblogs.com/10134dz/p/14399668.html
参考链接：
https://blog.csdn.net/weixin_43482353/article/details/108866043
https://www.cnblogs.com/xf2764/p/14005640.html
【vue-02】基础语法的更多相关文章
- JavaScript学习02 基础语法
JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...
- Python入门 —— 02基础语法
基础语法入门学习推荐: 简明 Python 教程 下文仅为入门推荐书籍的补充与重点 多行语句:末尾使用斜杠 ( ) ,将一行分为多行 var = item1 + item2 + item3 注释: ...
- Java单体应用 - Markdown - 02.基础语法
原文地址:http://www.work100.net/training/monolithic-markdown-basic.html 更多教程:光束云 - 免费课程 基础语法 序号 文内章节 视频 ...
- vue 初识(基础语法与数据驱动模型)
1.es6的语法 let 特点: 1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const 特点: 1.局部作用域 2.不会存在变量提升 3.不能重复声明,只声明常量 不可变的量 模板字 ...
- Vue学习-基础语法
Vue v-if指令 Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTM ...
- 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 的核心库只关注视图层,不仅易于上手, ...
- Vue.js基础语法（二）组件
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...
随机推荐
- subprocess如何设置命令超时时间
一.subprocess如何设置命令超时时间 最近遇到一个问题,就是我需要在服务器上执行某些shell命令,但是有些命令失败的时候是不会自动终止的,只会一直停在那里,很耗时间. 因此想到了设置超时时间 ...
- 叫练手把手教你读JVM之GC信息
案例 众所周知,GC主要回收的是堆内存,堆内存中包含年轻代和老年代,年轻代分为Eden和Surivor,如下图所示.我们用案例分析下堆的GC信息[版本:HotSpot JDK1.8]. /** * @ ...
- java实现一个点餐系统
转载于blog.csdn.net/weixin_44219955 项目大体框架 菜品类(菜品id,菜品名,菜品类型,上架时间,单价,月销售,总数量) 管理员类(管理员id,账号,密码) 客户类(客户i ...
- GoPath模式和GoMoudle模式的相爱相杀
相信看我文章的文章的童鞋,golang版本已经是1.3版本以上.如果你的版本还停留在1.3以下,那这篇文章可以做为你的提升之法. go moudle的前世今生 前世-gopath gopath是什么 ...
- Python数据分析入门（六）：Pandas的函数应用
apply和applymap 1. 可直接使用NumPy的函数 示例代码: # Numpy ufunc 函数 df = pd.DataFrame(np.random.randn(5,4) - 1) p ...
- 如何快速搭建自己的ERP系统,4步源码快速安装odoo教程
上一篇内容:了解什么是Odoo,为二次开发做准备 1.下载odoo源码 Github地址:https://github.com/odoo/odoo Gitee地址:https://gitee.com/ ...
- matlab mashgrid 函数
meshgrid 有三种语法,用来生成三维网格矩阵或二维网格矩阵 [X,Y] = meshgrid(x,y) , x和y 都是一维数组,如x=[1:3]; y= [4:5]; 则生成的 X 和 Y 都 ...
- PAT A1032 Sharing
题意:给出两条链表的首地址以及若干节点的地址,数据,下一个节点的地址,求两条链表的首个共用节点的地址.如果两条链表没有共用节点,则输出-1.思路步骤1:由于地址的范围很小,因此可以直接用静态链表,但是 ...
- shell 使用 cat 配合 EOF 创建文件并写入多行内容
之前折腾 GtiHub Actions 想实现提交 issue 后将 issue 的内容生成一个 Markdown 文件提交到仓库,从而实现自动发布到 GitHub Pages 的目的.倒是有一些现成 ...
- Day12 _63_获取当前线程对象
给线程起名 * 1. Thread.currentThread(); 可以获取到当前线程对象,出现在哪就是获取哪个线程. * 2. thread.setName(); 给该线程起名字 * 3. thr ...