• Vue基础入门超基础。

    废话不多说直接上代码，注释在代码中写的都很清晰：

    一、Vue基本指令与双向数据绑定：

    1、要想实现标签中的值和setup中的值同时变化必须绑定的是一个响应式对象。

    2、将基本数据类型转化为响应式对象用ref（）

    3、将对象转化为响应式对象用reactive（）

    4、无论是函数还是变量，想让其作用在标签上就必须在setup函数中注册。

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <script src="vue3.0.0.17.js">script>
    5.     
    6.     <meta
    7.       charset="utf-8"
    8.       name="viewport"
    9.       content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    10.  
    11.   head>
    12.   <body>
    13.     <div id="app">
    14.       
    15.       <div v-text="message1">div>
    16.  
    17.       
    18.       <div v-html="message2">div>
    19.  
    20.       
    21.       <a v-bind:href="url">点我跳转a><br />
    22.       
    23.       <a :href="url">点我跳转a><br />
    24.  
    25.       
    26.       <a v-bind:[attr]="url">我是切换的a>
    27.  
    28.       
    29.       <div v-text="message1==''?'是空':'非空'">div>
    30.  
    31.       
    32.       <div v-on:click="tap1">点我弹窗1div>
    33.       
    34.       <div @click="tap1">点我弹窗2div>
    35.  
    36.       
    37.       <div v-if="flag===1">1div>
    38.       <div v-else-if="flag===2">2div>
    39.       <div v-else>3div>
    40.  
    41.       
    42.       
    43.       <ul>
    44.         <li v-for="(item,index) of list">{{index}}--{{item}}li>
    45.       ul>
    46.       
    47.       <ul>
    48.         <li v-for="(value,key,index) of obj">{{index}}--{{key}}--{{value}}li>
    49.       ul>
    50.  
    51.       
    52.       <input v-model="inputValue" />{{inputValue}}
    53.       
    54.       <input v-model="inputValue" /> <button @click="refFun">提交button>
    55.       
    56.       <input v-model="inputValue1.age" />
    57.       <button @click="reactiveFun">提交button>
    58.  
    59.     div>
    60.   body>
    61.   <script>
    62.     // 相当于导包，ES6新特性，表示从Vue中导出createApp
    63.     //1、需要挂在Vue对象，所以要先导出这个模块
    64.     //2、ref,reactive用于将变量变为响应式对象
    65.     const { createApp, ref, reactive } = Vue;
    66.  
    67.     //写好之后一定要在setup中注册才能在标签中使用
    68.     const message = "one";
    69.     const message1 = "two";
    70.     const message2 = "
      three
      "      ;
    71.     const url = "https://www.baidu.com";
    72.     const attr = "target";
    73.     const flag = 1;
    74.     const list = ["one", "two", "three"];
    75.     const obj = {
    76.       title: "小王子",
    77.       des: "超好看",
    78.       color: "blue",
    79.     };
    80.  
    81.     //双向绑定的响应式对象
    82.     const inputValue = ref(10); //ref将基本数据类型转化为响应式对象
    83.     const inputValue1 = reactive({
    84.       age: 20,
    85.     }); //reactive将对象转化为响应式对象
    86.  
    87.     //2、创建vue对象
    88.     const app = {
    89.       //setup函数是vue的一个入口函数
    90.       //1、内部无论是变量还是函数都需要return之后才能使用否则无法使用
    91.       //2、setup函数内部无法使用 data 和 methods 的变量和方法
    92.       //3、setup函数是同步的，不能是异步的
    93.       setup() {
    94.         //写完函数也要去注册
    95.         function tap1(e) {
    96.           console.log(e);
    97.           alert("您已点击！");
    98.         }
    99.         function refFun() {
    100.           alert(inputValue.value);
    101.         }
    102.         function reactiveFun() {
    103.           alert(inputValue1.age);
    104.         }
    105.  
    106.         return {
    107.           message,
    108.           message1,
    109.           message2,
    110.           url,
    111.           attr,
    112.           tap1,
    113.           flag,
    114.           obj,
    115.           list,
    116.           inputValue,
    117.           inputValue1,
    118.           refFun,
    119.           reactiveFun,
    120.         };
    121.       },
    122.     };
    123.  
    124.     //3、将Vue对象与标签对应挂载
    125.     // 采用#是因为CSS的id选择器要用#,采用class可以使用 ”.名称“
    126.     createApp(app).mount("#app");
    127.  
    128.   script>
    129.   <style>style>
    130. html>

    二、事件监听函数watch与computed：

    事件监听函数类似于设计模式中的观察者模式，当监听的值发生变化时就会执行一些逻辑。

    1、watch：

    1、当我们监听一个对象时有两种方法。第一种时监听整个对象，第二种是监听对象的某一个属性。

    2、当监听整个对象时，不管修改了对象下的哪一个属性都会触发watch

    3、当监听对象下的某一个值时，只有当该对象的监听属性值发生了变化才会触发watch函数。

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <script src="vue3.0.0.17.js">script>
    5.     <meta
    6.       charset="utf-8"
    7.       name="viewport"
    8.       content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    9.     />
    10.   head>
    11.   <body>
    12.     <div id="app">
    13.       
    14.       <input type="text" v-model="firstName" />
    15.       <input type="text" v-model="lastName" /><br />
    16.       {{firstName}}--{{lastName}} <br />
    17.  
    18.       
    19.       <input type="text" v-model="name.firstName" />
    20.       <input type="text" v-model="name.lastName" /><br />
    21.       {{firstName}}--{{lastName}}
    22.     div>
    23.   body>
    24.   <script>
    25.     //导入对应的函数
    26.     const { createApp, ref, reactive, watch, computed } = Vue;
    27.  
    28.     //1、基本数据类型案例：
    29.     const firstName = ref("");
    30.     const lastName = ref("");
    31.  
    32.     //2、监听对象案例：
    33.     const name = reactive({
    34.       firstName: "",
    35.       lastName: "",
    36.     });
    37.  
    38.  
    39.     //创建vue对象
    40.     const app = {
    41.       setup() {
    42.         //watch参数：第一个参数是监听的对象或一个函数，第二个是执行的逻辑。
    43.  
    44.  
    45.         //1、监听响应式对象(基本数据类型，单一属性)
    46.         watch(firstName, (newVal, oldVal) => {
    47.           console.log("现在的值" + newVal);
    48.           console.log("变化之前的值" + oldVal);
    49.         });
    50.  
    51.         //2.1、监听某一个对象：
    52.         watch(name, (newVal, oldVal) => {
    53.           console.log("现在的值" + newVal);
    54.           console.log("变化之前的值" + oldVal);
    55.         });
    56.         //2.2、监听一个对象下的某一个值：（对象，里有很多属性）
    57.         watch(
    58.           () => name.firstName,
    59.           () => {
    60.             console.log("我变了");
    61.           }
    62.         );
    63.  
    64.         return {
    65.           firstName,
    66.           lastName,
    67.           name,
    68.         };
    69.       },
    70.     };
    71.  
    72.     //3、将Vue对象与标签对应挂载
    73.     createApp(app).mount("#app");
    74.   script>
    75. html>

     2、computed函数：

    与watch相似，都是在监听值或对象的变化，当其变化后，执行一些逻辑。但computed更侧重于结果，computed函数内部不能写复杂的业务逻辑。

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <script src="vue3.0.0.17.js">script>
    5.     <meta
    6.       charset="utf-8"
    7.       name="viewport"
    8.       content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    9.     />
    10.   head>
    11.   <body>
    12.     <div id="app">
    13.       
    14.       <input type="text" v-model="firstName" />
    15.       <input type="text" v-model="lastName" /><br />
    16.       <div>{{fullName}}div>
    17.  
    18.     div>
    19.   body>
    20.   <script>
    21.     //导入对应的函数
    22.     const { createApp, ref, reactive, watch, computed } = Vue;
    23.  
    24.     //基本数据类型
    25.     const firstName = ref("");
    26.     const lastName = ref("");
    27.  
    28.     //创建vue对象
    29.     const app = {
    30.       setup() {
    31.         //计算函数，()=>不写{}
    32.         //返回结果是只读，不能进行修改
    33.         //computed函数与watch相似，都是监听函数，会对内部的所有变量进行事件监听
    34.         //不管firstName.value还是lastName.value值发生变化都会触发，相当于之前对name的监听
    35.         const fullName = computed(() => firstName.value + lastName.value);
    36.         return {
    37.           firstName,
    38.           lastName,
    39.           fullName,
    40.         };
    41.       },
    42.     };
    43.  
    44.     //3、将Vue对象与标签对应挂载
    45.     createApp(app).mount("#app");
    46.   script>
    47. html>

    3、computed与watch的区别：

    1、watch的目的是执行业务逻辑，因为computed内部不能写{}。更关注变量的变化
    2、computed的目的是得到一个属性值。关注最终得到的结果。

    三、Vue中的组件：

    Vue中一切皆组件，所以组件化编程在Vue中用途十分重要，下面我们来介绍一下Vue的组件。

    1、组件模板：

    1. <template>
    2.     书写写组件内容
    3. template>
    4.  
    5. <script>
    6. export default {
    7.   name: "组件名称",
    8.   props: {},  //父组件传来的值
    9.   setup(props, context) {
    10. //1、props用于读取props(父组件传来的值)内部的属性值
    11. //2、context用于为父组件传递值
    12.     return {
    13.       
    14.     };
    15.   },
    16. };
    17. script>
    18. <style>
    19.  
    20. style>

    2、组件编写案例：

    父组件会为子组件传递一个图片，然后子组件要接收这个图片并且显示出来。

    子组件：

    1、如果要接收参数，则卸载props内部

    2、name属性表示组件导出时的名称

    3、props内接收的值是only类型，类似与后端中的引用类型，只能读不能改

    2. <template>
    3.     <div v-text = "name">div>
    4. template>
    5.  
    6. <script>
    7.  
    8. export default {
    9. //组件导出的名字
    10.   name: "swiper",
    11.   // props: ["text"],  //只有一个值,并且无约束
    12.   //也可以接收一个对象,并且对其进行约束
    13.   props: {
    14.     name: {
    15.       //只能是String类型,并且默认值是''
    16.       type: String,
    17.       default: "",
    18.     },
    19.     obj: {
    20.       type: Object,
    21.     },
    22.   },
    23.  
    24.   setup(props, context) {
    25.     //获取name的值
    26.     console.log(props.name);
    27.     //获取对象中的值：
    28.     console.log(props.obj.name);
    29.     return {
    30.     };
    31.   },
    32. };
    33. script>
    34. <style>
    35.  
    36. style>

    引用子组件的父组件：

    1、注意参数传递问题，传递的参数默认都是字符串，修改这一规则用v-bind绑定。

    使用步骤：

    1、import导入组件。

    2、components注册组件。

    3、使用组件。

    1. <template>
    2.   
    3.   
    4.   <swipers :name="1" /> 
    5.   
    6.   <swipers name="1" /> 
    7.   
    8.   <swipers :obj="{ name: 'aaa' }" /> 
    9. template>
    10.  
    11. <script>
    12. //导入组件
    13. import swiper from "./components/swiper.vue";
    14.  
    15. export default {
    16.   name: "App",
    17.   components: {
    18.     swipers: swiper, //注册组件,标签叫什么还是从这决定的
    19.   },
    20.  
    21.   setup() {
    22.     return {
    23.     };
    24.   },
    25. };
    26. script>
    27.  
    28. <style>
    29. style>

     四、动态组件：

    对于下图，当我们点击订单列表和 C端用户列表时，我们想让url不变，改变的只是显示数据的组件。即下面两个功能只是在进行组件的切换，而非url的改变。 

    用于对组件的切换，指定要显示哪一个组件。

    1、is是当前显示的组件。

    2、想用动态绑定就要使用 :is=" "来绑定。

    keep-alive属性讲解：

    1、keep-alive的存在是为了保证数据的不丢失，刚刚的案例中我们从keepAc切换到keep之后之前输入框的内容就会消失，当我们不想让数据框内部的内容消失就可以使用该组件将其包裹起来。

    2、当我们直想让个别组件有或这样的效果可以使用 include 和 exclude 来指明哪些组件使用，哪些组件不使用。 

    效果显示：

    完整代码：

    1. <template>
    2.   <div id="App">
    3.     <button @click="onChange('keep')">点我切换到keepbutton> <br />
    4.     <button @click="onChange('keepAc')">点我切换到keepAcbutton><br />
    5.     <keep-alive>
    6.       <component :is="currentCom" />
    7.     keep-alive>
    8.   div>
    9. template>
    10.  
    11. <script>
    12. import { ref } from "vue";
    13. import keep from "./components/keep.vue";
    14. import keepAc from "./components/keepAc.vue";
    15. export default {
    16.   name: "App",
    17.   components: {
    18.     keep,
    19.     keepAc,
    20.   },
    21.  
    22.   setup() {
    23. //只有响应式兑现才能实现双向数据绑定：
    24.     const currentCom = ref("keep");
    25. //更改组件函数
    26.     function onChange(event) {
    27.       currentCom.value = event;
    28.     }
    29. //将函数和对象注册
    30.     return {
    31.       currentCom,
    32.       onChange,
    33.     };
    34.   },
    35. };
    36. script>
    37.  
    38. <style>
    39. style>

  • 相关阅读:
    如何申请公司邓白氏编码（D-U-N-S Number）
    sqli-labs/Less-53
    2022-08-05 粗糙集Rough set
    echarts-根据数据大小实现折线渐变色
    【力扣】21. 合并两个有序链表
    设计模式-观察者模式（Observer）
    ubuntu20.04安装anaconda3搭建python环境
    Python基于Mirai开发的QQ机器人保姆式教程（亲测可用）
    [Codeforces] combinatorics (R1200) Part.2
    【C++】string类模拟实现上篇(附完整源码）
  • 原文地址：https://blog.csdn.net/weixin_60414376/article/details/126694549