关于vue脚手架和基础

一：关于vue

1：vue是渐进式的JavaScript的框架，有一套属于自己的一套规则。

2：库是封装的属性和方法，而框架拥有自动规则和元素。

二：脚手架@vue/cli

它是一个官方提供的一个全局模块包，为了保证顺利而搭建的一个工作平台。

它的好处是：

（1）0配置webpack

（2）babel、css、less、支持

（3）开发服务器支持

1、@vue/cli安装

全局安装命令yarn global add @vue/cli或者npm install -g @vue/cli，用vue -V查看版本号，如果出现则安装成功，如果弹出未找到则需要配置环境（详情可以百度查询）

2、创建项目启动服务

1：创建项目:vue create 文件名

2：选择vue2的版本。

3：根据提示操作进行操作。

3、自定义配置

在src并列处新建vue.config.js然后在里面写上

module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

最新版本好像会自动生成vue.config.js文件直接填写就行了。

4、学习阶段可以考虑关闭eslint检查

module.exports = {
  lintOnSave:false //关闭selint检查
}

三、vue指令学习

1、插值表达式

语法：{{表达式}}

在花括号内部只能写表达式例如

<template>
  <div>
    <h1>{{ bds }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {
      bds: "hello",
      obj: {
        name: "老王",
        age: 5
      }
    }
  }
}
</script>

<style>
</style>

2、v-bind

语法： v-bind : 属性名 = "vue变量名"

还有简写的方式： : 属性名 = "vue变量名"

<a v-bind:herf="vue变量名">指令</a>
<a :herf="vue变量名">指令</a>//简写

3、v-on

绑定事件

语法：v-on:事件名="methods中的函数（实参）"

或者 @事件名 ="methods中的函数"

4、 v-on的修饰符

语法：@事件名.修饰符="methods里的函数"

1、.stop  阻止事件冒泡

2、 .prevent  阻止默认行为

3、 .once  程序运行期间只触发一次事件处理函数（这里有个误区，是指函数只执行一次但是事件正常触发）

5、v-on修饰符（给键盘事件添加修饰符）

语法：

1、@keyup.enter   监测回车按键

2、 @keyup.sec   监测返回按键

6、v-model

是把value属性vue数据变量双向的绑定在一起

语法： v-model="vue数据变量"

一般是用于表单数据获取，当然如果是复选框我们可以使用数组“[ ]”接收

7、 v-model修饰符

1、   .number  以parseFloat转换数字内型

2、   .trim    去除首尾空白的字符

3、   .lazy    在鼠标失去焦点时触发