Vue.js常见问题精选(一)

作者: 前端王睿 | 来源:发表于2018-01-08 12:06 被阅读81次

一、数据绑定不一定就是使用双大括号 “{{}}” 语法

我们都知道,Vue.js 最常见的数据绑定方式是使用“Mustache”语法(双大括号),AngularJs和微信小程序都是如此,但是需要注意的是,在 Vue.js 中双大括号可不能随便乱用,否则可能导致语法错误。

通常情况下,在下面几种情况中不能使用双大括号语法进行数据绑定:

1. 标签属性值的绑定

对于标签属性值的数据绑定,我们可以使用Vue.js提供的 v-bind 指令,该指令用法很简单,直接在需要进行数据绑定的属性名前加上 v-bind: 即可,当然也可直接简写为 : 。例如:

<!--HTML-->
<div id="app">
    <a v-bind:href="link">{{text}}</a>
</div>
//JS
var vm = new Vue({
    el: '#app',
    data: {
        link: 'http://mp.weixin.qq.com/s/_2GkQJfPO_rDUMOxX8n-_g',
        text: '更多前端知识,请关注前端微站。'
    }
});

从上面这个简单例子可以看出,在 a 标签中的文本内容可以使用双大括号语法来进行数据绑定,而其标签上的属性 href 则需要写成 v-bind:href:href

2. HTML代码的绑定

如果想要将HTML代码通过数据绑定方式渲染于页面中,我们不能直接通过双大括号语法进行绑定,否则会当做普通文本内容渲染,而是要使用 v-html 指令进行绑定。还是上面那个例子,我们把text内容换成HTML代码:

//JS
var vm = new Vue({
    el: '#app',
    data: {
        link: 'http://mp.weixin.qq.com/s/_2GkQJfPO_rDUMOxX8n-_g',
        text: '更多前端知识,请关注<strong>前端微站</strong>。'
    }
});

结果页面上直接把代码给渲染出来了:

要想在页面中显示真正的文字加粗效果,HTML部分得像下面这么写:

<!--HTML-->
<div id="app">
    <a v-bind:href="link" v-html="text"></a>
</div>

这才是我们最终想要实现的效果。

二、开发过程中最好使用未压缩的Vue.js版本,否则没有错误代码提示

作为一名程序员,代码出错却不报错,这是永远无法忍受的事情。然而,Vue.js为了让代码更加精简,压缩版本(vue.min.js)中去除了错误代码提示。因此,我们最好在开发过程中使用未压缩的版本,上线时(生产环境)再将其替换成压缩版本即可。

三、v-for 指令不一定只是对数组进行循环,还可以直接循环数字

例如,我们需要循环显示从 1 到 10 这十个数,可以这样来写:

<p v-for="n in 10">{{n}}</p>

最终生成的代码:

以上是我在工作当中所遇到的一些Vue.js框架的相关问题总结,更多精彩内容,请关注微信公众号:前端微站。

相关文章

  • Vue.js常见问题精选(一)

    一、数据绑定不一定就是使用双大括号 “{{}}” 语法 我们都知道,Vue.js 最常见的数据绑定方式是使用“Mu...

  • Vue.js动态组件解析

    此前的Vue.js系列文章: Vue.js开发常见问题解析 Vue.js常用开发知识简要入门(一) Vue.js常...

  • 17.拓展:Vue.js 面试、常见问题答疑

    拓展:Vue.js 面试、常见问题答疑 在过去的很多面试中,我会经常问候选人一些关于 Vue.js 的问题。这些问...

  • 常见问题精选

    问题1 为什么下单后,在公众号看不到订单? 回答: 下单成功后,一般15分钟内订单就会更新成功,第一次下单的,把订...

  • Vue.js 常见问题

    - Cannot use v-for on stateful component root element bec...

  • 前端开发常见问题精选(一)

    一、如何在元素自身及其父级宽高不确定的情况下让元素水平和垂直方向上居中? 这个问题最常见的就是让文字在浏览器窗口中...

  • 9.总结 & 常见问题解答

    总结 & 常见问题解答 总结 在本小册的第一节中,笔者对 Vue.js 内部运行机制做了一个全局的概览,当时通过下...

  • Vue.js常见问题总结

    (原网址:http://blog.csdn.net/stronger_lxs/article/details/51...

  • Vue.js开发常见问题

    Vue.js由于其语法简单,文档友好,而且是一个渐进式框架,因而得到了许多前端开发者的青睐.尤其对初学者而言,入门...

  • GitHub上最热门的十大Vue.js项目

    在过去的一个月里,Mybridge从将近150个Vue.js开源项目中精选出十个热门项目,旨在帮助开发者找到自己需...

网友评论

  • scscsc:<p v-for="n in 10">{{n}}</p> 这个如果想循环5-9怎么办?
    scscsc:@璿而不华 3q
    前端王睿:可以再加上v-if做个判断:<p v-for="n in 9" v-if="n>=5">{{n}}</p>

本文标题:Vue.js常见问题精选(一)

本文链接:https://www.haomeiwen.com/subject/gdunwxtx.html