import() 和 require.ensure()需要环境中有 Promise。如果你想要支持旧版本浏览器，你应该在使用这些 webpack 提供的表达式之前，先 加载一个 polyfill。
-g而已，比如npm install grunt # 本地安装
npm install -g grunt-cli # 全局安装
{{ number + 1 }} //計算 {{ ok ? 'YES' : 'NO' }} //三元表达式 {{ message.split('').reverse().join('') }} //程式運算 <div v-bind:id="'list-' + id"></div> //字串加變數
<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}1.id="app"
<div id="app"> {{ message }} </div> |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) |
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> |
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) |
true，v-bind 工作起来略有不同，在这个例子中：<button v-bind:disabled="isButtonDisabled">Button</button>
|
isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> |
var app3 = new Vue({ el: '#app-3', data: { seen: true } }) |
<template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> |
v-show doesn’t support the <template> element, nor does it work with v-else.比較後的結論 v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.v-for="user in users" v-if="user.isActive"). In these cases, replace users with a new computed property that returns your filtered list (e.g. activeUsers).v-for="user in users" v-if="shouldShowUsers"). In these cases, move the v-if to a container element (e.g. ul, ol).<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> |
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) |
app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> |
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) |
<ul id="v-for-object" class="demo"> <li v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }} </li></ul>
new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) |
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
push() 添加一個或多個元素至陣列的末端，並且回傳陣列的新長度。pop() 删除并返回数组的最后一个元素。shift() 把数组的第一个元素从其中删除，并返回第一个元素的值。 (與pop()類似)unshift() 可向数组的开头添加一个或更多元素，并返回新的长度。splice(index,delNum,item1,.....,itemX) 向/从数组中添加/删除项目，然后返回被删除的项目。sort() 對陣列元素進行排序reverse() Reverse the order of the elements in an arrayvm.items[indexOfItem] = newValue
可改用以下三種方式，則為響應式vm.items.length = newLength
可改用下方寫法，則為響應式var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 |
var vm = new Vue({ data: { a: 1 } }) // `vm.a` is now reactive vm.b = 2 // `vm.b` is NOT reactive
Vue.set(object, key, value) method.var vm = new Vue({ data: { userProfile: { name: 'Anika' } } })
age property to the nested userProfile object with:Vue.set(vm.userProfile, 'age', 27) //等於 vm.$set(vm.userProfile, 'age', 27)
Object.assign() or _.extend(). In such cases, you should create a fresh object with properties from both objects. So instead of:Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) |
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) |
Object.assign() 簡單說一下，它的功能可以是複製物件，也可以是合併物件，詳細請見https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/assignundefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。 更多見： http://es6.ruanyifeng.com/#docs/symbol_.extend(destination, *sources) <li v-for="n in evenNumbers">{{ n }}</li>
|
data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } } |
<li v-for="n in even(numbers)">{{ n }}</li>
|
data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } |
<div> <span v-for="n in 10">{{ n }} </span> // v-for can also take an integer. In this case it will repeat the template that many times. </div>
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation">XXX</li> </template> </ul> |
<ul v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation">XXX</li> </ul> |
v-for has a higher priority than v-ifv-for with a Component這部分先跳過，等看完component再回來看 (https://vuejs.org/v2/guide/list.html)<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> |
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) |
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> |
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
|
| Argument Type | Result |
| Undefined | false |
| Null | false |
| Boolean | The result equals the input argument (no conversion). |
| Number | The result is false if the argument is +0, −0, or NaN; otherwise the result is true. |
| String | The result is false if the argument is the empty String (its length is zero); otherwise the result is true. |
| Object | true. |
true, "potato", 36, [1,2,4]and {a:16}) or falsey (false, 0, "", null and undefined).(我自己的想法是除了這幾個以外，都是true，這樣比較容易記)<div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // define methods under the `methods` object methods: { greet: function (event) { // `this` inside methods points to the Vue instance alert('Hello ' + this.name + '!') // `event` is the native DOM event if (event) { //Event Objects： When an event occur in HTML, the event belongs to a certain event object, like a mouse click event belongs to the MouseEvent object. alert(event.target.tagName) //BUTTON } } } }) // you can invoke methods in JavaScript too example2.greet() // => 'Hello Vue.js!' ，不執行 if (event)的內容，因為該event 是指event object，在此處為[object MouseEvent]
$event variable:<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> |
// ... methods: { warn: function (message, event) { // now we have access to the native event if (event) event.preventDefault() alert(message) } } |
.oncemodifier can also be used on component events. If you haven’t read about components yet, don’t worry about this for now..stop.prevent.capture.self.once.passive<!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"></a> <!-- the submit event will no longer reload the page --> <form v-on:submit.prevent="onSubmit"></form> <!-- modifiers can be chained --> <a v-on:click.stop.prevent="doThat"></a> <!-- just the modifier --> <form v-on:submit.prevent></form> <!-- use capture mode when adding the event listener --> <!-- i.e. an event targeting an inner element is handled here before being handled by that element --> <div v-on:click.capture="doThis">...</div> <!-- only trigger handler if event.target is the element itself --> <!-- i.e. not from a child element --> <div v-on:click.self="doThat">...</div>
<!-- the click event will be triggered at most once --> <a v-on:click.once="doThis"></a>
<!-- the scroll event's default behavior (scrolling) will happen --> <!-- immediately, instead of waiting for `onScroll` to complete --> <!-- in case it contains `event.preventDefault()` --> <div v-on:scroll.passive="onScroll">...</div>
<!-- only call `vm.submit()` when the `keyCode` is 13 --> <input v-on:keyup.13="submit">
.enter.tab.delete (captures both “Delete” and “Backspace” keys).esc.space.up.down.left.right<!-- same as above --> <input v-on:keyup.enter="submit"> <!-- also works for shorthand --> <input @keyup.enter="submit"> |
// enable `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 |
KeyboardEvent.key as modifiers by converting them to kebab-case:<input @keyup.page-down="onPageDown">
|
$event.key === 'PageDown'let textarea = document.getElementById('test-target'),
consoleLog = document.getElementById('console-log'),
btnClearConsole = document.getElementById('btn-clear-console');
function logMessage(message) {
let p = document.createElement('p');
p.appendChild(document.createTextNode(message));
consoleLog.appendChild(p);
}
textarea.addEventListener('keydown', (e) => {
if (!e.repeat)
logMessage(`first keydown event. key property value is "${e.key}"`);
else
logMessage(`keydown event repeats. key property value is "${e.key}"`);
});
textarea.addEventListener('beforeinput', (e) => {
logMessage(`beforeinput event. you are about inputing "${e.data}"`);
});
textarea.addEventListener('input', (e) => {
logMessage(`input event. you have just inputed "${e.data}"`);
});
textarea.addEventListener('keyup', (e) => {
logMessage(`keyup event. key property value is "${e.key}"`);
});
btnClearConsole.addEventListener('click', (e) => {
let child = consoleLog.firstChild;
while (child) {
consoleLog.removeChild(child);
child = consoleLog.firstChild;
}
});.ctrl.alt.shift.meta<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
<!-- this will fire even if Alt or Shift is also pressed --> <button @click.ctrl="onClick">A</button> <!-- this will only fire when Ctrl and no other keys are pressed --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- this will only fire when no system modifiers are pressed --> <button @click.exact="onClick">A</button>
.left.right.middle<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> |
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) |
<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div>
new Vue({ el: '#example-3', data: { checkedNames: [] } })
<input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span>
<select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> |
new Vue({ el: '...', data: { selected: '' } })
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) |
<!-- `picked` is a string "a" when checked --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` is either true or false --> <input type="checkbox" v-model="toggle"> //在vue的設定中會傳true或false的值，但如果檢查該元素的value，那麼不論checked or not「都」會傳on的值。因為vue的v-modal雖似v-bind:value，但不是真的value，我想這樣的寫法在傳送表單時應該也有它自己的一套方式 <!-- `selected` is a string "abc" when the first option is selected --> <select v-model="selected"> <option value="abc">ABC</option> </select>
<input type="radio" v-model="pick" v-bind:value="a"> //// when checked: vm.pick === vm.a
<select v-model="selected"> <option v-bind:value="{ number: 123 }">123</option> </select> |
// when selected: typeof vm.selected // => 'object' vm.selected.number // => 123 |
Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) |
<div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div> |
<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 --> <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 `question` 发生改变，这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } }, created: function () { // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识， // 请参考：https://lodash.com/docs#debounce this.debouncedGetAnswer = _.debounce(this.getAnswer, 500) }, methods: { getAnswer: function () { if (this.question.indexOf('?') === -1) { this.answer = 'Questions usually contain a question mark. ;-)' return } this.answer = 'Thinking...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer)
}) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) } } }) </script>
//_.capitalize來自lodash，作用是转换字符串首字母为大写，剩下为小写。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。下方說明throttle和 debounce ，超时设定为15秒，不考虑容量限制。throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果又人进来，15秒等待重新计时，直到15秒超时，开始运送。new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) //response.data.chartName } }) |
<div id="app"> <h1>Bitcoin Price Index</h1> <section v-if="errored"> <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p> </section> <section v-else> <div v-if="loading">Loading...</div> <div v-else v-for="currency in info" class="currency" > {{ currency.description }}: <span class="lighten"> <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }} </span> </div> </section> </div> |
new Vue({ el: '#app', data () { return { info: null, loading: true, errored: false } }, filters: { currencydecimal (value) { return value.toFixed(2) } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => { //這個{}也有人在內容物只有一個時用() this.info = response.data.bpi }) .catch(error => { console.log(error) //這裡有沒有;依賴於有沒有分行 this.errored = true }) .finally(() => this.loading = false) } })
<div id="app">
<div>${ price | commaFormat | priceFormat }</div>
</div>var vm = new Vue({
el: '#app',
delimiters: ['${', '}'], // delimiters 傳入一個 array，第一個 index 是左側的表達式，第二個 index 是右側的表達式。因為在其他載入的資料庫中，也許有不是vue卻也用mustache寫法的程式語言，為避免衝突，可適用delimiters自定義表達式的符號。
data: {
price: 9999999
},
Filters: {
priceFormat: function(value) { // 加上 $ 字號
return '$' + value
},
commaFormat: function(value) { // 加上千分位符號
return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function (all, pre, groupOf3Digital) {
return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
})
}
}
});
// 由於部落格會把使用雙花括號的內容吃掉，所以設定 delimiters 以顯示完整程式碼。
Date.now() 不是响应式依赖(reactive dependent)，所以放在computed裡，他不會隨著時間變動而觸發，而需使用method進行調用！<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } 等同於
} }) |
vm.firstName 和 vm.lastName 的值。<!-- template -->
<div id="computed-setter-basic" v-cloak="v-cloak">
<h3 class="title-border">一般情況 computed setter 被觸發的時間點</h3>
<form class="pure-form">
<input type="text" v-model="fullName"/>
</form>
<p>firstName: {{ firstName }} <br/> lastName: {{ lastName }}</p>
</div>// js
// computed-setter-basic
new Vue({
el: '#computed-setter-basic',
data: {
firstName: 'PJ',
lastName: 'Chen'
},
computed: {
fullName: {
get () {
console.log('computed getter')
return this.firstName + ' ' + this.lastName
},
set (value) {
console.log('computed setter')
this.firstName = value.split(' ')[0]
this.lastName = value.split(' ')[1]
}
}
},
updated () {
console.log('updated')
}
})var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // 创建并挂载到 #app (会替换 #app) new MyComponent().$mount('#app') // 同上 new MyComponent({ el: '#app' }) // 或者，在文档之外渲染并且随后挂载 var component = new MyComponent().$mount() document.getElementById('app').appendChild(component.$el)
<!-- 单个元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- 组件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul> |
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> |
v-bind:class指令也可以与普通的 class 属性共存<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
data: { isActive: true, hasError: false }
<div v-bind:class="classObject"></div>
|
data: { classObject: { active: true, 'text-danger': false //''應該是因為class名稱有- 才會需要 } } |
data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, // !null等於true 'text-danger': this.error && this.error.type === 'fatal' //this.error.type 未定義 } } } |
<div class="static active"></div>
|
<div v-bind:class="[activeClass, errorClass]"></div>
|
data: { activeClass: 'active', errorClass: 'text-danger' } |
<div class="active text-danger"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass。<div v-bind:class="[{ active: isActive }, errorClass]"></div>
|
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30 }
<div v-bind:style="styleObject"></div>
|
data: { styleObject: { color: 'red', fontSize: '13px' } } |
<div v-bind:style="[baseStyles, overridingStyles]"></div>
|
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
keykey 属性，表示"这两个元素是完全独立的，不要复用它们”。否則在第一個輸入的input值會出現在第二個input中，程式如下。<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。// Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })
<div id="components-demo"> <button-counter></button-counter> </div>
new Vue({ el: '#components-demo' })
|
new Vue, such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.data option must be a function, so that each instance can maintain an independent copy of the returned data object.Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })
<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>
new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } })
//原本沒有data，data.posts的內容是json
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post>
v-bind to dynamically pass props.如此一來接API時posts就可以直接接json使用，如下：Vue.component('blog-post', { props: ['post'], template: ` <div> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` })
<blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post>
<!-- Component changes when currentTabComponent changes --> <component v-bind:is="currentTabComponent"></component> |
currentTabComponent can contain either:<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> |
v-model. <navigation-link> did not contain a <slot> element, any content passed to it would simply be discarded.<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
<base-layout> <template slot="header"> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot="footer"> <p>Here's some contact info</p> </template> </base-layout>
<base-layout> <h1 slot="header">Here might be a page title</h1> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </base-layout>
<button type="submit"> <slot>Submit</slot> </button>
<navigation-link url="/profile"> Logged in as {{ user.name }} </navigation-link> |
<navigation-link> 的作用域。例如尝试访问 url 是不会工作的。牢记一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
Vue.component 定义全局组件var x = 10; var obj = { x: 20, f: function(){ console.log(this.x); } }; obj.f(); // (1)var fOut = obj.f; fOut(); //(2)var obj2 = { x: 30, f: obj.f } obj2.f(); // (3)
(A物件.)函式.call(B物件,參數1,參數2,參數3, ......); //函式的this指向B物件(若B物件為null，則指向全域物件) (A物件.)函式.apply(B物件,[參數1,參數2,參數3, ......]); //函式的this指向B物件(若B物件為null，則指向全域物件)
2.5 如果函式原本具有參數，則可接續在第一個參數之後function add(num1, num2) { return this.num + num1 + num2;}var o = {num : 10};console.log(add.call(o, 20, 30)); // 60
→applyfunction add(num1, num2) {
return this.num + num1 + num2;
}
var o1 = {num : 10};
var o2 = {num : 100};
var args = [20, 30];
console.log(add.apply(o1, args)); // 60
console.log(add.apply(o2, args)); // 150
var foo = function() {
console.log(this);
}
foo();new foo();/dist 文件夹只有在新版本发布时才会提交。如果想要使用 GitHub 上 Vue 最新的源码，你需要自己构建！
|
|
|
|
git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run build |
new Function() 对表达式求值。但当通过 webpack + vue-loader 或者 Browserify + vueify 构建时，模板将被预编译为 render 函数，如此便可以在 CSP 环境中完美运行。※CSP的分类