diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-11.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-11.md" new file mode 100644 index 0000000000000000000000000000000000000000..9600353d139cfcf8440ab0bcfb2ed21ce84dab3e --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-11.md" @@ -0,0 +1,29 @@ + + + + +**打开Windows PowerShell** +1. 先安装yarn：```npm i -g yarn``` +2. 切换淘宝镜像（百度npm国内镜像）```npm config set registry https://registry.npm.taobao.org``` +3. 安装vue，```yarn global add @vue/cli```(```vue --version```检查版本是否正确的命令。```yarn global upgrade --latest @vue/cli```升级全局 Vue CLI 包命令) +4. 添加环境变量：电脑属性=>环境变量=>编辑系统变量path=>新建=>浏览=>c盘=>Administrator=>AppData=>Local=>Yarn=>bin(好了之后重新开启Windows PowerShell) +5. 切换到d盘：d:；然后创建：mkdir myGitProjects，切换目录创建： +![a](./img/4.png) +6. 选择Vue 2;选择Yarn +7. ![a](./img/5.png),![a](./img/6.png)现在浏览器输入：localhost:8080可以访问 + + +--- + + + +**打开cmd** +1. 切换淘宝镜像 +2. 全局安装```npm i -g @vue/cli yarn``` +3. 查看vue![a](./img/8.png) +5. 切换到d盘：d:；然后创建：mkdir myGitProjects，切换目录创建： +![a](./img/4.png) +6. 选择Vue 2;选择Yarn +7. 创建好的项目不会自己提交一次，要想创建和项目就自动提交一次需提前给信息： +![a](./img/9.png) +8. 创建好，可通过code打开 diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-12.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-12.md" new file mode 100644 index 0000000000000000000000000000000000000000..a6de3756b0eaa652c7afe7558c835c2a7de61969 --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-12.md" @@ -0,0 +1,118 @@ +## 单文件组件 +# 1.下载VueCli +# 连接淘宝镜像，加快下载速度 +``` +npm config set registry https://registry.npm.taobao.org +``` +# 下载VueCli，npm i -g @vue/cli yarn ,@vue/cli 和 yarn一起下载 +``` +npm i -g @vue/cli yarn +``` +# 下载完以后创建项目； + + +## 到文件夹中使用vscode打开创建的项目 +### 点击src文件夹下的App.vue,会跳出要我们安装扩展，安装 + +### 打开App.vue文件 +``` + + + + + +``` +![](./img/2021-06-012_1.png) + +## 试着新建一个.vue为后缀的文件名 +### 然后该文件由三个部分组成 +``` + + + + + + + + +``` +## 然后要在App.vue引入该文件(test.vue) +``` +import Test from './components/test.vue' //引入 +``` \ No newline at end of file diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-2.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-2.md" new file mode 100644 index 0000000000000000000000000000000000000000..89b7feb1763fd980c6855a119df935c406c6bf96 --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-2.md" @@ -0,0 +1,157 @@ +### 列表渲染 +``` + + + + + + Document + + +
+ + + + + +
+ + + + +``` +效果: + ![a](./img/2021-06-02_1.png) + + + + 用 v-for 把一个数组对应为一组元素 + 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。 + ``` + + + + + + + Document + + + + + + + + + + +``` +结果： + + ![a](./img/2021-06-03_1.png) + + + + 在 v-for 里使用对象 遍历 + ``` + + + + + + + Document + + + + + + + + + + +``` +结果： + + + ![a](./img/2021-06-03_2.png) diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-4.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-4.md" new file mode 100644 index 0000000000000000000000000000000000000000..8f48e6abcee399243ab3eae6c891260c35ad724c --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-4.md" @@ -0,0 +1,83 @@ +## 事件处理 + +#### 监听事件 +``` + + + + + + Document + + +
+ +

点击了{{counter}}次

+ +
+ + + + + + + +``` +结果： + + +![a](./img/2021-06-04_1.png) + +``` + + + + + + Document + + +
+ + + +
+ + + + + + + +``` diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-5.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-5.md" new file mode 100644 index 0000000000000000000000000000000000000000..aeaf48aa2b1fd8c20ee53b607f1c349ca0ca941c --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-5.md" @@ -0,0 +1,102 @@ +## 表单输入绑定 ++ v-model +``` + + + + + + Document + + +
+ +
+ + + + + + +``` +结果： + +![a](./img/2021-06-05_1.png) + +### 复选框 +``` + + + + + + Document + + +
+ + +
+ + + + +``` +![a](./img/2021-06-05_2.png) ++ 多个复选框 +``` + + + + + + Document + + +
+ + + + + + +
+ Checked names: {{ checkedNames }} +
+ + + + + + +``` +结果： + +![a](./img/2021-06-05_3.png) +### 选择框 diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-8.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-8.md" new file mode 100644 index 0000000000000000000000000000000000000000..58eff6a635e4af6e4c6c4c1f410131c8784078c0 --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-8.md" @@ -0,0 +1,38 @@ +## 组件基础 + +``` + + + + + + Document + + +
+ +
+ + + + +``` \ No newline at end of file diff --git "a/\346\236\227\350\267\203\345\275\254/2021-6-9.md" "b/\346\236\227\350\267\203\345\275\254/2021-6-9.md" new file mode 100644 index 0000000000000000000000000000000000000000..c19d7bc37dacf8979e8b61435ccbd12dff05cc94 --- /dev/null +++ "b/\346\236\227\350\267\203\345\275\254/2021-6-9.md" @@ -0,0 +1,11 @@ +## vue CLI安装 ++ powershell 设置淘宝镜像npm config set registry http://registry.npm.taobao.org/ ++ 安装yarn npm i -g yarn ++ yarn global add @vue/cli ++ 此电脑-属性-高级-环境变量-Path-编辑-浏览-用户-Administrator-AppData-Local-Bin ++ 打开powershell 切到D盘 ++ 创建文件夹mkdir myGitProjects ++ cd \myGitProjects\ ++ vue create my-vue-app ++ 选择vue2 use yarn ++ \ No newline at end of file diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-02_1.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-02_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..7f6e6f26b246de3281410f45bd58120b8a847ea9 Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-02_1.png" differ diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-03_1.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-03_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..feaa0f54eae38eca69838775ce110bf688648c1c Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-03_1.png" differ diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-03_2.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-03_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..e8406a8429d05c7cd9eb68232c00c0fd131a5fe0 Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-03_2.png" differ diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-04_1.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-04_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..b377527013277f0faba464738ba7e3ebcef5957c Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-04_1.png" differ diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-05_1.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-05_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..5d1006e0c7752d8a8f18275dd5eaf5ada3ed9090 Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-05_1.png" differ diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-05_2.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-05_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..a9c6156d85aeb53baeaf61b17fa164442dbaabd9 Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-05_2.png" differ diff --git "a/\346\236\227\350\267\203\345\275\254/img/2021-06-05_3.png" "b/\346\236\227\350\267\203\345\275\254/img/2021-06-05_3.png" new file mode 100644 index 0000000000000000000000000000000000000000..f7b9176f8106ba1befc995d1a235d5db678e188e Binary files /dev/null and "b/\346\236\227\350\267\203\345\275\254/img/2021-06-05_3.png" differ