• Vue3.0第一天

    安装vue调试插件

    为方便Vue调试，F12看对象和变量信息，请先安装Edge浏览器，和谷歌浏览器的调试插件

    打开Vue官网：https://cn.vuejs.org/ 

    然后在顶层找到 生态系统->工具链指南->浏览器开发着插件

    在里面下载安装插件：Vue.js devtools 

    Edge可以直接安装插件，谷歌浏览器可以科学上网安装插件，安装完毕后打开是vue编写的页面就按F12然后找到 》然后点开Vue 就可以针对页面的Vue变量进行调试查看。（如果是vue编写的页面，Vue插件图标会亮，不是则不亮的）

    点开Vue后就会看到如下界面

    以下是代码

    1. html>
    2. <htmI lang="en">
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.         <title>Documenttitle>
    9.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    10.     head>
    11.  
    12.     <body>
    13.         <div>
    14.             {{10+20}} 这一个运算不起作用，页面展示的就是一个{{10+20}}字符串，因为它不在Vue作用容器内
    15.         div>
    16.         <div id="box">
    17.             {{10+20}} 
    18.             {{myname}}
    19.             {{GetString()}} 
    20.         div>
    21.         <script>
    22.             //Vue.createApp方法创建一个vue实例，然后用mount方法将应用实例挂载在一个id为box的容器元素中。
    23.             //那么id=box的容器就使用了vue模版引擎进行渲染
    24.             //Vue.createApp().mount("#box") 
    25.  
    26.             Vue.createApp({
    27.                 data() {
    28.                     return {
    29.                         myname: "凡凡"
    30.                     }
    31.                 },
    32.                 methods: {
    33.                     GetString() {
    34.                         return "abc";
    35.                     }
    36.                 }
    37.  
    38.             }).mount("#box")
    39.         script>
    40.     body>
    41. htmI>

    文本插值：

    1. html>
    2. <htmI lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Documenttitle>
    8.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    9.     head>
    10.     <body>
    11.         <div id="app">
    12.             
    13.             <div>{{10+20}}div>
    14.             <div>{{myname}}div>
    15.             <div>{{myname.slice(0,1)}}div>
    16.             <div>{{myname+"-欢迎您"}}div>
    17.             <div>{{isLogin?"已登陆":"未登录"}}div>
    18.             <script>
    19.                 var app = Vue.createApp({
    20.                     data() {
    21.                         return {
    22.                             myname: "凡凡",
    23.                             isLogin:true
    24.                         }
    25.                     }
    26.  
    27.                 }).mount("#app")
    28.             script>
    29.         div>
    30.     body>
    31. htmI>

    v-bind指令：用于绑定元素属性

    1. html>
    2. <htmI lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Documenttitle>
    8.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    9.         <style>
    10.             .yellow{
    11.               background-color: yellow;  
    12.             }
    13.             .red{
    14.                 background-color: red;
    15.             }
    16.             .hidden{
    17.                 display: none;
    18.             }
    19.             .show{
    20.                 display: block;
    21.             }
    22.             .aaa{
    23.                 background-color:aqua;
    24.             }
    25.             .bbb{
    26.                 font-size: 8px;
    27.             }
    28.             .ccc{
    29.                 color:blue;
    30.  
    31.             }
    32.         style>
    33.     head>
    34.     <body>
    35.         <div id="app">
    36.             
    37.             <div v-bind:class="color">{{myname}}div>
    38.             <div v-bind:class="isLogin?'red':'yellow'">登录状态div>
    39.             <div v-bind:class="isShow?'show':'hidden'">哈哈div>
    40.  
    41.             
    42.  
    43.             
    44.             
    45.             <div v-bind:class="{aaa:true,bbb:false,ccc:true}">中华人民共和国Adiv>
    46.  
    47.             
    48.             <div v-bind:class="classObj">中华人民共和国Bdiv>
    49.  
    50.             
    51.             
    52.             <div v-bind:class="['aaa','ccc']">中华人民共和国Cdiv>
    53.  
    54.  
    55.             
    56.             
    57.             <div v-bind:class="classArr">中华人民共和国Cdiv>
    58.  
    59.             <img v-bind:src="url" width="120" height="33"><br>
    60.             <img v-bind="imgObj"><br> 
    61.  
    62.  
    63.             
    64.  
    65.             
    66.             <div v-bind:style="{backgroundColor:'red'}">中华人民共和国Ddiv>
    67.             <div v-bind:style="{backgroundColor: color}">中华人民共和国Ediv> 
    68.             <div v-bind:style="{backgroundColor:'red',fontSize:'20px'}">中华人民共和国Fdiv>
    69.  
    70.             
    71.             
    72.             <div v-bind:style="styleObj">中华人民共和国Mdiv>
    73.  
    74.             
    75.             <div v-bind:style="[{backgroundColor:'red'},{fontSize:'20px'}]">中华人民共和国Kdiv>
    76.             
    77.             <div v-bind:style="styleArr" v-on:click="GetGroundImage">中华人民共和国Ldiv>
    78.  
    79.  
    80.             <button  disabled="disabled">clicibutton>
    81.             <button  disabled="true">clicibutton>
    82.             <button  disabled="false">clicibutton>
    83.             <button  v-bind:disabled="state">clicibutton>
    84.             <script>
    85.                 var app = Vue.createApp({
    86.                     data() {
    87.                         return {
    88.                             myname: "凡凡",
    89.                             isLogin:true,
    90.                             isShow:false,
    91.                             color:"yellow",
    92.                             url:"http://sc0.hao123img.com/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png",
    93.                             imgObj:{
    94.                                 src:"http://sc0.hao123img.com/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png",
    95.                                 Width:120,
    96.                                 Height:33                           
    97.                             },
    98.                             classObj:{
    99.                                 aaa:true,
    100.                                 bbb:false,
    101.                                 ccc:true
    102.                             },
    103.                             styleObj:{
    104.                                 backgroundColor:'red', //也可以写成这样：'background-color':'red',(注意带-的名称需要用''包裹起来)
    105.                                 fontSize:'20px',        //也可以写成这样：'font-size':'200px' 
    106.  
    107.                                 //很多时候这个背景图片是通过Ajax方法从后台获取，然后动态给styleObj对象增加这个backgroundImage属性然后赋值的
    108.                                 backgroundImage:"url(http://sc0.hao123img.com/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png)"  //也可以写成这样：'background-image':'200px' 
    109.                             },
    110.                             classArr:["aaa","ccc","bbb"],
    111.                             styleArr:[{backgroundColor:'red'},{fontSize:'20px'}],
    112.                             state:false
    113.                         }
    114.                     },
    115.                     methods:{
    116.                         GetGroundImage(){
    117.                             this.styleArr.push({backgroundImage:"url(http://sc0.hao123img.com/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png)"}) //动态的添加一个背景图片
    118.                             this,styleArr.push({fontSize:'50px'}) //因为styleArr里面本来就存在{fontSize:'20px'}这个对象了，此时我们push大片styleArr后，最新的值就会覆盖掉原来的值，所以原来的{fontSize:'20px'}就变成了{fontSize:'50px'}
    119.                         }
    120.                     }
    121.  
    122.                 }).mount("#app")
    123.             script>
    124.         div>
    125.     body>
    126. htmI>

    v-show指令：有更高的初始渲染开销，频繁切换用v-show较好

    v-if 指令：有更高的切换开销，如果比较少的切换，用v-if较好

    1. html>
    2. <htmI lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Documenttitle>
    8.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    9.         <style>
    10.             .hidden{
    11.                 display: none;
    12.             }
    13.             .show{
    14.                 display: block;
    15.             }
    16.         style>
    17.     head>
    18.     <body>
    19.         <div id="app">
    20.             
    21.             <div v-bind:class="isShow?'show':'hidden'">哈哈div>
    22.  
    23.             
    24.             <div v-show="isShow">显示或者隐藏div> 
    25.             <div v-if="isShow">显示或者隐藏div>   
    26.  
    27.             <div v-show="dataList.length===0">暂无数据div> 
    28.             <div v-if="dataList.length===0">暂无数据div>   
    29.  
    30.             
    31.             <ul  v-for="item in commodityList">
    32.                 <li>{{item.title}} 
    33.                     <b v-if="item.state===0">未付款b>
    34.                     <b v-else-if="item.state===1">已付款b>
    35.                     <b v-else-if="item.state===2">已完成b>
    36.                     <b v-else>未知b>
    37.                 li>
    38.             ul>
    39.             <script>
    40.                 var app = Vue.createApp({
    41.                     data() {
    42.                         return {
    43.                             myname: "凡凡",                         
    44.                             isShow:false,
    45.                             dataList:["AA","BB","CC"],
    46.                             commodityList:[
    47.                                 {title:'手机',state:0},
    48.                                 {title:'衣服',state:1},
    49.                                 {title:'鞋子',state:2},
    50.                             ]
    51.                         }
    52.                     }
    53.  
    54.                 }).mount("#app")
    55.             script>
    56.         div>
    57.     body>
    58. htmI>

    v-for指令：

    模糊查询小案列

    1. html>
    2. <htmI lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Documenttitle>
    8.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    9.         <style>
    10.             .liColor {
    11.                 background-color: brown;
    12.             }
    13.         style>
    14.     head>
    15.  
    16.     <body>
    17.         <div id="app">
    18.             <ul>
    19.                 
    20.                 <li v-for="item in dataList">值：{{item}}--索引：{{index}}li>
    21.             ul>
    22.  
    23.             <ul>
    24.                 
    25.                 <li v-for="item,index in dataList" v-bind:class="currentClickIndex===index?'liColor':''"
    26.                     v-on:click="ChangeColor(index)">值：{{item}}--索引：{{index}}li>
    27.             ul>
    28.  
    29.             <ul>
    30.                 
    31.                 <li v-for="(item,index) in dataList" v-bind:class="currentClickIndex===index?'liColor':''"
    32.                     v-on:click="ChangeColor(index)">值：{{item}}--索引：{{index}}li>
    33.             ul>
    34.  
    35.             
    36.             
    37.             <ul v-for="({title,state},index) in commodityList"> 
    38.                 {{title}}
    39.                 <li v-if="state===0">未付款li>
    40.                 <li v-else-if="state===1">已付款li>
    41.                 <li v-else-if="state===2">已完成li>
    42.                 <li v-else>未知li>
    43.             ul>
    44.             
    45.             <ul> 
    46.                 <li  v-for="({title,state},index) in commodityList">{{title}}               
    47.                 <div v-if="state===0">未付款div>
    48.                 <div v-else-if="state===1">已付款div>
    49.                 <div v-else-if="state===2">已完成div>
    50.                 <div v-else>未知li>
    51.             ul>
    52.  
    53.             
    54.             <ul>
    55.                 
    56.                 <li v-for="value in userObj">值是：{{value}}li> 
    57.             ul>
    58.             <ul>
    59.                 
    60.                 <li v-for="(value,key) in userObj">键是:{{key}} --值是：{{value}}li>
    61.             ul>
    62.  
    63.             <ul>
    64.                 
    65.                 <li v-for="(value,key,index) in userObj">键是:{{key}} --值是：{{value}}--索引是：{{index}}li>
    66.             ul>
    67.  
    68.             
    69.  
    70.             <ul>
    71.                 
    72.                 <li v-for="value of userObj">值是：{{value}}li> 
    73.             ul>
    74.             <ul>
    75.                 
    76.                 <li v-for="(value,key) of userObj">键是:{{key}} --值是：{{value}}li>
    77.             ul>
    78.  
    79.             <ul>
    80.                 
    81.                 <li v-for="(value,key,index) of userObj">键是:{{key}} --值是：{{value}}--索引是：{{index}}li>
    82.             ul>
    83.  
    84.             
    85.             <ul>            
    86.                   
    87.                 <li v-for="item in 5">值是：{{item}}li>  
    88.             ul>
    89.  
    90.             
    91.  
    92.             <input type="text" v-model="inputval"/>
    93.             <ul>
    94.                 <template v-for="item in GetSelectItems()"> 
    95.                     <li>{{item}}li>
    96.                 template>
    97.             ul>
    98.  
    99.  
    100.             <script>
    101.                 var app = Vue.createApp({
    102.                     data() {
    103.                         return {
    104.                             dataList: ["AA", "BB", "CC"],
    105.                             currentClickIndex: -1, //当前点击li的索引标记，初始值为-1的因为页面刚刚渲染出来肯定是没有被点击的，所以不可能存在背景色位红色的li
    106.                             commodityList:[
    107.                                 {title:'手机',state:0},
    108.                                 {title:'衣服',state:1},
    109.                                 {title:'鞋子',state:2},
    110.                             ],
    111.                             userObj:{
    112.                                 name:'张三',
    113.                                 age:23,
    114.                                 email:'abc123@qq.com'
    115.                             },
    116.                             inputval:'',
    117.                             charArr:["aaa",'abc','abd','bca']
    118.  
    119.                         }
    120.                     },
    121.                     methods: {
    122.                         ChangeColor(index) {
    123.                             this.currentClickIndex = index;  //将当前点击的li的索引赋值给currentClickIndex
    124.                         },
    125.                         GetSelectItems(){
    126.                             //includes() 方法用于判断字符串是否包含指定的子字符串
    127.                             //filter方法是过滤方法， item表示当前遍历charArr数组的项，如果当前项包含了input中输入的值，则找出来，然后统一返回一个数组
    128.                             var selectIitemArr= this.charArr.filter(item=>item.includes(this.inputval))
    129.                             return selectIitemArr;
    130.                         }
    131.  
    132.                     }
    133.  
    134.                 }).mount("#app")
    135.             script>
    136.         div>
    137.     body>
    138. htmI>

    template标签：html中的template标签中的内容在页面中不会显示

    1. html>
    2. <htmI lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Documenttitle>
    8.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    9.     head>
    10.  
    11.     <body>
    12.         <div id="app">
    13.             
    14.             <div v-if="isShow">
    15.                 <div>111div>
    16.                 <div>222div>
    17.                 <div>333div>
    18.             div>
    19.             
    20.             <div>
    21.                 <div>111div>
    22.                 <div>222div>
    23.                 <div>333div>
    24.             div>
    25.             
    26.             <template v-if="isShow">
    27.                 <div>111div>
    28.                 <div>222div>
    29.                 <div>333div>
    30.             template>
    31.             
    32.             <div>111div>
    33.             <div>222div>
    34.             <div>333div>
    35.  
    36.             
    37.             <ul>
    38.                <template v-for="item in commodityList">
    39.                     <li v-if="item.state<2">{{item.title}}li>
    40.                template> 
    41.             ul>
    42.             
    43.             <ul>
    44.                 <template v-for="({title,state},index) in commodityList">
    45.                      <li v-if="state<2">{{title}}li>
    46.                 template> 
    47.              ul>
    48.  
    49.             <script>
    50.                 var app = Vue.createApp({
    51.                     data() {
    52.                         return {
    53.                             isShow: true,
    54.                             commodityList:[
    55.                                 {title:'手机',state:0},
    56.                                 {title:'衣服',state:1},
    57.                                 {title:'鞋子',state:2},
    58.                             ],
    59.                         }
    60.                     }
    61.  
    62.                 }).mount("#app")
    63.             script>
    64.         div>
    65.     body>
    66. htmI>

    v-on指令：

    1. html>
    2. <htmI lang="en">
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.         <title>Documenttitle>
    9.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    10.         <style>
    11.             .liColor {
    12.                 background-color: brown;
    13.             }
    14.         style>
    15.     head>
    16.  
    17.     <body>
    18.         <div id="app">
    19.             {{count}}
    20.             {{myname}}
    21.             
    22.             <button v-on:click="count++">增加1button>
    23.             <button v-on:click="count--">减少1button>
    24.  
    25.             <button v-on:click="GetInfo()">clickbutton> 
    26.             <button v-on:click="GetInfo">clickbutton> 
    27.  
    28.             
    29.             
    30.             
    31.  
    32.             
    33.             
    34.             
    35.  
    36.              
    37.             <input v-on:input="GetEventA" id="5">clickAbutton>
    38.            
    39.             
    40.             <input v-on:input="GetEventB()" id="6">clickBbutton>           
    41.             <input v-on:input="GetEventC(7)" id="7">clickCbutton>
    42.  
    43.             
    44.             <input v-on:input="GetEventD(7,$event)" id="7">clickDbutton>
    45.             
    46.             
    47.             
    48.             <ul>
    49.                 <li v-for="item,index in dataList" v-bind:class="currentClickIndex===index?'liColor':''"
    50.                     v-on:click="ChangeColor(index)">值：{{item}}--索引：{{index}}li>
    51.             ul>
    52.  
    53.             <script>
    54.                 var app = Vue.createApp({
    55.                     data() {
    56.                         return {
    57.                             count:0,
    58.                             myname: "凡凡",
    59.                             isShow: false,
    60.                             dataList: ["AA", "BB", "CC"],
    61.                             currentClickIndex: -1 //当前点击li的索引标记，初始值为-1的因为页面刚刚渲染出来肯定是没有被点击的，所以不可能存在背景色位红色的li
    62.                         }
    63.                     },
    64.                     methods: {
    65.                         GetInfo() {
    66.                             alert(1);
    67.                             console.log("这个this其实就是app对象", this)
    68.                             this.myname = "赵云" //点击button控件的时候就将myname赋值为赵云了
    69.                         },
    70.                         GetEventA(evt) {
    71.                             //  alert(2);
    72.                             console.log(evt); //调用这个方法如果不传递参数，默认就自带了一个元素的原生事件evt，有了一个元素的原生事件对象我们就可以从这个对象中获取到我们需要元素数据了。
    73.                             console.log(evt.target.value);   //在输入框内容发生变化后打印出：当前输入框中录入的值。
    74.                             console.log(evt.target.id);      //在输入框内容发生变化后打印出：这个元素的id属性值
    75.                             this.myname = evt.target.value;
    76.                         },
    77.                         GetEventB(evt) {
    78.                             console.log(evt.target.id); //错误用法：因为调用方法是带括号的，但是在调用的时候没用传递参数，所以这里无法收到元素原生事件对象的，所以就无法获取到id值                         
    79.                         },
    80.                         GetEventC(id) {
    81.                             console.log(id); //方法传递了7的值，所以就可以打印出7                    
    82.                         },
    83.                         GetEventD(a,evt) {
    84.                             console.log(a);
    85.                             console.log(evt.target.id);                       
    86.                         },
    87.  
    88.                         ChangeColor(index) {
    89.                             this.currentClickIndex = index;  //将当前点击的li的索引赋值给currentClickIndex
    90.                         }
    91.  
    92.                     }
    93.  
    94.                 }).mount("#app")
    95.             script>
    96.         div>
    97.     body>
    98. htmI>

    v-html指令：

    1. html>
    2. <htmI lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible” content=" IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Documenttitle>
    8.         <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    9.     head>
    10.  
    11.     <body>
    12.         <div id="app">
    13.             {{myContent}}    
    14.             <div v-html="myContent">div>  
    15.             <script>
    16.                 var app = Vue.createApp({
    17.                     data() {
    18.                         return {
    19.                             myContent: "这是我的内容"
    20.                         }
    21.                     },
    22.                     methods: {
    23.                     }
    24.  
    25.                 }).mount("#app")
    26.             script>
    27.         div>
    28.     body>
    29. htmI>

    v-model:双向绑定

    说明与原理

    1. 什么是v-model
      • v-model 本质上是一颗语法糖，可以用 v-model 指令在表单 、