diff --git "a/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/show.html" "b/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/show.html" new file mode 100644 index 0000000000000000000000000000000000000000..f7de10cb8bf7c2b5d8a8a4864467f167aa044249 --- /dev/null +++ "b/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/show.html" @@ -0,0 +1,111 @@ + + + + + + + 商品列表 + + + + +
+
+ +

{{shangping1}}

+

{{jiage1}}

+
+
+ +

{{shangping2}}

+

{{jiage2}}

+
+
+ +

{{shangping3}}

+

{{jiage3}}

+
+
+ +

{{shangping4}}

+

{{jiage4}}

+
+
+ +

{{shangping5}}

+

{{jiage5}}

+
+
+ + + + diff --git "a/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/vue\345\210\235\345\247\213.md" "b/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/vue\345\210\235\345\247\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..e857493b80a1e208477640d28bc6bd18165cc132 --- /dev/null +++ "b/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/vue\345\210\235\345\247\213.md" @@ -0,0 +1,84 @@ +## 前端主流的三大框架 :anglar vue 和 react + +### 国外主流的是 vue 和 react + +Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 + +上面的示例展示了 Vue 的两个核心功能: + +声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 + +响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。 + +你可能已经有了些疑问——先别急,在后续的文档中我们会详细介绍每一个细节。现在,请继续看下去,以确保你对 Vue 作为一个框架到底提供了什么有一个宏观的了解。 + +学的是vue3,one piece + + +### 渐进式框架 + +Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue: + +无需构建步骤,渐进式增强静态的 HTML +在任何页面中作为 Web Components 嵌入 +单页应用 (SPA) +全栈 / 服务端渲染 (SSR) +Jamstack / 静态站点生成 (SSG) +开发桌面端、移动端、WebGL,甚至是命令行终端中的界面 +如果你是初学者,可能会觉得这些概念有些复杂。别担心!理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。即使你不是这些方面的专家,也能够跟得上。 + + +### vue 作者 + +尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,现任职于纽约Google Creative Lab。 + +2014年2月,开源了一个前端开发库Vuejs。Vue.js是构建Web界面的JavaScript库,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。 + +2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技术顾问的身份加入Weex团队来做Vue和Weex的JavaScript runtime整合,目标是让大家能用Vue的语法跨三端。 + +### vue 在模块化上和渲染数据上比原生更有优势,实现mvvm的模型 + + + +### 要学的版本 vue3 one piece 当然还有 vue2 版本(早期的版本,在2022年停止更新维护,有很多存量,学完vue3 还是要去看看) + +### cdn 地址 https://unpkg.com/vue@3.2.47/dist/vue.global.js + + +### 为什么要学vue,体验一把, + +```js + +//做个表单数据的获取 + + +
+
{{msg}}
+ + + + +
+ + + + + + +``` + +### vue里面都是js和h5,如果有薄弱的,要自己补一补 + + + + diff --git "a/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/\346\250\241\346\235\277\350\257\255\346\263\225.md" "b/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/\346\250\241\346\235\277\350\257\255\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..9d48270c58eccd95c4a7c61c2fde9122eddca0b7 --- /dev/null +++ "b/\344\275\225\345\273\272\346\201\222/3.23,vue\345\210\235\345\247\213\345\214\226\345\222\214\346\250\241\345\235\227\350\257\255\346\263\225/\346\250\241\346\235\277\350\257\255\346\263\225.md" @@ -0,0 +1,301 @@ +### 创建一个vue的实例 + +``` + +//引入cnd https://unpkg.com/vue@3/dist/vue.global.js + + +//定义实例 + + var app = Vue.createApp({ + data: function () { + return { + msg: "Hello Vue", + num: 0 + } + } + }); + + +//绑定元素 app.mount("#app"); + + + +``` + + +### 模板语法 + + {{}} : 小胡子语法,插值符, **data**中的数据可以插入到模板中 + + + +```html +
{{1+1}}
+
{{Date.now()}}
+
{{arr.join('')}}
+``` + +### 文本 + +- v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 +- 如果觇居中有HTML标签会将html标签一并输出 +- 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值 +数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: + + +##### html + +- 用法和v-text类似,但是它可以将html代码填充到标签中 +- 可能有安全问题,一般只在可信任内容上使用v-html,**永不**用在用户提交的内容上 +- 它与v·text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析。 + + +### 属性 + +HTML 属性中的值应使用 v-bind 指令。 + +```vue + +
+ +``` + +### 动态属性 + + + + + +### 指令 + +#### v-cloak + +- 防止页面加载时出现闪烁问题 + +```vue + + + + + +
+ +
{{msg}}
+ +
+ + + + +``` + + + +#### 数据绑定指令 + +##### v-text + +- v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 +- 如果觇居中有HTML标签会将html标签一并输出 +- 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值 + +```vue + +
+ +

+

+ + {{msg}} +

+ +
+ + + + +``` + + + +##### v-html + +- 用法和v-text类似,但是它可以将html代码填充到标签中 +- 可能有安全问题,一般只在可信任内容上使用v-html,**永不**用在用户提交的内容上 +- 它与v·text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其标签解析后输出 + +```vue + +
+ +

+

{{msg}}

+

+

+ + {{msg}} +

+ +
+ + + + +``` + + + +##### v-pre + +- 显示原始信息跳过编译过程 +- 跳过这个元素和他的子元素的编译过程 +- **使用场景**:一些静态的内容并不需要编译,加上这个指定可以加快渲染 + +```vue + +
+ {{v-pre是不需要编译就显示的}} + + {{msg}} + +
+ + + + +``` + + + +##### v-once + +- 执行一次性的插值,即【当数据改变时,插值处的内容不会再继续更新】 + +```vue + +
+ {{msg}} +
+ + + + +``` + + + +### 3.4双向数据绑定 + +- 当数据发生变化时,视图(页面)也就发生变化 +- 当视图发生变化时,数据也会跟着同步变化。 + +##### v-model + +- v-model是一个指令,限制在 ,