vue入门 day03

最新推荐文章于 2023-09-19 18:20:57 发布

cU4oral6

最新推荐文章于 2023-09-19 18:20:57 发布

阅读量1.2k

点赞数

分类专栏： web学习文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_44303986/article/details/120771352

版权

web学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.组件

何时：发现页面中有一个区域可能被反复使用，都要定义成组件
如何：
1.创建

Vue.component("组件名",{
   //el:"选择器",
   template://将来会反复复制多个和这里一模一样的html片段，所以将这一份标准的片段成为模板 ，组件的元素必须用唯一的父元素包裹
    //data:{ ... },
    data(){
        return{
            //模型变量
        }
    },
    methods:{ ... },
    created(){ ...},
    watch:{ ... },
    computed{ ... },
    mounted(){ ... }
})

2.使用组件：组件在html中其实就是一个可重用的标签而已。组件名就是标签名。所以组件名起名不要驼峰起名！因为HTML标签不区分大小写。可用-分隔多个单词。

new Vue()要不要写？答：必须写！
因为是全靠new Vue()扫描页面时，发现不认识的标签，才会去加载自定义的组件。
加载时: 会用组件的template中的HTML模板片段，代替不认识的标签。

组件化开发:
什么是: 将所有要做的HTML页面，切割为多个独立的组件，可以分工协作开发。
为什么: 1. 分工协作；2. 松耦合
何时: 今后做页面，都是先将页面划分成多个组件，再分别开发每个组件。
如何:
将页面划分成多个功能区域-组件
创建组件.js，其中定义组件对象：2种:
全局组件: Vue.component()
什么是: 可以在页面任何位置使用的组件
何时: 只要页面中一个区域，可能在多个页面或者多个不同位置随意使用时
问题: 不受约束，随处可用
子组件:
什么是: 必须在指定父组件内才能使用的组件
何时: 如果希望限制一个组件只能在其父组件内使用时，就必须定义子组件
如何:
创建子组件:
var 组件对象名={ 和组件标准写法必须一致 }
强调:
{}中必须和Vue.component()中的{}内容格式一致！。
变量名必须用驼峰命名
在父组件中用components属性包裹所有子组件:
Vue.component("父组件",{
template:
data:
methods:
…
components:{ 子组件对象名,… }
})
在主界面或父组件中，使用子组件标签，引入子组件的内容
结果: 浏览时，所有组件(父和子)，最终都合并为一个整体。不再包含不认识的标签。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59SCnEcn-1634212335339)(en-resource://database/516:1)]

问题: 父组件中的公共数据，子组件可以直接使用吗？
答: 不行！因为每个组件都是专属的独立的数据。互相之间没有关系。即使是在位置上是父子关系的组件之间，也没有数据的关系。
问题：如何让子组件使用父组件中的公共数据:
答: 父组件可以将自己的模型变量赋值给子组件的属性
2 步

子组件定义自定义属性，准备接受父组件的数据
var 子组件={
template:
data(){ return { } },
props:[ "自定义属性名" , "自定义属性名"],
methods:{ … },
}
结果: 当前组件将来变成标签时，在开始标签中就多了一个同名的自定义属性。只不过暂时没有值
<子组件自定义属性=""
父组件中使用子组件标签的位置，开始标签中通过:绑定的方式，将自己data中的值赋值给子组件自定义的属性
<子组件 :自定义属性="父组件的变量"
结果子组件对象内的自定义属性，就获得了父组件变量的值。
强调: props中的自定义属性等效于data中的模型变量。也可以在子组件内绑定使用。
强调: 子组件中可以修改父组件传来的数据。如果传来的是引用类型的对象: 数组或对象，则在子元素中修改变量等效于直接修改父元素中的原对象或数组。因为父子组件间传递引用类型的对象，实际传递的都是地址值。
SPA: Single Page Application
            单   页面应用
         什么是: 整个应用程序只有一个完整的页面
         为什么: vs 多页面

多页面

单页面

页面个数

多个页面

只有一个页面

页面跳转

每跳转一个新页面，都重新请求服务器，重新下载页面文件，重建整棵DOM树

并不是真正的页面跳转，而是选择对应的组件模板代替当前页面中指定的占位符元素。不用重新请求服务器，
不用重复下载页面文件，不用重建整课DOM树，仅替换局部

共享资源
bootstrap.js
jquery.js

多页面应用，每跳转一次新页面，都要重新请求和下载共享的资源文件。

每切换一个组件，实现跳转页面，不需要重建整个网页，所以不需要重复请求共享资源。

首次加载速度

多页面应用每次只需要请求自己需要的内容下载回来即可。

单页面应用需要在首次就将所有组件的模板下载下来。首屏加载会慢。mdash;mdash;公司中已解决: 配合服务端实现异步延迟加载。

翻页动画

多页面应用不可能实现页面切换动画效果

单页面应用，因为所有的组件已经在客户端。所以完全可以做出页面切换动画效果。

         何时: 今后，基本上都是单页面应用。
         如何:
                   1. 先有一个完整的home.html文件
                            home.html中主体部分被用特殊标签占位，暂时为空
                   2. 再为每个"页面"，定义组件对象
                   比如: index.js   details.js   products.js login.js
                   3. 创建路由地址列表                            什么是: 保存每个路由地址和组件对象对应关系的列表
                            如何:
                                     var routes=[
                                               { path:"/index", component: index },
                                               { path:"/details", component: details },
                                               { path:"/login", component: login },
                                     ]
                   4. 创建一个路由器对象：
                            什么是: 专门监视地址栏中的变化，根据变化，在路由字典中查找对应的组件，用组件替换页面中占位符的位置。实现页面切换。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xSXP20EA-1634212335341)(file://C:\Users\48672\AppData\Local\Temp\yxrtfimage\hts_1.PNG)]

脚手架:
         什么是: 已经具备核心功能的半成品项目
         为什么: 标准化项目的开发，便于分工协作。
         何时: 今后只要使用Vue框架做开发，都要先创建Vue框架的脚手架项目代码。
         如何: 2步:
                   1. 先安装一个能创建脚手架项目的命令行工具:
                            npm i -g @vue/cli
                   2. 用vue命令，创建一个项目的脚手架代码文件夹
                            vue create 项目文件夹名
                            第一步: Your connection to the default npm registry seems to be slow. Use
https://registry.npm.taobao.org for faster installation? (Y/n) Y
                            第二步: ? Please pick a preset: (Use arrow keys)
                            > default (babel, eslint)
                       > Manually select features //选下边一个
                            第三步: ? Check the features needed for your project: (Press <space> to select, <a> to
toggle all, <i> to invert selection)
                            >() Babel //必选: 翻译
                                     脚手架代码中采用了模块化开发：
                                     抛出模块: module.exports={ … } nodejs中
                                               ES6: export default { … }
                                     引入模块: var 变量=require("路径") nodejs
                                             ES6: import 变量 from "路径"
                                     因为不是所有浏览器都认识ES6，所以，需要Babel最后将所有ES6的代码翻译为多数浏览器都认识的ES5代码。
                            ( ) TypeScript //微软出的严格的scriptmdash;mdash;不选
                           ( ) Progressive Web App (PWA) Support
                           () Router //必选
                           (*) Vuex //Vue中的状态机制。当多个组件需要共用一些数据：比如当前登录用的用户名。这个公共的数据就要放在Vuex中mdash;mdash;下个阶段老师将
                           ( ) CSS Pre-processors
                           () Linter / Formatter //千万不要选！是代码质量检查工具。即使代码没错，格式不规范，也报错！
                           ( ) Unit Testing
                           ( ) E2E Testing
                            第四步: Use history mode for router? (Requires proper server setup for index fallback in
production) (Y/n) n
                                     因为必须要服务端支持，所以才不选。
                                     默认Vue的地址栏中都是用#/路径来跳转
                                     但是#可能和你的锚点地址冲突。
                                     如果即想用vue，又想要锚点地址，只能启用history模式。启用后，地址栏中就没有#了。而是直接用"/路径"。
                            第五步: Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow
keys)
                            > In dedicated config files
                            >In package.json //将所有的配置都放在一个package.json中。
                            第六步: Save this as a preset for future projects? (y/N) N 不把这次的项目配置保存为今后项目的模板。
                   脚手架文件夹创建成功后:
                   Successfully created project xz_vue.
              👉 Get started with the following commands:

                 $ cd xz_vue //先进入项目文件夹（vue create后的那个文件夹mdash;mdash;xz_vue）
                 $ npm run serve //=运行Live server+Babel的效果。是先将脚手架中浏览器不懂的代码，翻译为浏览器能懂的代码。然后，再将翻译后的页面运行在一个临时的开发服务器中。         强调: npm run serve 必须在项目文件夹内运行
                   保险起见是在vs code中打开xz_vue，然后在package.json文件上右键单击在命令行打开，然后运行:
                   npm run serve   没有r结尾
                   2件事:
                            1. 启动开发服务器: http://localhost:8080/
                            2. 编译项目代码为浏览器认识的: Compile
                   强调:
                            1. 不用总是npm run serve，因为npm run serve可以自动感知代码的修改，并自动重新编译，重新运行。
                            2. 服务端nodejs的cors: 要改为http://localhost:8080/。如果不想总是改。可改为cors:*。允许所有客户端都能跨域。

         分析脚手架文件夹的结构：
         public/ 将来所有不需要编译，就可直接使用的js和css，以及图片都放在public下。放在public下的文件，都不会被再次编译。比如: imgs文件夹，唯一的完整的首页index.html，bootstrap.css，jquery-3.2.1.js, bootstrap.js
                   放在public下的不需要编译的css和js，都要在唯一完整的页面index.html中引入。
         src/   放的是所有自己写的代码
                   /assets 放自己编写的公共的css和js
                   /components 放全局组件或多个页面共用的子组件。比如: 页头组件，页脚组件，广告轮播组件…
                   /views       放所有的页面组件，有几个页面，就在views下创建几个组件文件。比如: 首页，详情页，商品列表页，登录页
                   app.vue 整个网站所有页面公共的容器组件
                   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ErslZ3Eh-1634212335342)(en-resource://database/520:1)]

                   main.js 相当于以前的new Vue()。整个网站只有一个new Vue()。且main.js还承担了配置Vue项目的责任
                            比如: axios:
                                     1. 用npm i -save axios 为脚手架项目添加axios模块。
                                     2. 希望在Vue框架中所有组件里都能用axios。所以，应该讲axios添加到Vue整个类型的原型对象中。
                                               2步: main.js
                                               1. 用import语法引入axios模块
                                               import axios from "axios"
                                               2. 将axios对象强行添加到Vue的原型对象中: Vue.prototype.axios=axios;
                                               结果: 所有组件中都可用this.axios.get()发送ajax请求。
                   router.js 是整个网站的路由器和路由字典，保存着所有路径和组件的对应关系。

         .vue文件: 是脚手架专用的组件/页面文件。
                   今后，只要新建一个组件，或新建一个页面，都新建.vue文件
                   内容包括: 3大部分:
                            1. 模板片段: <template></template>中
                                     要求: 唯一父元素包裹
                            2. 组件的css: <style scoped></style>
                            3. 组件的js代码:
                            <script>
                                 //组件本质就是一个对象，对象需要抛出到外部被别人使用
                                 export default {
                                                   //没有template和el了
                                                   data(){
                                                return {

                                                }
                                                   },
                                                   created(){

},
methods:{

},
computed:{

                                                   },
                                                   watch:{

                                                   }
                                 }
                            </script>

         路由跳转:
                   Vue中不能用a跳转:
                   应该用<router-link to="/路径"></router-link>
        在运行时被翻译为: <a href="#/路径">

cU4oral6

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue入门 day03

1.组件何时：发现页面中有一个区域可能被反复使用，都要定义成组件如何：1.创建Vue.component("组件名",{ //el:"选择器", template://将来会反复复制多个和这里一模一样的html片段，所以将这一份标准的片段成为模板，组件的元素必须用唯一的父元素包裹 //data:{ ... }, data(){ return{ //模型变量 } }, methods:{ ... },
复制链接

扫一扫

专栏目录