vue的一点最基本的语法

受够vue了

光研究这些语法细节了。

创建时

加载最简单的组件

参考

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

var app = new Vue({
 	el: '#components-demo',
	data:{
		name: "zhangsan",
		age: 99
	}
	})

参考：Vue.js
首先通过 new Vue() 来创建 Vue 实例
然后构造函数接收一个对象，对象中有一些属性：
el ：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div
data ：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
name ：这里指定了一个 name 属性

Vue 就可以基于 id 为 components-demo的 div 元素作为模板进行渲染了。在这个 div 范围以外的部分是无法使用 vue 特性的。
html:

js:

idea中默认的写法

main.js

import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

说明:

new Vue({
  render: h => h(App),
}).$mount('#app')

参考:这篇文章
下面是复制的
render: h => h(App) 是下面内容的缩写：

render: function (createElement) {
    return createElement(App);
}

进一步缩写为(ES6 语法)：

render (createElement) {
    return createElement(App);
}

再进一步缩写为：

render (h){
    return h(App);
}

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

这里你需要学习一下ES6的语法。（就特么是一种语法糖）
参考:ES6新特性箭头函数语法、如何正确使用箭头函数

其中 根据 Vue.js 作者 Even You 的回复，h 的含义如下：

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它来自单词 hyperscript，这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指
生成HTML 结构的 script 脚本，因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言）

理解：createElement 函数是用来生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。

Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
也就是说

new Vue({
  render: h => h(App),
}).$mount('#app')

等价于

import App from './App'
new Vue({
    el: '#root',
    template: '<App></App>',
    components: {
        App
    }
})

参考
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount(’#app’)进行挂载。

// 配置了el属性：

new Vue({
    el:"#app",
    router
});

// 如果没有配置el属性，可以使用手动挂载$mount("#app")
new Vue({
    router
}).$mount('#app');
var vm = new Vue({
    router
});
vm.$mount('#app');

最后的 $mount(’#app’); 中的#app，竟然是项目中index.html中的。感到好坑啊~
但是，在这里也有一个id为app的玩意，特么的，改了这里之后，竟然对页面有影响(页面变成左对齐了【原先是居中对齐】)。给了我不靠谱的感觉。
这个地方就不应该弄的名称一样。
居中是因为样式中设置了居中。

到了这里我忽然顿悟了，原来vue就是一个js脚本，它虚构了一个节点挂载在了html的一个节点上了。
有点像java虚拟机。

参考:浅入深出Vue：第一个页面

使用时

三个点

methods: {
        ...mapActions('setUp', [
            'SetDepAAA',
            // 'acSetStafflist',
            'SetStaTTT'
        ]),
        xxx(parm0,parm1){
        yyyy,
        dddd
        }
},

参考:es6之扩展运算符 三个点

参考:vuex：弄懂mapState、mapGetters、mapMutations、mapActions
参考2

父组件传值给子组件

vue文件的script字段

<script>
export default {
    name: "tiktokAccountCard",
    props:[
        'accountInfo',
    ],
    data() {
        return{
            name:"hello",
            age:15,
        }
    },
    methods:{
        
    }
</script>

注意：props这里是中括号

关于大小写

这个细节不要太在意。感觉这里不是很严格

import accountCard from "./accountCard";

export default {
    components:{
        accountCard,
    }
}

然而前面使用的时候，idea竟然提示我用

        <account-card>
        </account-card>

貌似它自动给我转了，而且还能用。