Vue基础之用插值表达式在视图区显示数据

2023-06-20,,

Vue基础之用插值表达式视图区显示数据

第一步:当然就是你要引入Vue.js这个脚本文件啦!

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第二步:就是你要在你HTML文件中的body中写入下面的代码:

<!-- Vue.js的应用可以分为两个重要的组成部分
一个是视图!
另一个是脚本!! -->
<!-- 下面的就是视图! -->
<div id="app">
<h1>{{message}}</h1>
</div>
<!-- 下面的就是脚本! -->
<script type="text/javascript">
// var app = new Vue({ el:'#app', // 这个就是你要操作的元素!
data: {
message: 'lvhang'
} // data用于保存数据!插值表达式!我们在视图中声明了那些变量, 就需要在data中注册同名的变量,并且对变量进行赋值! })
</script>

这样不就大功告成了吗!?!

Vue基础之用插值表达式在视图区显示数据的相关教程结束。

《Vue基础之用插值表达式在视图区显示数据.doc》

下载本文的Word格式文档,以方便收藏与打印。