作为后端dev我，第一次学习Vue

Vue小白上手

pre-perparation

• 你需要准备node环境，brew install npm
• 你需要安装vue client, npm install -g @vue/cli
• 你还可以直接使用下列命令初始化vue项目，npm init vue@latest
  • 项目初始完成之后，进入到你的项目中cd <your project name>
  • 安装依赖，npm install
  • 运行项目，npm run dev，这个dev命令是在当前项目的package.json文件夹下定义的一些vue-cli-service命令的alias
• 完成了上述步骤，一个最基本的vue项目已经初始化好了

基础语法

• vue是基于组件化开发的一种前端框架，利用这种分离的方式使得前端业务得以解耦，每一个单体组件都被封装在一个.vue的文件中，只需要在用的地方加以引用便可以实现重复利用

加载app

• 定义一个main.js，这个类似于一个main函数入口，这个即被当做是当前vue项目的入口，在其中做出如下的定义：

  • 在当前目录下定义一个App.vue文件，在其中定义布局，引用模块，在main.js中引用，然后再挂载mount('#app')，使用#app就是使用了css的元素选择器

    import { createApp } from 'vue'
    // 从一个单文件组件中导入根组件
    import App from './App.vue'
    const app = createApp(App)
    app.mount('#app')

文本替换

• 使用模板语法赋值，{{template field}}，举个例子，<span>Message: {{ msg }}</span>当前的msg可以被定义在如下的代码中

  • 在<script></script>代码块中定义如下的声明，在html被渲染的时候将会进行替换，除了声明简单的文本，在Mustache中还可以定义一些表达式，请注意一定是表达式

    export default {
      data() {
        return {
          msg: "default value"
        }
      }
    }

  • Mustache的替换模式只能用来替换某个元素的值，如果想要替换html的属性的值，这里可以使用attribute，v-bind, v-if, v-for等等

    • 举个🌰：<input v-bind:id="someId"></input>，因为v-bind使用的频率很高还可以用<input :id="someId"></input>代替，其中的someId就可以使用以下的方式赋值:

      export default {
        data() {
          return {
            someId: "default value"
          }
        }
      }

• 计算值的方式

  • 计算属性缓存，使用compute属性，计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算
  • 方法，使用method属性，方法调用总是会在重渲染发生时再次执行函数

基础事件支持

• 类型

  • 内联式，适用于比较简单的场景，直接把计算逻辑放在事件后面，🌰：html代码

    <button onclick="count++">OK</button>
    <p>{{count}}</p>
    
    <script>
      export default {
        data() {
          return {
            count : 0
          }
        }
      }
    </script>

  • 方法式，将复杂的逻辑提取到method属性中，使用的时候，直接调用方法名即可

• vue支持的事件，可以参考 官方文档

表单事件绑定

• 直接使用v-model，实现双向绑定，支持所有的表单属性，当有对应的事件发生的时候，将会改变绑定对象的值

组件之间传值

• 在父组件中使用子组件的属性传值，以下是父组件的例子

  <ChatChannel :childComponent="selected"/>
  
  <script>
    export default() {
      data() {
        return {
          selected: "default value"
        }
      }
    }
  </script>

• 在子组件定义props接收父组件的传值，并使用它

  <script>
    export default() {
      props: {
      childComponent: {
          type: String,
          required: true
        }
      },
      method: {
        showChildComponent() {
          alert(this.childComponent)
        }
      }
    }
  </script>