组件基础——vue

NodeJS

一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！

nvm 是一种流行的运行 Node.js 的方式。 例如，它可以轻松地切换 Node.js 版本，也可以安装新版本用以尝试并且当出现问题时轻松地回滚。

查看 npm 安装路径

npm config get prefix

修改 npm 安装路径

npm config set prefix "path"

查看 npm 缓存路径

npm config get cache

修改 npm 缓存路径

npm config set cache "path"

VueJS

安装或引用

npm install vue	

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

安装 vue 脚手架

npm install vue-cli -g

新建vue项目

vue init webpack CFormDensigner

运行项目

npm run dev

获取节点

通过在元素里面使用属性ref来获取元素，获取到得元素下的节点以列表的形式存放在对象里面。我们可以通过这个对象非常方便地获取元素的属性值，以键值对的形式保存在对象中。

<form ref="login">
    <input name="username"/>
    <input name="password"/>
</form>
<script>
    var username = app.$refs.login[0].value;
    var password = app.$refs.login[1].value;
</script>

设置组件

• 注册组件

  Vue.component('component-name',{
      model: {},
      props: [] | {},
      data: function(){return{}},
      template: '',
      methods: {}
  })
  

  model用于绑定一个事件与属性，属性的值会跟随事件进行刷新。

  props可以通过这个定义组件的属性，用于接收外部的参数。

  data 内部传参，但是它必须为函数，这样才能复用组件使其不会出现数据窜用的情况。

  template组件模板，展示什么样的组件。

  methods组件的方法，组件内部可以用于绑定事件。

• 定义组件属性

  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise 
  }
  props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
  

  支持通过v-bind动态给属性赋值，父子数据单向下绑定（即组件内部父级的属性值更新，子级跟随着更新，但是反过来则不行）。

  属性值作为数据的初始值

  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }
  

  Prop验证

• 外部绑定组件事件

  <div id="app">
      <component-name @clicknow="clicknow"></component-name>
  </div>
  

  Vue.component('component-name',{
      methods: {
          clickFun: function(){
              this.$emit('clicknow', this.data);
          }
      }
  })
  new Vue({
      el: '#app',
      methods: {
          clicknow: function(e){
              console.log(e);
          }
      }
  })
  

  事件名不存在任何自动化的大小写转换，v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。因此，我们推荐你始终使用 kebab-case 的事件名。

  v-model

• 组件内部插入代码

  <div id="app">
      <component-name @clicknow="clicknow">
          <div>slot 标签可以让组件内部插入代码</div>
      </component-name>
  </div>
  

  Vue.component('component-name',{
      template: '<div><slot></slot></div>'
  })