$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
Runtime+Compiler vs. Runtime-only
// this requires the compiler
new Vue({
template: `<div></div>`
})
// this does not
new Vue({
render (h) {
return h('div', this.hi)
}
})
//js
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
//html
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
Relation to Custom Elements—区别
Web Components Spec 一直是草案,而Vue components 不依赖任何处理可以工作在任何浏览器(IE9以上) 且可嵌入到原生element。
Although not strictly associated with the MVVM pattern, Vue’s design was partly inspired by it.
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch is an instance method
vm.$watch('a', function (newVal, oldVal) {
// this callback will be called when `vm.a` changes
})
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into Virtual DOM render functions(虚拟DOM渲染函数). Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
Interpolations(插值)
Text:<span>Message: </span>
Raw HTML:<div v-html="rawHtml"></div>
Attributes:<div v-bind:id="dynamicId"></div>
Using JS Expressions:<div v-bind:id="'list-' + id"></div>
Directions—Directives are special attributes with the v- prefix.
Arguments:Some directives can take an “argument”, denoted by a colon after the directive name. <a v-on:click="doSomething">
Modifiers: indicate that a directive should be bound in some special way. <form v-on:submit.prevent="onSubmit"></form>
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
Computed Caching vs Methods: the computed properties are cached based on their dependencies
Computed vs Watched Property:better to use a computed property
Computed Setter:you can provide a setter when you need it:
Watchers
when you want to perform asynchronous or expensive operations in response to changing data.
Class and Style Bindings
Binding HTML Classes
Object Syntax ```
- Array Syntax
``` - With Components ``` //When isActive is truthy, the rendered HTML will be:
``` - Auto-prefixing:Vue已替你考虑CSS的浏览器兼容性 ## List Rending ### v-if/v-else-if ```
A
B
C
Not A/B/C
``` - Controlling Reusable Elements with key ``` ``` - v-show ```
Hello!
``` - v-if vs v-show v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time. In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling.And Please note that v-show doesn’t support the ``` ```syntax, nor does it work with v-else Generally speaking, 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-if vs v-show:v-for has a higher priority than v-if ## List Rendering ### v-for:We can use the v-for directive to render a list of items based on an array. - Basic use >You can also use of as the delimiter instead of in, so that it is closer to JavaScript’s syntax for iterators: ``` //html
//You can also provide a second argument for the key:
//And another for the index:
``` > When iterating over an object, the order is based on the key enumeration order of Object.keys() 不保证所有JS引擎里边都表现一致。 - Range v-for:`````` - Components and v-for: ``` ``` > In 2.2.0+, when using v-for with a component, a key is now required.It is recommended to provide a key with v-for whenever possible ### Array Change Detection - Mutation Methods:突变方法 + push() + pop() + shift() + unshift() + splice() + sort() + reverse() - Replacing an Array: do not mutate the original array but always return a new array + filter() + concat() + slice() ``` example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) ``` - Caveats:Due to limitations in JavaScript, Vue cannot detect the following changes to an array: + When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue ``` // Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue) ``` + When you modify the length of the array, e.g. vm.items.length = newLength ```example1.items.splice(newLength)``` ### Displaying Filtered/Sorted Results ``` //create a computed property// use a method where computed properties are not feasible (e.g. inside nested v-for loops):``` ## Event Handing ### Listening to Events:use the v-on directive `````` ### Method Event Handlers:when event handlers are more complex `````` ### Methods in Inline Handlers ``` //Sometimes we also need to access the original DOM event in an inline statement handler. //js methods: { warn: function (message, event) { // now we have access to the native event if (event) event.preventDefault() alert(message) } } ``` ### Event Modifiers:To address the problem of purely dealing with data logic rather than DOM event details - .stop - .prevent - .capture - .self - .once:New in 2.1.4 ```
...
...
``` ### Key Modifiers/Modifier Keys ## Form Input Bindings ### Basic Usage - Text `````` - Multiline text ``` //Interpolation on textareas () won't work. Use v-model instead. ``` - Checkbox `````` - Radio `````` - Select: ``` //Single select
Leave a Comment