vue html插值,Vue.js入门教程之二：Vue插值与输出HTML

经过上一篇文章《Vue.js入门教程之一：开发环境搭建》的学习，我们已经搭建好了基本的Vue.js开发环境，并且还编写了第一个Vue.js程序，通过使用{{message}}的语法，在HTML页面的DOM元素中插入了数据。 今天，我们将进一步学习Vue.js的相关知识。

1、在页面中插入文字

1.1 在

标签中加入如下代码：

插入文字：{{message}}

调用方法的结果：{{doSomething()}}

1.2 在标签中添加以下代码：

var vm = new Vue({

el: '#app',

data: function() {

return {

message: '这是数据对象中的message属性值'

};

},

methods: {

doSomething: function() {

return this.message + "，调用方法后的结果！";

}

}

});

1.3 完整代码如下：

系统首页

插入文字：{{message}}

调用方法的结果：{{doSomething()}}

var vm = new Vue({

el: '#app',

data: function() {

return {

message: '这是数据对象中的message属性值'

};

},

methods: {

doSomething: function() {

return this.message + "，调用方法后的结果！";

}

}

});

1.4 结果预览，如下图所示：

1.5 代码说明

插入文字：{{message}}

：模板代码，使用创建Vue实例中字面量data元素(匿名函数返回值)值中的message的值替换{{message}}；

调用方法的结果：{{doSomething()}}

：模板代码，使用创建Vue实例中字面量methods元素(该元素值也是一个字面量)中的doSomething函数的返回值替换{{doSomething()}}。注意这里函数调用需要有一对()出现。 函数doSomething的定义，如果Vue实例中函数要使用Vue实例中的数据，可以采用“this.xxx”的形式使用。xxx就是data元素的匿名函数返回字面量的key。 # 2、 在页面中插入HTML ## 2.1 完整HTML代码如下： ```` 系统首页

插入文字：{{message}}

插入HTML：

```` ## 2.2 查看运行结果：  ## 2.3 代码说明 data字面量中的message属性值包含有 这杨的HTML标签，从结果可以看出，{{message}}是将HTML标签原样输出，而v-html属性，值是将HTML代码经过浏览器渲染后输出，并且将元素中的文字替换为data中的属性值。 # 3、小结 本篇文章采用两个小的Vue实例，演示了Vue的基本语法结构。在第二个实例中，还引出了以“v-”开头的HTML属性，这些属性并非标准HTML标签的属性。我们将这些以“v-”开头的自定义HTML属性称为“Vue指令”，在后续章节中，我们将展开Vue指令的学习。