Vue学习笔记（2）模板的使用

最新推荐文章于 2024-05-04 23:24:05 发布

MezereonXP

最新推荐文章于 2024-05-04 23:24:05 发布

阅读量1.4k

点赞数

分类专栏：网页前端 Vue 文章标签： dom 实例 Vue 模板

本文链接：https://blog.csdn.net/qq_34206952/article/details/54338095

版权

网页前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

通过上一次的学习我们了解了Vue实例的生命周期以及创建了一个实例并且绑定在dom上的一个元素上了，接下来我们将要学习模板

在之前的学习中，我们通过对生命周期的学习，直到在mounted之后会存在这么一种状态，当data出现改变的时候，虚拟dom会重新渲染，这就是Vue吸引人的地方，Vue能够智能地计算出重新渲染组件的最小代价

我们要介绍的第一个东西是文本插值，先给出代码

<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Hi Vue!'
}
})
</script>
</html>

代码中双大括号就是文本插值，在运行的时候就被替换成了Vue实例中的数据，这就是数据的展示，这个插值是会被更新的，如果你不想要被更新的话，你可以添加v-once在标签内。

文本插值是将文本直接转化为字符串展现出来，那么如果我想展示html形式的内容怎么办呢例如许多文章？你只需要使用v-html来将你所想要展示的html文本放置进去

<h1 v-html="rawhtml"></h1>

聪明的你可能会想到把文本插值放到标签属性中去，我们需要绑定，即v-bind

<button v-bind:disabled="someCondition"></button>

文本插值同样使用于三元表达式，我们可以很好地利用这个特点去实现控件状态的动态绑定。

v-bind:style=" {visibility: password==''?'hidden':'visible' }"

上面这行表示当password等于空的时候隐藏否则显示

我们发现Vue中有好多v-XXX这样类型的标签属性，这其实被称为指令，v-for暂不讨论，指令的预期值是单一的js表达式

例如 <a v-on:click="doit"> v-on则是监听事件

接着就是过滤器，一般用于文本显示之中

Vue 2.x 之中，过滤器只能在文本插值绑定和v-bind表达式中使用

{{ message | capitalize }}其中的capitalize就是过滤器

在Vue实例之中写具体的过滤方案

new Vue({

     el:'#app',

     filters:{

      capitalize:function(value){  .....return.......}

}

})

当然这是一个function，你可以传入多个参数例如 {{ message | filterA('arg1', arg2) }}

最后谈一谈缩写，v-bind：可以写成：而v-on：可以写成@

例如

<button v-bind:disabled="someCondition"></button>

可以写成

<button  :disabled="someCondition"></button>

MezereonXP

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（2）模板的使用

通过上一次的学习我们了解了Vue实例的生命周期以及创建了一个实例并且绑定在dom上的一个元素上了，接下来我们将要学习模板在之前的学习中，我们通过对生命周期的学习，直到在mounted之后会存在这么一种状态，当data出现改变的时候，虚拟dom会重新渲染，这就是Vue吸引人的地方，Vue能够智能地计算出重新渲染组件的最小代价我们要介绍的第一个东西是文本插值，先给出代码Vu
复制链接

扫一扫

专栏目录