Vue组件学习笔记

Vue父组件向子组件传递数据

<div id="app">
<my-component :init-count="count"></my-component>
</div>
<script>
const Child = {
props: {
initCount: Number
},
template: '<div>{{ count }}</div>',
data () {
return {
count: this.initCount
}
},
methods: {
change () {
this.count = 2;
}
}
};
new Vue({
el: '#app',
components: {
'my-component': Child
},
data: {
count: 1
}
});
</script>

这里子组件里的:init-count指的是props中的initCount，其对应的值是count(父组件中的count)，指定是Number类型。

Vue的is特性

包括自定义元素和特殊标签，如、、不能用在ul,select,table等对内部元素有限制的标签内。放在这些元素内部的自定义标签将被提到元素的外面，因而渲染不正确。对于自定义元素，应当使用is特性：

<div id="app">
<table>
<tbody is="my-component"></tbody>
</table>
</div>
<script>
Vue.component('my-component', {
template: '<div>Table</div>'
});
new Vue({
el: '#app'
})
</script>

使用v-model进行组件通讯

子组件接受一个value属性，在有新的value时触发input事件，在子组件接受父组件的方法时，使用watch来监听接收的value的变化。

<div id="app">
{{ value }}
<my-com v-model="value"></my-com>
<button @click="handleMinus">-1</button>
</div>
<script>
Vue.component('my-com', {
props: {
value: {
type: Number
}
},
template: '<div>{{ currentValue }}<button @click="handleClick">+1</button></div>',
data () {
return {
currentValue: this.value
}
},
watch: {
value (val) {
this.currentValue = val;
}
},
methods: {
handleClick () {
this.currentValue ++;
this.$emit('input', this.currentValue);
}
}
});
new Vue({
el: '#app',
data: {
value: 1
},
methods: {
handleMinus () {
this.value --;
}
}
});
</script>

slot用法

<div id="app">
<app>
{{ message }}
</app>
</div>
<script>
Vue.component('app', {
template: '<div>Hello<slot>来自子组件的slot默认内容</slot></div>',
data () {
return {
message: '你好'
}
}
});
new Vue({
el: '#app',
data: {
message: 'world'
},
mounted(){
this.$slots.default;
}
});
</script>

原本app的message为world，我们需要在子组件中使用slot标签显示父组件中的message，当app中没有内容的时候，就会显示slot标签中的默认内容。

多个slot用法：使用具名方法，在app标签中则对应显示
里面的内容。

访问slot：在vue2.0中，使用$slots来访问，单个slot时default为默认，使用具名时则填写对应的具名。

内联模板

<com1 inline-template>
<!-- 内容 -->
</com1>

当组件使用了inline-template后，内容 将不再是 slot ，而是这个 com1 组件的 template ，也就是会渲染出内容。

手动挂载

<div id="app">
Hello Vue
</div>
<script>
const myComponent = Vue.extend({
template: '<div>from extend</div>'
});
new myComponent().$mount('#app');
</script>

使用$.mount()手动挂载到div中

vue-router技巧

const router = new Router({
mode: 'history',
routes : [
{
path: '/index',
meta: {
title: '首页'
},
component: (resolve) => require(['./index.vue'], resolve)
},
{
path: '*',
redirect: '/index'
},
{
path: '/',
component: {
default: Defaultvue, //这里是默认路由
title: Title
}
}]
});
router.beforeEach((to, from, next) => {
window.document.title = to.meta.title;
next();
});
router.afterEach((to, from, next) => {
window.scrollTo(0, 0);
});

1.这里设置了history模式,官方上给出的介绍是:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

2.设置path:’*’,没有匹配到的路由,将跳转到’/index’中

3.使用router.beforeEach改变其网页的title,使用next();进入到下一个钩子当中

4.使用router.afterEach让跳转后的回到页面顶部

5.component里的default:默认路由写法对应视图中同时有两个 其中一个为 没有则为默认

新版vue-cli本地服务器加载本地资源

1.在webpack.dev.conf.js文件

const portfinder = require('portfinder')

下面引入express

const express = require('express')
const app = express()
var appData = require('../mock/goods.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

2.在

devServer

对象中写入传输地址

before(apiRoutes) {
apiRoutes.get('/api/goods', function(req, res, next) {
res.json(appData)
})
}

使用过滤器以及计算属性

{{ text | filterA }}

通过Vue实例添加选项filters来设置:

filter: {
filterA: function (value) {
return value++  //返回过滤后的数据
}
}

计算属性:

{{ reversedText }}

在Vue实例computed选项中:

computed: {
reversedText: function () {
return this.text.split(',').reverse().join(',') //返回data内text属性修改后的内容
}
}

(简书笔记搬运 写于2017.06.29 13:45)