经过上一篇文章《Vue.js入门教程之一&＃xff1a;开发环境搭建》的学习&＃xff0c;我们已经搭建好了基本的Vue.js开发环境&＃xff0c;并且还编写了第一个Vue.js程序&＃xff0c;通过使用{{message}}的语法&＃xff0c;在HTML页面的DOM元素中插入了数据。 今天&＃xff0c;我们将进一步学习Vue.js的相关知识。
1、在页面中插入文字
1.1 在
标签中加入如下代码&＃xff1a;
插入文字&＃xff1a;{{message}}
调用方法的结果&＃xff1a;{{doSomething()}}
1.2 在标签中添加以下代码&＃xff1a;
var vm &＃61; new Vue({
el: &＃39;#app&＃39;,
data: function() {
return {
message: &＃39;这是数据对象中的message属性值&＃39;
};
},
methods: {
doSomething: function() {
return this.message &＃43; "&＃xff0c;调用方法后的结果&＃xff01;";
}
}
});
1.3 完整代码如下&＃xff1a;
系统首页
插入文字&＃xff1a;{{message}}
调用方法的结果&＃xff1a;{{doSomething()}}
var vm &＃61; new Vue({
el: &＃39;#app&＃39;,
data: function() {
return {
message: &＃39;这是数据对象中的message属性值&＃39;
};
},
methods: {
doSomething: function() {
return this.message &＃43; "&＃xff0c;调用方法后的结果&＃xff01;";
}
}
});
1.4 结果预览&＃xff0c;如下图所示&＃xff1a;
1.5 代码说明
插入文字&＃xff1a;{{message}}
&＃xff1a;模板代码&＃xff0c;使用创建Vue实例中字面量data元素(匿名函数返回值)值中的message的值替换{{message}}&＃xff1b;
调用方法的结果&＃xff1a;{{doSomething()}}
&＃xff1a;模板代码&＃xff0c;使用创建Vue实例中字面量methods元素(该元素值也是一个字面量)中的doSomething函数的返回值替换{{doSomething()}}。注意这里函数调用需要有一对()出现。 函数doSomething的定义&＃xff0c;如果Vue实例中函数要使用Vue实例中的数据&＃xff0c;可以采用“this.xxx”的形式使用。xxx就是data元素的匿名函数返回字面量的key。 # 2、 在页面中插入HTML ## 2.1 完整HTML代码如下&＃xff1a; &＃96;&＃96;&＃96;&＃96; 系统首页
插入文字&＃xff1a;{{message}}
插入HTML&＃xff1a;
&＃96;&＃96;&＃96;&＃96; ## 2.2 查看运行结果&＃xff1a;  ## 2.3 代码说明 data字面量中的message属性值包含有这杨的HTML标签&＃xff0c;从结果可以看出&＃xff0c;{{message}}是将HTML标签原样输出&＃xff0c;而v-html属性&＃xff0c;值是将HTML代码经过浏览器渲染后输出&＃xff0c;并且将元素中的文字替换为data中的属性值。 # 3、小结 本篇文章采用两个小的Vue实例&＃xff0c;演示了Vue的基本语法结构。在第二个实例中&＃xff0c;还引出了以“v-”开头的HTML属性&＃xff0c;这些属性并非标准HTML标签的属性。我们将这些以“v-”开头的自定义HTML属性称为“Vue指令”&＃xff0c;在后续章节中&＃xff0c;我们将展开Vue指令的学习。
京公网安备 11010802041100号