vue模板

其实，无论前端框架如何变化，它需要处理的事情依旧是模板渲染、事件绑定、处理用户交互(输入信息或鼠标操作)，只不过提供了不同的写法和理念。Vue.js 则会通过声明一个实例 new Vue({...}) 标记当前页面的 HTML 结构、数据的展示及相关事件的绑定。本章主要介绍 Vue.js 的构造函数的选项对象及用法，以及如何通过 Vue.js 来实现上述的常规前端功能。

从以前的例子可以看出，Vue.js 的使用都是通过构造函数 Vue({option}) 创建一个 Vue 的实例: var vm = new Vue({})。一个 Vue 实例相当于一个 MVVM 模式中的 ViewModel，如下图所示。

选项中主要影响模板或 DOM 的选项有 el 和 template，属性 replace 和 template 需要一起使用。

el :类型为字符串，DOM 元素或函数。其作用是为实例提供挂载元素。一般来说我们会使用 css选择符，或者原生的DOM元素。例如 el:'#app'。在初始项中指定了 el，实例将立即进入编译过程。

template :类型为字符串。默认会将 template 值替换挂载元素(即 el 值对应的元素)，并合并挂载元素和模板根节点的属性(如果属性具有唯一性，类似 id，则以模板根节点为准)。如果 replace 为 false，模板 template 的值将插入挂载元素内。通过 template 插入模板的时候，挂载元素的内容都将被互联，除非使用 slot 进行分发(有关 slot 内容将在第 6 章组件中介绍)。在使用 template 时，我们往往不会把所有的 HTML 字符串直接写在 js 里面，这样影响可读性而且也不利于维护。所以经常用 '#tpl' 的方式赋值，并且在 body 内容添加 <scrip id="tpl" type="x-template"> 为标签包含的 HTML 内容，这样就能将 HTML 从 js 中分离开来，示例如下:

<div id="app">
  <p>123</p>
</div>
<script id="tpl" type="x-template">   
   <div class='tpl'>
      <p>This is a tpl from script tag</p>   
   </div>
</script>
<script type="text/javascript">
  var vm = new Vue({    
      el : '#app',
      template : '#tpl'   
  });
</script>

Vue.js 实例中可以通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。需要注意的是，如果传入 data 的是一个对象，Vue实例会代理起 data 对象里的所有属性，而不会对传入的对象进行深拷贝。另外，我们也可以引用 Vue 实例 vm 中的 $data 来获取声明的数据，例如:

var data = { a: 1 }
var vm = new Vue({   
     data: data
})
vm.$data === data // -> true 
vm.a === data.a // -> true 
// 设置属性也会影响到原始数据 
vm.a = 2
data.a // -> 2 
// 反之亦然 
data.a = 3 
vm.a // -> 3

猜你喜欢