## 环境搭建

### 引入Vue

下载js文件：

- 开发版本：[https://cn.vuejs.org/js/vue.js](https://cn.vuejs.org/js/vue.js)
- 生产版本：[https://cn.vuejs.org/js/vue.min.js](https://cn.vuejs.org/js/vue.min.js)

用`<script>`标签引入，Vue会被注册为一个全局变量。

用谷歌浏览器打开html文件，切换到控制台，会出现2个小提示。

#### Vue开发者工具

第一个小提示，安装Vue开发者工具后，就不会出现提示了。

如果安装后还是不行的话，右键「Vue Devtools」->「管理扩展程序」，打开「允许访问文件网址」即可。

#### 修改全局配置

第二个小提示，需要修改全局配置：

    //阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;

## 脚手架自定义创建项目

### 安装脚手架

全局安装：`npm i -g @vue/cli`，如果之前安装过低版本的脚手架，想更新至最新版本的话，可先卸载当前版本再安装最新版本：`npm un -g vue-cli`。

查看版本：`vue -V`。

### 自定义创建项目

创建项目：`vue create test`： ? Please pick a preset: Manually select features（选择自定义） ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter（选择需要的特性） ? Choose a version of Vue.js that you want to start the project with 2.x（这里选择Vue2） ? Use history mode for router? (Requires proper server setup for index fallback in production) No（这里不使用历史模式，即URL路径中带有#号） ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less（选择CSS预处理器） ? Pick a linter / formatter config: Standard（ESLint代码检查和格式化工具，选择标准化无分号规范） ? Pick additional lint features: Lint on save（选择保存时检验） ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（将ESLint配置文件放在单独文件中） ? Save this as a preset for future projects? No（是否保存当前配置作为将来项目的预设，这里选择No） ? Pick the package manager to use when installing dependencies: Yarn（选择安装依赖时使用的包管理器，这里选择Yarn）

### 启动项目

    cd test
    yarn serve

### ESLint代码规范

- JavaScript Standard Style规范说明：[https://standardjs.com/rules-zhcn.html](https://standardjs.com/rules-zhcn.html)
- ESLint规则表：[https://zh-hans.eslint.org/docs/latest/rules](https://zh-hans.eslint.org/docs/latest/rules)

使用Prettier代码格式化工具，格式化Vue代码时可能出现单引号变双引号等其他问题，这时需要自定义一些配置，可在项目根目录下添加配置文件.prettierrc：

    {
      "singleQuote": true,
      "semi": false,
      "trailingComma": "none"
    }

### 调整初始化目录

#### 删除多余的文件

- src\assets\logo.png
- src\components\HelloWorld.vue
- src\views\AboutView.vue和src\views\HomeView.vue

#### 修改路由配置和App.vue

src\router\index.js：删除HomeView导入，删除routes，默认路由规则设置为空数组，即：

    import Vue from "vue";
    import VueRouter from "vue-router";
    Vue.use(VueRouter);
    const router = new VueRouter({
    routes: []
    });
    export default router;

src\App.vue修改为：

    <template>
      <div id="app">
        <router-view />
      </div>
    </template>
    
    <style lang="less"></style>

#### 新增api和utils目录

在src目录下新增两个目录api和utils：

- api接口模块：发送ajax请求的接口模块
- utils工具模块：自己装的一些工具方法模块

## 数据代理

### Object.defineProperty()方法

这个方法接收三个参数：属性所在的对象、属性的名字、一个描述符对象。 <script> let number = 20 let person = { name: "张三", sex: "女", } Object.defineProperty(person, "age", { value: 18, enumerable: true, //控制属性是否可枚举，默认不可枚举 writable: true, //控制属性是否可修改，默认不可修改 configurable: true, //控制属性是否可删除，默认不可删除 }) </script>该方法的第三个参数除了可以是数据属性，也可以是访问器属性： <script> let number = 20 let person = { name: "张三", sex: "女", } Object.defineProperty(person, "age", { //当读取person的age属性时，get函数(getter)会被调用，且返回值是age的值 get() { return number },

    //当修改person的age属性时，set函数(setter)会被调用，且会收到修改的具体值
    set(value) {
      number = value
    },
    

})
</script>

## 事件处理

### 基本使用

<body> <div id="root"> <button @click="showInfo($event,666)">点{{name}}提示信息</button> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el: "#root", data: { name: "李小龙", }, methods: { showInfo(event, number) { console.log(event, number); }, }, }); </script> </body>

### 事件修饰符

1. prevent：阻止默认事件
2. stop：阻止事件冒泡
3. once：事件只触发一次
4. capture：使用事件的捕获模式
5. self：只有event.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写： <body> <div id="root" @click="showInfo"> <a href="https://www.baidu.com/" @click.stop.prevent="showInfo">点我提示信息</a> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el: "#root", methods: { showInfo() { alert("你好呀"); }, }, }); </script> </body>

### 键盘事件

1. 回车 => enter
2. 删除 => delete（“删除”和“退格”键）
3. 退出 => esc
4. 空格 => space
5. 换行 => tab（配合keydown使用）
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right

系统修饰键：ctrl、alt、shift、meta，配合keydown使用。想用keyup，还可以这样用：

    // ctrl + y
    @keyup.ctrl.y="showInfo"

## 计算属性

<div id="root"> 姓：<input type="text" v-model="firstName" /><br /><br /> 名：<input type="text" v-model="lastName" /><br /><br /> 全名：<span>{{fullName}}</span> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el: "#root", data: { firstName: "张", lastName: "三", }, computed: { fullName() { return this.firstName + "-" + this.lastName; }, }, }); </script>

### 计算属性完整写法

<!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body>  <div id="app"> 姓：<input type="text" v-model="firstName" /> + 名：<input type="text" v-model="lastName" /> = <span>{{fullName}}</span><br /><br /> <button @click="changeName">改名</button> </div>

    &lt;!-- 第二步：引包 --&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    
    &lt;script&gt;
      // 第三步：创建实例，添加配置项
      const app = new Vue({
        el: '#app',
        data: {
          firstName: '张',
          lastName: '三',
        },
        methods: {
          changeName() {
            this.fullName = '张小三'
          },
        },
        computed: {
          fullName: {
            get() {
              return this.firstName + this.lastName
            },
            set(value) {
              this.firstName = value.slice(0, 1)
              this.lastName = value.slice(1)
            },
          },
        },
      })
    &lt;/script&gt;
    

</body>
</html>

## 监视属性

<body> <div id="app"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div>

<script>
const app = new Vue({
el: "#app",
data: {
isHot: true,
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽"
},
},
methods: {
changeWeather() {
this.isHot = !this.isHot
},
},
watch: {
isHot: {
immediate: true, //初始化时让handler调用一下
//当isHot发生改变时调用handler
handler(newValue, oldValue) {
console.log("isHot被修改了", newValue, oldValue)
},
},
},
})
</script>
</body>

还可以这么写：

    app.$watch("isHot", {
      immediate: true,
      handler(newValue, oldValue) {
        console.log("isHot被修改了", newValue, oldValue)
      },
    })

### 深度监视

<script> const app = new Vue({ el: "#app", data: { numbers: { a: 10, b: 20, }, }, watch: { numbers: { deep: true, //深度监视 handler() { console.log("numbers改变了") }, }, }, }) </script>

### 监视简写

watch: { isHot(newValue, oldValue) { console.log("isHot被修改了", newValue, oldValue) }, }还可以简写：

    app.$watch("isHot", function (newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue)
          })

### 实时翻译案例

<!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body>  <div id="app"><textarea v-model="obj.words"></textarea>{{result}}</div>

    &lt;!-- 第二步：引包 --&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
    
    &lt;script&gt;
      // 第三步：创建实例，添加配置项
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '',
          },
          result: '',
        },
        watch: {
          'obj.words'(newValue) {
            // 防抖优化（延时 300ms）
            clearInterval(this.timer)
            this.timer = setTimeout(async () =&gt; {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                  words: newValue,
                },
              })
              this.result = res.data.data
            }, 300)
          },
        },
      })
    &lt;/script&gt;
    

</body>
</html>

## 列表过滤

用watch实现： <div id="app"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord" /> <ul> <li v-for="(p,index) of filPersons" :key="index"> {{p.name}}--{{p.age}} </li> </ul> </div>

<script>
const app = new Vue({
el: "#app",
data: {
keyWord: "",
persons: [
{ id: "001", name: "李小龙", age: 18 },
{ id: "002", name: "李大龙", age: 19 },
{ id: "003", name: "李中龙", age: 20 },
{ id: "004", name: "周杰伦", age: 21 },
],
filPersons: [],
},
watch: {
keyWord: {
immediate: true,
handler(val) {
this.filPersons = this.persons.filter((p) => {
return p.name.indexOf(val) !== -1
})
},
},
},
})
</script>

用computed实现：<script> const app = new Vue({ el: "#app", data: { keyWord: "", persons: [ { id: "001", name: "李小龙", age: 18 }, { id: "002", name: "李大龙", age: 19 }, { id: "003", name: "李中龙", age: 20 }, { id: "004", name: "周杰伦", age: 21 }, ], }, computed: { filPersons() { return this.persons.filter((p) => { return p.name.indexOf(this.keyWord) !== -1 }) }, }, }) </script>

## 列表排序

<div id="app"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord" /> <button @click="sortType=1">年龄升序</button> <button @click="sortType=2">年龄降序</button> <button @click="sortType=0">原顺序</button> <ul> <li v-for="(p,index) of filPersons" :key="index"> {{p.name}}--{{p.age}} </li> </ul> </div>

<script>
const app = new Vue({
el: "#app",
data: {
keyWord: "",
sortType: 0, //0原顺序 1升序 2降序
persons: [
{ id: "001", name: "李小龙", age: 28 },
{ id: "002", name: "李大龙", age: 19 },
{ id: "003", name: "李中龙", age: 20 },
{ id: "004", name: "周杰伦", age: 11 },
],
},
computed: {
filPersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
//判断是否需要排序
if (this.sortType) {
arr.sort((p1, p2) => {
return this.sortType == 1 ? p1.age - p2.age : p2.age - p1.age
})
}
return arr
},
},
})
</script>

Vue编程笔记

CentOS 7自带的Python版本是Python 2.7，想用Python 3就需要手动安装，并且配置后才可以并存使用。

## 查看Python在哪儿

    whereis python
    cd /usr/bin/
    ll python*

可以看到Python在/usr/bin目录中，python指向python2，python2指向python2.7，因此我们可以装个python3，然后将python指向python3，那么两个版本的python就能共存了。

## 通过yum安装

这种方式安装，简单高效、无需配置环境变量、但是最高支持3.6.8版本。

安装命令：`yum install python3 -y`

卸载命令：`yum remove python3 -y`

安装pip：`python3 -m pip install --upgrade pip`

## 手动编译安装

首先安装安装gcc编译器：`yum install gcc -y`

接着运行以下命令，安装编译Python 3需用到的相关依赖：

    yum -y install openssl-devel libffi-devel bzip2-devel
    yum -y groupinstall "Development Tools"

## 安装openssl

Python 3.10必需 openssl >= 1.1.1。

    wget https://www.openssl.org/source/openssl-1.1.1q.tar.gz
    tar zxf openssl-1.1.1q.tar.gz
    cd openssl-1.1.1q
    ./config --prefix=/usr/local/openssl-1.1.1
    sudo make && sudo make install

## 安装pip

    ## 添加epel扩展源
    yum -y install epel-release
    yum -y install libffi-devel
    安装pip
    yum install python-pip

## 下载Python 3源码包

    wget http://npm.taobao.org/mirrors/python/3.10.7/Python-3.10.7.tar.xz

## 编译Python 3源码包

    # 解压
    xz -d Python-3.10.7.tar.xz
    tar -xf Python-3.10.7.tar
    进入解压后目录，依次执行下面命令进行手动编译
    cd Python-3.10.7
    --prefix指定安装路径，不指定的话安装过程中可能软件所需要的文件复制到其他不同目录，删除软件很不方便，复制也不方便
    ./configure --enable-optimizations --with-openssl=/usr/local/openssl-1.1.1 --with-openssl-rpath=auto --prefix=/usr/local/python3
    make && make install

最后没提示错误，就代表正确安装了，在/usr/local/目录下就会有python3目录。

## 添加软链接

    # 原来链接备份
    mv /usr/bin/python /usr/bin/python.bak
    添加python3软链接
    ln -s /usr/local/python3/bin/python3.10 /usr/bin/python
    测试是否安装成功
    python -V

## 更改yum配置

因为其要用到python2才能执行，否则会导致yum不能正常使用。

    vi /usr/bin/yum
    vi /usr/libexec/urlgrabber-ext-down

把`#! /usr/bin/python`修改为`#! /usr/bin/python2`。


CentOS 7下安装Python 3教程

## RMySQL

先安装依赖包：

    sudo yum install mariadb-devel
    sudo yum install mysql-devel

在安装RMySQL：

    install.packages('RMySQL')

## RCurl和curl

直接安装可能会报错，需要先执行：

    sudo yum -y install curl
    sudo yum -y install libcurl libcurl-devel
    sudo yum -y install libxml2 libxml2-devel

然后再安装RCurl和curl：

    sudo su - -c 
    "R -e "install.packages('RCurl', repos='https://cran.rstudio.com/')""
    sudo su - -c 
    "R -e "install.packages('curl', repos='https://cran.rstudio.com/')""


CentOS 7安装R包

CentOS 7下，pip没有设置的话，在命令行输入`pip --version`，指向的是python2。

安装好Python 3后，里面就已经下载好了pip3，我们只需要把pip指向python3即可。

    cd /usr/bin
    ll pip*
    ## 删除pip文件
    rm pip
    ## 重新设置pip文件
    ln -s /usr/local/python3/bin/pip3 /usr/bin/pip
    ## 补加pip3命令
    ln -s /usr/local/python3/bin/pip3 /usr/bin/pip3 

此时输入命令`pip --version`或者`pip3 --version`会发现pip已经指向python3了。

以后下载python3的库，直接使用命令，`pip3 install`或`pip install`，而下载python2的库，使用命令`pip2 install`。


CentOS 7下pip2和pip3共存问题

在Linux Mint下，用Vim编辑器编辑文本时，会遇到退格键和上下左右方向键不能正常使用的情况：退格键不能删除前面的字符，方向键不能移动光标，而是出现A、B、C、D每个字符一行。这种情况是因为Linux Mint默认安装vim-tiny简易版本，所以出现了错误。

解决方法其实很简单，进入/etc/vim目录，修改vimrc.tiny文件。

    sudo vi /etc/vim/vimrc.tiny

把`set compatible`改为`set nocompatible`，关闭兼容模式。compatible是兼容的意思，nocompatible是不兼容，Vim是Vi的扩展，nocompatible是指Vim在工作的时候不需要考虑和Vi兼容。

并在后面加一句`set backspace=2`，设置Backspace可以删除任意字符。可以顺便设置一下行号显示等等，最终效果如下所示：

    " 关闭兼容模式
    set nocompatible
    " 设置Backspace可以删除任意字符
    set backspace=2
    " 显示行号
    set number
    " 设置Tab键为4个空格
    set tabstop=4 
    " 设置自动对齐为4个空格
    set shiftwidth=4
    " 搜索时不区分大小写
    set ignorecase
    " 搜索时高亮显示
    set hlsearch


解决Linux Mint下Vim编辑器退格键Backspace和方向键不能正常使用的问题

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。