Vue数据渲染,绑定

Vue数据渲染,绑定

Vue.js引入

//开发环境版本,包含有帮助命令行的警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

数据绑定

 <div id="app">
     <h3>{{message}}</h3>
 </div>

在script的标签中实例化一个Vue的对象，并定义绑定的数据

  new Vue({
           el: "#app",
           data:{
               message: "Hello World"
      			 }
 			})

语法

前端渲染

<div id="app">
	<h3>{{message}}</h3>
</div>

数据渲染到页面上,首先我们需要提供一个标签用于填充数据,这个标签我们定义了一个id属性为app,在标签中我们用小胡子插值表达式进行数据的填充.

小胡子插值表达式:Mustache语法,中文叫做胡子的意思,两个 {{}} 长的比较像胡子.

对象定义

• 定义完页面结构,需要在js中通过 new Vue()创建一个Vue的实例化对象
• 在构造函数中以对象的形式做一些配置,这些配置中比较重要的有el、data两个属性
• el 定义可以渲染数据的DOM结构
• data定义可以渲染到页面上的数据,跟DOM结构建立关联关系