Vue使用日记（1）：Vue基础概念梳理

1、Vue是什么？

Vue (读音 /vjuː/，类似于 view)，不要读错。

Vue是一个渐进式的框架，什么是渐进式？

渐进式是指可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

或者如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库和它的生态系统：Vue-core+Vue-router+Vuex+axios，也可以满足你各种各样的需求。

 

2、Vue的特点

解耦视图和数据、可复用的组件、前端路由技术、状态管理、虚拟DOM。

1）解耦视图和数据：

传统js+html+css编程模式会经历这样的过程——获取DOM节点，然后对该节点进行操作。

Vue使视图和数据分离，编程过程避免出现document.getElementBy......这种情况，如果使用Vue进行开发仍频繁出现这类代码，就得开始反思使用Vue的意义了。

视图和数据的解耦，我们只需将数据绑定到视图（html元素）上，数据的解析交给Vue和浏览器就好。但是如果确实要操作某个DOM节点怎么办，Dontworry，Vue实现数据和视图的解耦，自然考虑了这些情况。我们只需在要操作的DOM节点身上绑定事件（比如点击事件@click），然后在methods里写好操作逻辑即可：

<button @click="btnClick">点击一下</button>

methods:{
 btnClick(){
    //处理逻辑
    }
}

<div id="app">
  {{message}}
  <input ref="myName" type="text" value="hahaha" @input="changeEvent"/>
</div>

data(){
    return:{
        message:"Hello Vue."
    }
},
methods:{
    changeEvent(){
        this.message = this.$refs.myName.value;
        console.log(this.$refs.myName.value);
    }
}

//当然，我们不会这样用ref，我们会使用v-model进行双向绑定，绑定一个值，input元素输入的内容改变，值也实时改变

说明：如果想获取某个元素，可使用$refs指令。你只需起个名字（如myName），就可以通过“this.$refs.myName”的形式获取该元素。

 

2）可复用的组件：Vue使用组件化的开发思想，使用.vue文件替代传统的.js文件和.html文件。而基于组件化思想进行开发，带来了复用性和易维护性等好处，也就是说在下一个项目里，原项目的组件依然可以使用。

3）前端路由技术：传统的页面跳转可能是a标签跳转或location.href这种形式的跳转，Vue使用路由技术进行跳转。整个项目只有页面之间的切换，不存在页面跳转带来的延迟等待情况。当然，如果项目需要页面跳转的另当别论。

{
    name: "login",
    path: "/users/login",
    meta: {
      title: ""
    },
    component: () => import("@/views/users/login.vue")
}

4）状态管理和虚拟DOM：作者在Vue中加入Vuex，用以管理项目的公共状态信息，比如登录状态、地理位置等等；虚拟DOM是随着React的诞生而诞生的概念，由Facebook提出。虚拟DOM的出现是为了提高操作DOM节点的效率。 可以跳转博客阅读：https://www.cnblogs.com/gaosong-shuhong/p/9253959.html。

 

3、Vue的安装和创建项目

使用Vue的方式有很多，有三种方式。

方式一：CDN引入

有开发环境版和生产环境版两个版本可以引用：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载引入

开发环境版本：https://vuejs.org/js/vue.js
生产环境版本：https://vuejs.org/js/vue.min.js

下载好，然后使用script标签将下载好的vue.js引入到html文件里。

方式三：NPM安装

npm install @vue/cli -g
//这里指全局安装Vue和Vue脚手架

创建项目

使用下面的命令创建项目。

vue create vue_project_name

上面使用的是脚手架3来创建项目，创建完成的项目目录如下：

注意：使用脚手架2创建项目的命令如下：

vue init webpack project_name

说明：使用命令前需要先安装webpack。

 

4、起步

项目创建完成之后，我们开始尝试代码编写（注意下面的代码是清理了项目初始化时的代码的情况）：

通过Mustache语法(即双大括号)将data中定义的数据插入到HTML中。

整体的项目代码如下所示。

App.vue:

<div id="app">
  {{ message }}
</div>

export default {
  name: 'app',
  data(){
    return {
      message:"Hello Vue"
    }
  }
}

main.js:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

然后输入命令：

npm run serve

即可运行项目。

到此，Vue相关基础知识告一段落，后续继续总结其他部分。