Vue开篇配置与组件

Vue开篇配置与组件

我是先学习了React，后来因为需求，来学习Vue。

1. 安装与配置

cnpm install vue -S

在 package.json 文件里加上

"alias": {
    "vue": "./node_modules/vue/dist/vue.common.js"
  },

然后

 cnpm incstall @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -S
 cnpm i @babel/core -S

新建 .babelrc 文件，里面写

{
    "presets": ["@vue/babel-preset-jsx"]
}

在 index.js 里引用

import Vue from 'vue'

至此，我们就配置好了Vue环境

2. 简单组件
   我们呈现一个最简单的组件

<div id="app">{{a}}</div>
<div id="app1"></div>

js部分

let data = { a: 1 }
let vm = new Vue({
    el: "#app",
    data: function () { //data需要是一个函数，保证数据独立性
        return data
    },
})

el 属性只在用 new 创建实例时生效

如果不使用el，我们使用Vue.extend()

let vm2 = Vue.extend({
    template: '<div id="hello">{{message}}</div>', //有render时会被忽略
    data: function () { //data必须是一个函数
        return {
            message: 'Walter'
        }
    }
})
new vm2().$mount("#app1") // 挂载到div下

还可以注册或获取全局组件

    <div id="hello">
        <hello></hello>
    </div>

Vue.component("hello",{
    data: function () { //data必须是一个函数
        return {
            message: 'hello'
        }
    },
    template:'<div>{{message}}</div>'
})
new Vue({ el: '#hello' })

3. 渲染组件
   我还是希望想写react一样，在render的返回值里面写jsx语法

<div id="listA"></div>

new Vue({
    el: "#listA",
    data: function () {
        return {
            a: 1
        }
    },
    render: function (h) {
        return (<div>{this.a}</div>)
    }
})

如果为函数式组件(无响应数据)，需要加上

functional: true