模板及其他

模板

• 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。（？）

• 当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

• 不支持{{ var a = 1 }}因为这个语句返回undefined，支持{{(function(){return '123'})()}}。但是模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

• 诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部，使用is来规避。例如：<li is="todo-item">，HTML 包含了几种类型的内容，每种内容在特定的情景上下文中有效，而在其他上下文中无效。类似地，每种内容也包含了一组关于其他类型内容的配置，包括哪些内容类型和元素可以或不可以被包含并使用。元素嵌套产生的原因

• 模板的来源，不受元素嵌套限制

  • 字符串，例如：template: ' '组件参数之一
  • 单文件组件 (.vue)
  • <script type="text/x-template">

• 定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

• 当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。

<div>
    ...
    <my-component inline-template>
      <div>
        <p>These are compiled as the component's own template.</p>
        <p>Not parent's transclusion content.</p>
      </div>
    </my-component>
    ...
</div>

——————————————————————————————————————————————————————

模板使用的资源

v-for

• v-for 也可以取整数。在这种情况下，它将重复多次模板。<span v-for="n in 10">{{ n }} </span>
• v-for多层嵌套时如果多次引用同一个数组下的数据时，会被误认为死循环。可以采用JSON复制使用的对象

data

• 不允许绑定的字符传包含</script>

——————————————————————————————————————————————————————

其他

• 响应式：数据改变时会触发其他联动。例如：模板中的数据绑定；计算属性的重新计算；
• Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改属性
• 不要在选项属性或回调上使用箭头函数，因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例（应该是组件实例）

{
    create(){...} //=> create:function(){...}
}

• 有些环境，如 Google Chrome Apps，会强制应用内容安全策略 (CSP)，不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。完整版本依赖于该功能来编译模板，所以无法在这些环境下使用。

// 什么是new Function()，Function是所有函数实例的原型
var message = new Function('msg','alert(msg)');
// 等价于：
function message(msg) {
    alert(msg);
}

• 如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry，它为 Vue 提供了官方集成。
• Vue.compile编译模板字符串为render函数对象。只在独立构建时有效（独立构建是指这种构建方式同时包含模板编译和运行调用，相对的运行时构建没有模板编译功能）

// 返回一个对象拥有render方法，执行该方法返回vnode
var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

Vue.extend

• 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。返回一个构造函数，由这个构造函数new生成组件实例
• data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

vm.$mount( [elementOrSelector] )

• 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
• 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
• 这个方法返回实例自身，因而可以链式调用其它实例方法。

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app') // 先执行new MyComponent()创建实例，然后$mount挂载

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount() // $mount()挂载分为两部，一步先生成dom结构保存在$el下，然后才执行dom替换，替换html中的标签
document.getElementById('app').appendChild(component.$el)

• $mount挂载时如果没有找到渲染函数 render，则会把 关联 DOM 作为模板。但需要注意 vue 版本是否支持模板编译。

<div id="app">
  <demo></demo>
</div>

<script>
new Vue({
  components: {
    demo: first
  }
}).$mount('#app')
</script>