electron-vue notebook 01

electron-vue去掉讨厌的eslint

找到.\electron-vue文件夹下的三个文件：

webpack.main.config.js
webpack.renderer.config.js
webpack.web.config.js

搜索eslint，并删除或者注释这一段：

{
    test: /\.(js)$/,
    enforce: 'pre',
    exclude: /node_modules/,
    use: {
        loader: 'eslint-loader',
        options: {
        formatter: require('eslint-friendly-formatter')
        }
    }
},

vue组件

下面这种Vue.component()的写法是注册到全局的，任何new Vue()实例都可以使用该组件。

Vue.component('component-name', {
    // 数据。最好是一个function，才会每个模板实例都有自己的数据。如果返回的是
    // 一个字典，就会所有模板实例共用数据(然而vue并不会给你这么做，这是无效的)。
    data: function() {
        return {
            count: 0
        }
    },
    // 模板内容
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

// 不管如何还是要执行一次new Vue
new Vue({
    el: '#component-test'
})

1
2
3

<div id="component-test">
    <component-name></component-name>
</div>

由此看来，组件应该就是控件设计了。做得好的话应该弄个组件库的文件夹，专门写组件。把写组件给专业化。

给组件添加属性

所谓属性，比如超链接中的href或者图片中的src。

我们可以定义props字段来添加属性：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

使用：

1	<blog-post title="My journey with Vue"></blog-post>

另外，还可以使用数组，先在vue实例中定义一个数组，然后用v-for：

new Vue({
    el: '#blog-post-demo',
    data: {
        posts: [
            { id: 1, title: 'title 1'},
            { id: 2, title: 'title 2'}
        ]
    }
})

<blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:title="post.title"
></blog-post>

模板的根元素应当唯一

如果组件中的template这么写，会报every component musthave a single root element。

1 2	<h3>{{ title }}</h3> <div v-html="content"></div>

这意味着我们如果要定义一个模板，必须只能有单一的根元素，所以我们可以选择用一个div作为根元素包裹起来：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

props设置动态字段

假设定义了一个props为title，如果我们直接在html中写title="false"，那么title的值会变成字符串"false"，但是如果我们在title前加一个v-bind，变成v-bind:title="false"，那么title的值就会变成真正的布尔值false。