vue基础使用方法
v-modal
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
等价于：
<inputv-bind:value="message"v-on:input="message = $event.target.value"
>
在组件上使用：
Vue.component('custom-input', {props: ['value'],template: `<inputv-bind:value="value"v-on:input="$emit('input', $event.target.value)">`
})<custom-input v-model="searchText"></custom-input>
computed和method
<div id="app"><p>message：${ message }</p><p>now (computed)：${ now }</p><p>getNow (method)：${ getNow() }</p>
</div>var vm = new Vue({el: '#app',delimiters: ['${', '}'],data: {message: 'Hello World!',},computed: {now: function() {return Date.now();},},methods: {getNow: function() {return Date.now();},},
});//改变了message，computed才会更新，即computed依赖于属性
//getNow()方法每次调用都会更新
vm.message = '999';
组件
// 定义一个名为 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' })
data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
通过 Prop 向子组件传递数据，一个组件默认可以拥有任意数量的 prop。
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>
使用有约束条件的元素，table 内部只能有 tr：
<table><blog-post-row></blog-post-row>
</table>
这个自定义组件 `` 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：
<table><tr is="blog-post-row"></tr>
</table>
深入组件
全局注册，注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中：
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })
---------------------
<div id="app"><component-a></component-a><component-b></component-b><component-c></component-c>
</div>
局部注册：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }new Vue({el: '#app',components: {'component-a': ComponentA,'component-b': ComponentB}
})
局部注册的组件在其子组件中不可用，如果要在 ComponentB 使用ComponentA，则应该这样写：
var ComponentA = { /* ... */ }var ComponentB = {components: {'component-a': ComponentA},// ...
}//过 Babel 和 webpack 使用 ES2015 模块
import ComponentA from './ComponentA.vue'export default {components: {ComponentA},// ...
}
prop
使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'
})<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
给 props 传入静态值：
props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor
}<blog-post title="My journey with Vue"></blog-post>
可以通过 v-bind 动态赋值：
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 -->
<blog-postv-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
vue-router
动态匹配
const User = {template: '<div>User</div>'
}const router = new VueRouter({routes: [// dynamic segments start with a colon{ path: '/user/:id', component: User }]
})
/user/tyson 和 /user/tom 都会映射到同一个组件。路由匹配之后，每次组件都可以获取到 this.$route.params。
const User = {template: '<div>User {{ $route.params.id }}</div>'
}
在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。
| pattern | matched path | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' } |
导航
// 字符串
router.push('home')// 对象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
history 记录中向前或者后退多少步：
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)// 后退一步记录，等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
等同于：
router.push({ name: 'user', params: { userId: 123 }})
命名视图
有时候想同时 (同级) 展示多个视图，可以使用命名视图。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
如果 router-view 没有设置名字，那么默认为 default。
多个视图需要使用多个组件渲染，使用 components 配置：
const router = new VueRouter({routes: [{path: '/',components: {default: Foo,a: Bar,b: Baz}}]
})
嵌套命名视图
https://jsfiddle.net/posva/22wgksa3/
重定向
重定向也是通过 routes 配置来完成。
const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }]
})const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }} //重定向目标可以是命名路由]
})
别名：
const router = new VueRouter({routes: [{ path: '/a', component: A, alias: '/b' } //访问路径是/b，路由匹配为/a]
})