diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-04(\347\254\254\344\270\203\350\212\202\350\257\276 \344\272\213\344\273\266\345\244\204\347\220\206).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-04(\347\254\254\344\270\203\350\212\202\350\257\276 \344\272\213\344\273\266\345\244\204\347\220\206).md" index a2a873bbd0b782fc08b979d7850bbdbcb4bb58ca..25d0c36182df063ed4df50ada0c7af63603f8b21 100644 --- "a/\346\235\250\345\256\207\346\226\214/note-2021-06-04(\347\254\254\344\270\203\350\212\202\350\257\276 \344\272\213\344\273\266\345\244\204\347\220\206).md" +++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-04(\347\254\254\344\270\203\350\212\202\350\257\276 \344\272\213\344\273\266\345\244\204\347\220\206).md" @@ -1,4 +1,4 @@ -# 2021-6-2 Vue.js Vue 事件处理 +# 2021-6-4 Vue.js Vue 事件处理 + 简单的v-on 触发事件 ``` diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" index 3e935a75880cfc5969243325daef72e6e4fb2a01..2ed31b0e714423fcc2878b66c075a74cb1e54b0d 100644 --- "a/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" +++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" @@ -1,4 +1,4 @@ -# 2021-6-5 Vue.js Vue 事件处理 +# 2021-6-5 Vue.js Vue 表单输入绑定 ## 文本 多行文本 复选框 单选按钮 选择框 + 多选时 (绑定到一个数组) diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-08(\347\254\254\344\271\235\350\212\202\350\257\276 \347\273\204\344\273\266\345\237\272\347\241\200).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-08(\347\254\254\344\271\235\350\212\202\350\257\276 \347\273\204\344\273\266\345\237\272\347\241\200).md" new file mode 100644 index 0000000000000000000000000000000000000000..3f12256c78be52c6c9361c66813d657e39e3f232 --- /dev/null +++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-08(\347\254\254\344\271\235\350\212\202\350\257\276 \347\273\204\344\273\266\345\237\272\347\241\200).md" @@ -0,0 +1,145 @@ +# 2021-6-8 Vue.js Vue 组件基础 ++ Vue.component 全局注册,局部注册 + +``` +
+ + + + + +
+ + + + + + + +``` +## 基本示例 组件的复用 ++ data 必须是一个函数 +``` +
+ //使用组件 + + + +
+ + + + +``` +## 通过 Prop 向子组件传递数据 +``` +
+ +
+ + + + +``` +### 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件 + +## 通过插槽分发内容 ++ slot 占位 +``` +
+ + Something bad happened. + +
+ + + + + +``` + diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-09(\347\254\254\345\215\201\350\212\202\350\257\276 vue Cli \345\256\211\350\243\205 ).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-09(\347\254\254\345\215\201\350\212\202\350\257\276 vue Cli \345\256\211\350\243\205 ).md" new file mode 100644 index 0000000000000000000000000000000000000000..41581f94ac00290ebd705a216780290105b4134c --- /dev/null +++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-09(\347\254\254\345\215\201\350\212\202\350\257\276 vue Cli \345\256\211\350\243\205 ).md" @@ -0,0 +1,60 @@ +# 2021-6-9 vue cli 安装 + +## mkdir 创建文件夹 rm -f 文件名称 删除 +1. 在cmd控制台安装yarn +``` + npm i -g yarn +``` +2. 安装yarn淘宝镜像 +``` +yarn config set registry https://registry.npm.taobao.org/ +``` +3. 安装 vue cli +``` +npm install -g @vue/cli +# OR +yarn global add @vue/cli +``` +4. 你还可以用这个命令来检查其版本是否正确： +``` +vue --version +``` +5. 如需升级全局的 Vue CLI 包，请运行： +``` +npm update -g @vue/cli + +# 或者 +yarn global upgrade --latest @vue/cli +``` +6. 如果在使用 vue 初始化项目的时候提示：无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 +``` +表示系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。 +环境变量：路径 +path +C/用户/Adminstor/Appdata/local/yarn/bin +``` + +7. vue create 项目名称 +``` +如：选择vue2 yarn 指令进行操作 +``` +8. 在项目内vs code 安装 Vetur +``` + 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档. + ``` + 9. Xshell服务器 cd /var/www/ mkdir vue.icu(创建文件名称) 在文件夹里放你的项目 + + 10. vim /etc/nginx/conf.d/vue.conf 进入到创建的配置文件 进行编辑 + ``` + server{ + listen 80; + server_name vue.icu; + + location / { + root /var/www/vue.icu; + index index.html; + } + } +``` +## nginx -t 检查 nginx -s reload 重启 +## 之后进入 /C/Windows/System32/drivers/etc/hosts 右键属性 安全点击高级 左下角点击添加 点击选择主体 点击高级 点击立即查找 第二个Administractor 确定 之后全选 除了特殊权限 之后应用确定 在打开hosts 在最下面添加自己的监听路径（网站ping） + 文件名称保存即可 直接访问文件名称 在浏览器上即可显示成功即成功 \ No newline at end of file diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-11(\347\254\254\345\215\201\344\270\200\350\212\202\350\257\276 vue cli \345\256\211\350\243\205).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-11(\347\254\254\345\215\201\344\270\200\350\212\202\350\257\276 vue cli \345\256\211\350\243\205).md" new file mode 100644 index 0000000000000000000000000000000000000000..b04606d0f818b96ba039ad07b20b445294fab91d --- /dev/null +++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-11(\347\254\254\345\215\201\344\270\200\350\212\202\350\257\276 vue cli \345\256\211\350\243\205).md" @@ -0,0 +1,60 @@ +# 2021-6-11 vue cli 安装 加一 + +## mkdir 创建文件夹 rm -f 文件名称 删除 +1. 在cmd控制台安装yarn +``` + npm i -g yarn +``` +2. 安装yarn淘宝镜像 +``` +yarn config set registry https://registry.npm.taobao.org/ +``` +3. 安装 vue cli +``` +npm install -g @vue/cli +# OR +yarn global add @vue/cli +``` +4. 你还可以用这个命令来检查其版本是否正确： +``` +vue --version +``` +5. 如需升级全局的 Vue CLI 包，请运行： +``` +npm update -g @vue/cli + +# 或者 +yarn global upgrade --latest @vue/cli +``` +6. 如果在使用 vue 初始化项目的时候提示：无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 +``` +表示系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。 +环境变量：路径 +path +C/用户/Adminstor/Appdata/local/yarn/bin +``` + +7. vue create 项目名称 +``` +如：选择vue2 yarn 指令进行操作 +``` +8. 在项目内vs code 安装 Vetur +``` + 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档. + ``` + 9. Xshell服务器 cd /var/www/ mkdir vue.icu(创建文件名称) 在文件夹里放你的项目 + + 10. vim /etc/nginx/conf.d/vue.conf 进入到创建的配置文件 进行编辑 + ``` + server{ + listen 80; + server_name vue.icu; + + location / { + root /var/www/vue.icu; + index index.html; + } + } +``` +## nginx -t 检查 nginx -s reload 重启 +## 之后进入 /C/Windows/System32/drivers/etc/hosts 右键属性 安全点击高级 左下角点击添加 点击选择主体 点击高级 点击立即查找 第二个Administractor 确定 之后全选 除了特殊权限 之后应用确定 在打开hosts 在最下面添加自己的监听路径（网站ping） + 文件名称保存即可 直接访问文件名称 在浏览器上即可显示成功即成功 \ No newline at end of file diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-12(\347\254\254\345\215\201\344\272\214\350\212\202\350\257\276 cli v-for).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-12(\347\254\254\345\215\201\344\272\214\350\212\202\350\257\276 cli v-for).md" new file mode 100644 index 0000000000000000000000000000000000000000..d227cbd6734bafaa1bb6be8a38220547432e3e43 --- /dev/null +++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-12(\347\254\254\345\215\201\344\272\214\350\212\202\350\257\276 cli v-for).md" @@ -0,0 +1,74 @@ +# 2021-6-12 vue cli 简单的使用 + +## yarn serve 执行yarn安装下的vue cli 运行 +1. 安装 vue cli +2. 生成项目 vue create 名称 +3. 在components下创建文件 Tese.vue + +4. 在 App.vue 下 +``` +
+ + + +
+ + + +``` +5. Text.vue +``` + + + +```