模板
-
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。（？）
-
当直接在 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>