AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue2.0+vue3.0资料（尚硅谷）（三）

2024-03-28 64
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue2.0+vue3.0资料（尚硅谷）

vue2.0+vue3.0资料（尚硅谷）（二）https://developer.aliyun.com/article/1470417

第二部分、Vue组件化编程

1、模块与组件、模块化与组件化

1-1、模块：

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件 
2. 为什么: js 文件很多很复杂 
3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

1-2、组件：

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..) 
2. 为什么: 一个界面的功能很复杂
3. 作用: 复用编码, 简化项目编码, 提高运行效率。

1-3、模块化：

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

1-4、组件化：

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

2、非单文件组件

2-1、基本使用

一个文件包含有n个组件。

Vue中使用组件的三大步骤：
一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

一、如何定义一个组件？
    使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
    区别如下：
      1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
      2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
      备注：使用template可以配置组件结构。
二、如何注册组件？
  1.局部注册：靠new Vue的时候传入components选项
  2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：
    <school></school>

案例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <hello></hello>
      <hr>
      <h1>{{msg}}</h1>
      <hr>
      <!-- 第三步：编写组件标签 -->
      <school></school>
      <hr>
      <!-- 第三步：编写组件标签 -->
      <student></student>
    </div>
    <div id="root">
      <hello></hello>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    //第一步：创建school组件
    const school = Vue.extend({
      template:`
        <div class="demo">
          <h2>学校名称：{{schoolName}}</h2>
          <h2>学校地址：{{address}}</h2>
          <button @click="showName">点我提示学校名</button>  
        </div>
      `,
      // el:'#app', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      data(){
        return {
          schoolName:'111',
          address:'002'
        }
      },
      methods: {
        showName(){
          alert(this.schoolName)
        }
      },
    })
    //第一步：创建student组件
    const student = Vue.extend({
      template:`
        <div>
          <h2>学生姓名：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
        </div>
      `,
      data(){
        return {
          studentName:'张三',
          age:18
        }
      }
    })
    
    //第一步：创建hello组件
    const hello = Vue.extend({
      template:`
        <div> 
          <h2>你好啊！{{name}}</h2>
        </div>
      `,
      data(){
        return {
          name:'Tom'
        }
      }
    })
    
    //第二步：全局注册组件
    Vue.component('hello',hello)
    //创建vm
    new Vue({
      el:'#app',
      data:{
        msg:'你好啊！'
      },
      //第二步：注册组件（局部注册）
      components:{
        school,
        student
      }
    })
    new Vue({
      el:'#root',
    })
  </script>
  <!-- 使用对象是引用数据，你用我用大家用，函数返回值，是复印了一份新的给你，你随便改，影响不了原本 -->
</html>

2-2、几个注意点

1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。
3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

案例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>几个注意点</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <school></school>
    </div>
  </body>
  <script type="text/javascript">
    //定义组件
    const s = Vue.extend({
      name:'222',
      template:`
        <div>
          <h2>学校名称：{{name}}</h2>  
          <h2>学校地址：{{address}}</h2> 
        </div>
      `,
      data(){
        return {
          name:'111',
          address:'002'
        }
      }
    })
    new Vue({
      el:'#app',
      data:{
        msg:'欢迎学习Vue!'
      },
      components:{
        school:s
      }
    })
  </script>
</html>

2-3、组件的嵌套

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>组件的嵌套</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/javascript">
    //定义student组件
    const student = Vue.extend({
      name:'student',
      template:`
        <div>
          <h2>学生姓名：{{name}}</h2>  
          <h2>学生年龄：{{age}}</h2> 
        </div>
      `,
      data(){
        return {
          name:'222',
          age:18
        }
      }
    })
    
    //定义school组件
    const school = Vue.extend({
      name:'school',
      template:`
        <div>
          <h2>学校名称：{{name}}</h2>  
          <h2>学校地址：{{address}}</h2> 
          <student></student>
        </div>
      `,
      data(){
        return {
          name:'111',
          address:'111'
        }
      },
      //注册组件（局部）
      components:{
        student
      }
    })
    //定义hello组件
    const hello = Vue.extend({
      template:`<h1>{{msg}}</h1>`,
      data(){
        return {
          msg:'欢迎来学习！'
        }
      }
    })
    
    //定义app组件
    const app = Vue.extend({
      template:`
        <div> 
          <hello></hello>
          <school></school>
        </div>
      `,
      components:{
        school,
        hello
      }
    })
    //创建vm
    new Vue({
      template:'<app></app>',
      el:'#root',
      //注册组件（局部）
      components:{app}
    })
  </script>
</html>

2-4、VueComponent

关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
4.关于this指向：
(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>VueComponent</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <school></school>
      <hello></hello>
    </div>
  </body>
  <script type="text/javascript">
    //定义school组件
    const school = Vue.extend({
      name:'school',
      template:`
        <div>
          <h2>学校名称：{{name}}</h2>  
          <h2>学校地址：{{address}}</h2> 
          <button @click="showName">点我提示学校名</button>
        </div>
      `,
      data(){
        return {
          name:'111',
          address:'001'
        }
      },
      methods: {
        showName(){
          console.log('showName',this)
        }
      },
    })
    const test = Vue.extend({
      template:`<span>111</span>`
    })
    //定义hello组件
    const hello = Vue.extend({
      template:`
        <div>
          <h2>{{msg}}</h2>
          <test></test> 
        </div>
      `,
      data(){
        return {
          msg:'你好啊！'
        }
      },
      components:{test}
    })
    // console.log('@',school)
    // console.log('#',hello)
    //创建vm
    const vm = new Vue({
      el:'#root',
      components:{school,hello}
    })
  </script>
</html>

2-5、一个重要的内置关系

Demo.prototype   显示原型属性
Demo.__proto- -    隐式原型属性
实例的隐式原型属性，永远指向自己缔造者的原型对象
通过隐式原型链获取原型的属性，从自身沿着原型链一直找直到window的原型为空
通过显示原型链给原型(或者原型的原型)添加属性

1.一个重要的内置关系：
VueComponent.prototype.__proto__ === Vue.prototype

2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <school></school>
    </div>
  </body>
  <script type="text/javascript">
    Vue.prototype.x = 99
    //定义school组件
    const school = Vue.extend({
      name:'school',
      template:`
        <div>
          <h2>学校名称：{{name}}</h2>  
          <h2>学校地址：{{address}}</h2> 
          <button @click="showX">点我输出x</button>
        </div>
      `,
      data(){
        return {
          name:'111',
          address:'001'
        }
      },
      methods: {
        showX(){
          console.log(this.x)
        }
      },
    })
    //创建一个vm
    const vm = new Vue({
      el:'#root',
      data:{
        msg:'你好'
      },
      components:{school}
    })
    
    //定义一个构造函数
    /* function Demo(){
      this.a = 1
      this.b = 2
    }
    //创建一个Demo的实例对象
    const d = new Demo()
    console.log(Demo.prototype) //显示原型属性
    console.log(d.__proto__) //隐式原型属性
    console.log(Demo.prototype === d.__proto__)
    //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99
    console.log('@',d) */
  </script>
</html>

3、ES6模块暴露与模块引入

3-1、ES6一共有三种模块暴露方法

(1)统一暴露

模块 module1：module1.js

function fun1() {
    console.log('fun1() module1')
}
 
function fun2() {
    console.log('fun2() module1')
}
// 统一暴露
export {foo,bar}
(2)分别暴露

模块 module2：module2.js

//多行暴露
export function foo() {
    console,console.log('foo() module2');
}
 
export function bar() {
    console.log('bar() module2')
}

以上两种向外暴露方式在主文件引入时必须使用对象的解构赋值引用（不能使用变量接收的方式来映入）

主模块：main.js

import {foo,bar} from '.js/src/module2.js'
import {fun1,fun2} from './js/src/module1.js'
(3)默认暴露
export default {
    foo() {
        console.log('默认暴露方式')
    },
    bar() {
        console.log('默认暴露')
    }
}

默认暴露的方式只允许有一个: export default {}且在主模块引入时可以使用定义变量来接收的方式！

// 引入模块3
import module3 from '.js/src/module3.js'
 
// 使用模块
module3.foo()
module3.bar()

3-2、总结

  • 对外暴露出的都是一个对象，但是不同的暴露方法实际暴露的对象有所不同
  • 默认并暴露的实质就是使用 export ➕ 去除import关键字后的引入写法
  • 默认暴露在进行引入并暴露时不能进行简写
  • import引入的文件会自动收集在文件的最上方，并按照引入的顺序执行

4、单文件组件

一个文件只包含有1个组件。

School.vue组件
<template>
  <!-- 组件的结构 -->
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点我提示学校名</button>  
  </div>
</template>
<script>
  // 组件交互相关的代码(数据、方法等等)
  // export school = Vue.extend({...})分别暴露
   export default {
    name:'School',
    data(){
      return {
        name:'111',
        address:'001'
      }
    },
    methods: {
      showName(){
        alert(this.name)
      }
    },
  }
  // export {school} 统一暴露
</script>
<style>
  /* 组件的样式 */
  .demo{
    background-color: orange;
  }
</style>
Student.vue组件
<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>
<script>
   export default {
    name:'Student',
    data(){
      return {
        name:'张三',
        age:18
      }
    }
  }
</script>
App.vue组件
<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>
<script>
  //引入组件
  import School from './School.vue'
  import Student from './Student.vue'
  export default {
    name:'App',
    components:{
      School,
      Student
    }
  }
</script>
index.js (这个是引入vm，)
import App from './App.vue'
new Vue({
  el:'#root',
  template:`<App></App>`,
  components:{App},
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>练习一下单文件组件的语法</title>
  </head>
  <body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <!-- <script type="text/javascript" src="./index.js"></script> -->
  </body>
</html>

二、Vue-CLI

分区作者：Cool小陈

1、Vue脚手架安装与部署

1-1、依赖软件 nodejs

1、下载nodejs

http://nodejs.cn/download/

https://registry.npmmirror.com/binary.html?path=node/

    X86  适用 32 windows

    X64  适用 64 windows

2、下一步

   安装目录: 不要中文不要有空格

   c:/program files/nodejs

1.3:  检测(windows->开始->运行->cmd)

node -v

1-2、安装cnpm 工具(nodejs工具 npm 安装软件)

npm install -g cnpm --registry=https://registry.npm.taobao.org
#npm 安装工具
#install 安装 uninstall 删除
#-g  全局
#https://registry.npm.taobao.org 淘宝镜像站点
#检测

1-3、安装vue-cli脚手架（安装一个3.x版本的Vue脚手架）

npm install -g @vue/cli
//npm i -g @vue/cli

1-4、安装创建项目

1-4-1、vue create xxx安装
//protest是项目名，自定义的
vue create protest

这里会有选项出来，可以选第一项，但是建议选第三项，自定义（高手就选这个），选择特性以创建的项目为准

使用键盘上下键移动，回车选定，勾选特性用空格进行勾选

选了第三项之后，接下来出现的页面：

选择Router

接下来，选择2.x，回车：

接下来，是否选用历史模式的路由，输入n或者y，看个人情况即可，回车：

接下来，ESLint选择选择第三项，回车：

接下来，何时进行ESLint语法效验，选第一项，回车：

接下来，babel,protcss等配置文件如何放置，选默认的第一项：单独使用文件进行配置，回车：

最后，是否保存为模板，以后创建项目的模板。看个人n和y都可以：

整个模板：

加载完成后出现的页面：

输入cd 建的项目名称

执行npm run serve后出现的页面：

Local和Network的两个地址（服务器的地址）都可以直接点开页面

到这里，项目创建完成

1-4-2、基于ui界面创建vue项目

执行一下命令，可以打开ui界面

vue ui

安装Element-UI
Element-UI:是一套2.0的桌面组件库

1.在终端输入：

npm install element-ui -S

2.在入口文件(src/main.js)导入添加：

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

额外的步骤：

2、分析脚手架

2-1、脚手架文件结构

├── node_modules 放置node模块
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面//网站访问入口
├── src         项目源码
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!-- 配置网页标题 -->
    <title>脚手架基础</title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2-2、关于不同版本的Vue

main.js中的render函数

esm代表es6中的muddle 使用vue.runtime.xxx.js可以节约空间

关于不同版本的Vue：

   1.vue.js与vue.runtime.xxx.js的区别：

        (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。

        (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

   2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用

    render函数接收到的createElement函数去指定具体内容。

main.js

/* 
  该文件是整个项目的入口文件
*/
//引入Vue,这里的vue是指运行版的Vue，即vue.runtime.xxx.js
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
new Vue({
  el:'#app',
  //render函数完成了这个功能：将App组件放入容器中
    render: h => h(App),
  // render:q=> q('h1','你好啊') //箭头函数
  // render(createElement) {
  //  return createElement('h1','你好啊')
  // },
  // template:`<h1>你好啊</h1>`,  //精简版不解析template
  // components:{App},
})

2-3、修改默认配置

vue.config.js配置文件
  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

2-4、


vue2.0+vue3.0资料（尚硅谷）（四）https://developer.aliyun.com/article/1470419

文章标签：
JavaScript
Windows
C#
搜索推荐
程序员
Cool架构
目录
相关文章
Cool架构
|
7月前
|
缓存 JavaScript 前端开发
vue2.0+vue3.0资料（尚硅谷）（一）
vue2.0+vue3.0资料（尚硅谷）
Cool架构
107 0
Cool架构
|
7月前
|
缓存 JavaScript 前端开发
vue2.0+vue3.0资料（尚硅谷）（五）
vue2.0+vue3.0资料（尚硅谷）
Cool架构
159 0
YiShier
|
JavaScript 前端开发 API
尚硅谷Vue3 笔记总结及代码-1
尚硅谷Vue3 笔记总结及代码-1
YiShier
359 0
萤火虫的小尾巴
|
缓存 JavaScript 网络架构
[Vue]学习笔记目录 【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
[Vue]学习笔记目录 【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
萤火虫的小尾巴
609 0
Cool架构
|
7月前
|
存储 JavaScript API
vue2.0+vue3.0资料（尚硅谷）（四）
vue2.0+vue3.0资料（尚硅谷）
Cool架构
124 0
Cool架构
|
7月前
|
存储 JavaScript 前端开发
vue2.0+vue3.0资料（尚硅谷）（六）
vue2.0+vue3.0资料（尚硅谷）
Cool架构
100 0
Cool架构
|
7月前
|
JavaScript 前端开发 API
vue2.0+vue3.0资料（尚硅谷）（七）
vue2.0+vue3.0资料（尚硅谷）
Cool架构
142 0
Cool架构
|
7月前
|
JavaScript 前端开发 安全
vue2.0+vue3.0资料（尚硅谷）（二）
vue2.0+vue3.0资料（尚硅谷）
Cool架构
111 0
wscwdie
|
7月前
|
JavaScript 前端开发 API
Vue 2 vs Vue 3：开发者之争，究竟选择哪个版本？
Vue 2 vs Vue 3：开发者之争，究竟选择哪个版本？
wscwdie
535 1
萤火虫的小尾巴
|
JavaScript 前端开发 API
[Vue]Vue3学习笔记(尚硅谷)（三）
[Vue]Vue3学习笔记(尚硅谷)（三）
萤火虫的小尾巴
110 0

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    如何生成和使用 SDK | 学习笔记
  • 3
    机器人现身日本竞选市长，承诺公平对待每一个人
  • 4
    Java Servlet Cookie 详解
  • 5
    我的家庭私有云计划-17
  • 6
    自媒体平台资讯03：邦阅号自媒体，一个定位于分享外贸经验的自媒体平台
  • 7
    树的遍历与图的遍历
  • 8
    Ganglia + Nagios 初步实践
  • 9
    clone错误——执行txkExecSetJaznCredentials.pl失败
  • 10
    并发操作的一致性问题 (2)
  • 1
    java日常开发中如何写出优雅的好维护的代码
    29
  • 2
    Hologres 索引：概念与实用场景
    26
  • 3
    《C 语言助力数据降维：开启 AI 算法优化之门》
    23
  • 4
    《C 语言赋能蚁群算法：革新网络路由优化之路》
    25
  • 5
    《C 语言与 R 语言在人工智能数据分析中的交融之路》
    20
  • 6
    《Java 与 C 语言在人工智能领域的交互协同之道》
    20
  • 7
    《C 语言携手 PaddlePaddle C++ API：开启深度学习开发新征程》
    21
  • 8
    二进制安装Kubernetes（k8s）v1.32.0
    38
  • 9
    云服务测评 | 基于云服务诊断全方位监管云产品
    312
  • 10
    jQuery Lightbox和弹出层插件flashy
    20

    • 相关课程

    更多
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解