黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端学习核心框架教程
账号已注销:
谢谢老师,vue还没会,已经学yue了[doge]
【回复】不客气,vue也要加油学习,不要光收藏。[呲牙]
【回复】号都学没了,太有节目效果了
东三省第一上单:
学完了,已经在谷歌面试了,大家加油[打call]
【回复】2小时学完557集哈哈哈哈
【回复】时间不在于你拥有多少,而在于你怎么使用。
愿世界回归自然:
我赞很大,你忍一下~[脱单doge]
░░░░░░░░░▄▄
░░░░░░░░░█░█
░░░░░░░░░█░█
░░░░░░░░█░░█
░░░░░░░█░░░█
█████▄▄█░░░████
▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓█████░░░░░░░░
████▀░░░▀▀██████▀
故丨是:
2021.8.29 day13
vue 基础入门
1、vue 简介
1)vue
Vue 是一套用于构建用户界面的前端框架。
2)使用 vue 构建用户界面
3)vue 的特性
vue 框架的特性,主要体现在两方面: ① 数据驱动视图 ② 双向数据绑定
4)vue 的版本
当前,vue 共有 3 个大版本,其中: ①2.x 版本的 vue 是目前企业级项目开发中的主流版本 ②3.x 版本的 vue 于 2020-09-19 发布,生态还不完善,尚未在企业级项目开发中普及和推广 ③1.x 版本的 vue 几乎被淘汰,不再建议学习与使用
2、vue 的基本使用
1)基本使用步骤: ① 导入 vue.js 的 script 脚本文件 ② 在页面中声明一个将要被 vue 所控制的 DOM 区域 ③ 创建 vm 实例对象(vue 实例对象)
2)基本代码与 MVVM 的对应关系
3、vue 的调试工具
1)安装 vue-devtools 调试工具
2) 配置 Chrome 浏览器中的 vue-devtools
3)使用 vue-devtools 调试 vue 页面
4、vue 的指令与过滤器
1)指令
指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为 6 大类: ① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令
2)过滤器
过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式 和 v-bind 属性绑定。
5、品牌列表案例
1)用到的知识点:
①bootstrap 4.x 相关的知识点: 卡片(Card)、表单相关(Forms)、按钮(Buttons)、表格(Tables)
②vue 指令与过滤器相关的知识点: 插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器
2)实现步骤:① 创建基本的 vue 实例 ② 基于 vue 渲染表格数据 ③ 实现添加品牌的功能 ④ 实现删除品牌的功能 ⑤ 实现修改品牌状态的功能
【回复】回复 @小张啥都会x : 拉我一个
【回复】群还能拉人吗?拉我一下可以吗?
小张张没烦恼:
P171中的配置
创建.prettierrc文件的内容:
{
"semi": false,
"singleQuote": true,
"bracketSpacing": true
}
settings.json中的配置如下:
"prettier.configPath": "C:\\Users\\HP\\.prettierrc",
// 安装Prettier配置
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中,HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"trailingComma": "none",
"singleQuote": true,
"semi": false,
"arrowParens": "avoid",
"printWidth": 300
},
"js-beautify-html": {
"wrap_attributes": false
},
},
【回复】回复 @神秘的小王子 :不能自动修复的,或者自动加逗号的,或者缩进问题的,或者js修复了,vue出问题,vue行了js又报错,只要你和老师的文件设置一样,都是JS-CSS-HTML这个插件惹的祸!!!把它禁用卸载就可以了,哈
不断练习的小王:
P32里面的vue_devtools调试工具下载地址:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd
【回复】回复 @bili_11948027329 :好人一胎18个
不那么正经的老叶:
npm方式安装缓慢或卡死的小伙伴看过来(来源:https://www.runoob.com/w3cnote/npm-slow-use-cnpm.html)
使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install 【name】
速度还行,不清楚可以看原文,不谢
【回复】回复 @猪刚鬣1111 :因为你jquery拼写错误了
【回复】为什么我安装juqery那一步说错误
【回复】npm安装慢,就换源啊,阿里源不就好了
啊窝额aoe:
黑马教程,教成黑马,跟着自学半年,月薪已过亿。[阴险]
【回复】那个标签自定义怎么变成竖着的格式
核桃味桃核:
看完了,视频质量非常棒,教会了我许多姿势下次还来。
吃肉好苦恼:
学习使我快乐!
我现在每天都能够看到自己有所成长,
在我电脑桌下面,有越来越多的头发,
每天都能看见新的。
我想我学满三年等到我变秃之时。
应该能够达成一拳一个电脑屏幕或键盘。[妙啊]
黑马永远最厉害,讲解最详细的老师[打call]
【回复】学习使我快乐,秃头使我变强!!!
boom天了噜:
p171 没有 .prettier文件的资料咋办,没法下载配置,头疼,资料上也找不到老师给的文件[大哭]
【回复】回复 @coder_kk :自己建一个,写上 {"semi": false, "singleQuote": true, "printWidth": 300}就好了
vscode里面:// prettier 配置路径
"prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中,HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": false
},
"prettier": {
"printWidth": 300,
"trailingComma": "none",
"semi": false,
"singleQuote": true,
"arrowParens": "avoid"
}
},
似雨幽漓:
我TM在另一个黑马up主那刷了半个月的vue,一直没有弹幕,我就说怎么没人呢,弄了半天去错地方了[笑哭]
发发不知道哦:
vue课程接口:https://applet-base-api-t.itheima.net/articles同志们 文章最新接口
爱学习的狗泰:
要课件的我把百度网盘链接放我动态里面[嘘声]
叫我阿良v:
创建.prettierrc文件的内容:
{
"semi": false,
"singleQuote": true,
"bracke...