Vue.js常见问题精选

Posted 2021-05-01 前端微站

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

我们都知道，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>

最终生成的代码：