Vue.js一课一得

 基本概念

Vue.js是一个用于构建用户界面的渐进式JavaScript框架，它采用了一些现代化的技术和设计原则，使得开发者可以更加高效地构建交互式的Web应用程序。

核心概念：

1. 数据绑定：Vue.js采用双向数据绑定机制，将视图层和数据层进行关联，当数据变化时，视图会自动更新，反之亦然。

2. 组件化开发：Vue.js将应用程序划分为多个组件，每个组件都有自己的模板、逻辑、样式和组件间通信机制，便于开发和维护大型应用程序。

3. 虚拟DOM：Vue.js使用虚拟DOM来优化性能，当数据变化时，Vue.js会先在虚拟DOM中进行计算，然后再将真实DOM更新，从而减少不必要的DOM操作，提高了应用的性能。

4. 模板语法：Vue.js提供了简洁明了的模板语法，可以将数据绑定到HTML模板中，并使用指令控制DOM操作，从而使得开发者可以更加专注于业务逻辑。

5. 生命周期钩子：Vue.js提供了一些生命周期钩子函数，如created、mounted等，在组件的不同生命周期阶段执行相应的操作，方便开发者实现自己的业务逻辑。

6. 状态管理：Vue.js提供了Vuex状态管理库，用于集中管理应用程序的共享状态，可以方便地实现组件间的通信和数据共享。

7. 路由管理：Vue.js提供了Vue Router路由管理库，用于实现前端路由，并实现单页应用，从而使得开发者可以更加高效地进行页面导航和视图管理。

总之，Vue.js拥有简单易学、高效灵活、可扩展性强等特点，是构建现代Web应用程序的一种优秀选择。

使用优点

1. 简单易学：Vue.js 的语法简洁明了，易于理解和上手。它采用组件化开发的思想，使得代码模块化，更易于维护和复用。

2. 渐进式框架：Vue.js 是一个渐进式框架，可以根据项目需求逐步引入。你可以将 Vue.js 应用于一个小的页面部分，也可以构建大型的单页应用。

3. 双向数据绑定：Vue.js 提供了双向数据绑定的能力，通过使用 v-model 指令，可以轻松实现数据的双向绑定，使数据的变化能够自动同步到视图上，提升开发效率。

4. 轻量高效：Vue.js 的核心库文件很小，加载速度快，使得页面响应更迅速，用户体验更好。Vue.js 还采用了虚拟 DOM 技术，通过最小化 DOM 操作来提高性能。

5. 生态丰富：Vue.js 拥有庞大的社区支持和插件生态系统，有许多第三方库和插件可供选择，可以满足各种需求，提升开发效率。

6. 组件化开发：Vue.js 鼓励组件化开发，可以将页面拆分成多个独立的组件，每个组件都有自己的模板、逻辑和样式，便于团队协作和代码复用。

总之，Vue.js 是一个灵活、高效且易用的框架，适合各种规模的项目开发。无论是初学者还是有经验的开发者，都可以从中受益，并快速构建出优秀的 Web 应用程序。

开发模式：

基础特性：

1. 声明式渲染：Vue.js使用模板语法，将DOM和数据绑定在一起，通过简单的表达式将数据渲染到页面上。

2. 组件化开发：Vue.js支持组件化开发，将页面拆分成多个独立的、可复用的组件。每个组件都有自己的逻辑、模板和样式。

3. 数据驱动：Vue.js使用响应式数据绑定机制，当数据发生变化时，相关的DOM元素会自动更新。你只需要关注数据的变化，而不必手动更新DOM。

4. MVVM架构：Vue.js采用了MVVM（Model-View-ViewModel）的架构模式。数据模型（Model）驱动视图（View），同时ViewModel将Model与View进行关联。

5. 指令系统：Vue.js提供了丰富的指令系统，例如v-if、v-for、v-bind等，用于处理DOM元素的显示、隐藏、循环和属性绑定。

6. 生命周期钩子：Vue.js提供了一系列的生命周期钩子函数，可以在组件实例的不同阶段执行相应的操作，例如created、mounted、updated等。

7. 插件扩展：Vue.js可以通过插件系统进行扩展，从而添加额外的功能和特性。官方提供了许多插件，同时也支持第三方插件的集成。

8. 虚拟DOM：Vue.js使用虚拟DOM技术，通过在内存中构建虚拟DOM树来进行高效的DOM操作，从而提高页面渲染性能。

 学习实践：

常用的构造选项：el、data、methods、computed、components、filters、watch

<div id="app">
  <h1 :class="{ 'text-red': isRed }">Hello, Vue!</h1>
</div>
new Vue({
  el: '#app',
  data: {
    isRed: true
  }
});

 创建项目：

1. 确保你已经安装了 Node.js 和 npm（Node 包管理器）。你可以在命令行中输入 node -v 和 npm -v 来检查它们的版本。使用 npm 全局安装 Vue CLI。在命令行中运行以下命令：npm install -g @vue/cli

2. 安装脚手架：

        //安装淘宝镜像的命令行

             ①  npm install -g cnpm --registry=https://registry.npmmirror.com

             // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

             ②  cnpm install -g @vue/cli

 安装成功

vue create 命令创建项目

// helloworld 是项目名，可自行定义          

vue create helloworld

后手动选择配置 

后一步步创建项目，在查看——终端，输入

cd helloword

npm run serve

启动项目，在浏览器输入终端下面的地址就可以看到

这个界面 ，说明安装启动成功。

组件使用 ：

1.通过绑定属性方式 

1.父组件向子组件传递 通过绑定属性值的方式，子组件通过props接受传递过来的属性

<my-foot :todos="todos"></my-foot>  //父传子
 //子组件接受
 export default {
  name: "MyFoot",
  props: ["todos"],
  data() {
    return {
      visibility: "all",
    };
  },

子组件向父子传值

1.父组件先定义一个方法，通过绑定属性方式发传递个子组件，子组件通过事件触发父组件的方式把子组件的值传递个父组件

<template>
  <div id="app">
    <h2>父组件</h2>
    <Stu :showStuName="showStuName"></Stu>
  </div>
</template>

<script>
import Stu from "./components/Stu.vue";
import School from "./components/School.vue";
export default {
  name: "App",
  components: {
    Stu,
    School,
  },
  methods: {
      //父组件的方法
    showStuName(name) {
      console.log(name);
    },
    demo(name) {
      console.log("学校名", name);
    },
  },
  mounted() {
    this.$refs.school.$on("sendSchoolName", this.demo);
  },
};
</script>

//子组件
<template>
  <div class="stu">
    <h3>学生姓名：{{ name }}</h3>
    <h3>学生年龄：{{ age }}</h3>
    <button @click="sendData">向父组件传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "zhangsan",
      age: 18,
    };
  },
  props: ["showStuName"], //接受父子组件的方法
  methods: {
      //通过事件触发父子传递的方法
    sendData() {
      console.log("向父组件传值");
      this.showStuName(this.name);
    },
  },
};
</script>

常见问题：

vue项目开发中可能遇到的难点有：

安装超时

方案有这么些:

cnpm : 国内对npm的镜像版本
/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org

// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
yarn 和 npm 改源大法

//使用 nrm 模块 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.org

2.安装一些需要编译的包:提示没有安装python、build失败等

因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,大多都齐全 window 用户依赖 visual studio 的一些库和python 2+, windows的小伙伴都装上: windows-build-tools python 2.x

3.can’t not find ‘xxModule’ - 找不到某些依赖或者模块

这种情况一般报错信息可以看到是哪个包抛出的信息.，一般卸载这个模块,安装重新安装下即可.

4.data functions should return an object

这个问题是 vue 实例内,单组件的data必须返回一个对象;如下

export default {
  name: 'page-router-view',
      data () {
      return {
        tabs: [
          {
            title: '财务信息',
            url: '/userinfo'
          },
          {
            title: '帐号信息',
            url: '/userinfo/base'
          }
        ]
      }
    }
}

为什么要 return 一个数据对象呢? 官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题...

5.我给组件内的原生控件添加事件,怎么不生效了!!!

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->