• 【VUE3】保姆级基础讲解（一）：初体验与指令

    目录

    安装和引入

    CDN

    本地引入

    VUE初体验

    MVVM模型

    data属性 与 methods属性

     VUE基础-模板语法

    Mustache双大括号语法

     v-once指令

    v-html

    v-pre

    v-cloak

    v-memo

    v-bind（重要）

    对象语法 

    v-bind直接绑定对象

     v-on

    条件渲染

    v-for

    基础使用

      数组更新监听

     key属性

    v-model 

     v-model绑定checkbox

      v-model绑定radio

    lazy修饰符 

     number修饰符

     trim修饰符

    安装和引入

    CDN

    <script src="https://unpkg.com/vue@next">script>

    本地引入

    打开CDN链接，直接复制代码到本地js文件，再引入html

    VUE初体验

    • 使用Vue.createApp函数创造一个app，在template里写html代码，最后用app.mount挂载到div中
    1. <body>
    2.     <div class="app">div>
    3.     
    4.     <script src="https://unpkg.com/vue@next">script>
    5.     <script>
    6.         const app = Vue.createApp({
    7.             template:`
      asdasdas
      hehehe`
    8.         })
    9.         //挂载  
    10.         app.mount(".app")
    11.     script>
    12. body>
    • 动态展示，使用data创建函数，return创建的变量，在template中使用插值语法{{}}
    1. <body>
    2.     <div class="app">div>
    3.     
    4.     <script src="./lib/vue.js">script>
    5.     <script>
    6.         const app = Vue.createApp({
    7.             template:`<h2>{{title}}h2><span>{{message}}span>`,
    8.             data:function(){
    9.                 return {
    10.                     title:'hello word',
    11.                     message:'message'                    
    12.                 }
    13.             }
    14.         })
    15.         //挂载  
    16.         app.mount(".app")
    17.     script>
    18. body>app")
    • 列表数据，使用v-for = “item in xxx”来遍历xx数组
    1. <body>
    2.     <div class="app">div>
    3.     <script src="./lib/vue.js">script>
    4.     <script>
    5.         const app = Vue.createApp({
    6.             template:`
    7.             <h2>{{title}}h2>
    8.             <ul>
    9.                 <li v-for="item in message">{{item}}li>
    10.             ul>
    11.             `,
    12.             data:function(){
    13.                 return {
    14.                     message:['message','123','222']              
    15.                 }
    16.             }
    17.         })
    18.         app.mount(".app")
    19.     script>
    20. body>
    •  计数器，使用methods创建函数，并在template中使用 @click='plus'绑定事件与函数
    1. <body>
    2.     <div class="app">div>
    3.     <script src="./lib/vue.js">script>
    4.     <script>
    5.         const app = Vue.createApp({
    6.             template:`
    7.             
      计数器:{{counter}}
    8.             
    9.             
    10.             `,
    11.             data:function(){
    12.                 return {
    13.                     counter:0
    14.                 }
    15.             },
    16.             methods:{
    17.                 plus:function(){this.counter++},
    18.                 sub:function(){this.counter==0? this.counter=0:this.counter--},
    19.             }
    20.         })
    21.         app.mount(".app")
    22.     script>
    23. body>

     上面的例子中，template都写的很别扭，因为是在··中写的，没有提示，可以改进为：

    1. <body>
    2.     <div class="app">
    3.         <h2>计数器:{{counter}}h2>
    4.         <button @click='plus'>+1button>
    5.         <button @click='sub'>-1button>
    6.     div>
    7.     <script src="./lib/vue.js">script>
    8.     <script>
    9.         const app = Vue.createApp({
    10.             data:function(){
    11.                 return {
    12.                     counter:0
    13.                 }
    14.             },
    15.             methods:{
    16.                 plus:function(){this.counter++},
    17.                 sub:function(){this.counter==0? this.counter=0:this.counter--},
    18.             }
    19.         })
    20.         app.mount(".app")
    21.     script>
    22. body>

    既将template内容直接写到div中，app.mount(".app")时会自动渲染这个div的内容

    MVVM模型

    MVC和MVVM

    什么是MVVM框架？ - 知乎

     在VUE中，VUE就是充当了viewmodel角色，他是一个桥梁，链接了model和view，能自己完成事件监听和数据展示，不需要人为写代码设置

    data属性 与 methods属性

     

     methods中都是使用this.去调用变量，这里的this都是一个proxy对象，用于监听变量的改变，这里不能用箭头函数的原因也是这个，因为箭头函数没有this，当我们使用this时实际上是使用了window，这样就不能找到我们需要改变的变量了

     VUE基础-模板语法

    Mustache双大括号语法

    上一章说了 {{}} 可以引入data函数中返回的变量，其实不仅仅是引入，甚至可以进行转换和计算

    1. <body>
    2.     <div class="app">
    3.         <h2>{{counter*2}}h2>
    4.         <span>{{infos.split(' ')}}span>
    5.         <h3>{{age>=18?'成年人':"未成年人"}}h3>
    6.         <h2>{{gettime()}}h2>
    7.  
    8.     div>
    9.     <script src="./lib/vue.js">script>
    10.     <script>
    11.         const app = Vue.createApp({
    12.             data:function(){
    13.                 return {
    14.                     counter:100,
    15.                     infos:'hello world',
    16.                     age:22
    17.                 }
    18.             },
    19.             methods:{
    20.                 gettime:function(){
    21.                     return '2022-12-1'
    22.                 }
    23.             }
    24.         })
    25.         app.mount(".app")
    26.     script>
    27. body>

    可以在{{}}中进行计算和字符串变换，也就是说{{}}可以写表达式

    上述例子中，在{{}}中完成了

    • 数字计算表达式
    • 字符串分割转换
    • 三元表达式（这个地方不能写if表达式）
    • 函数调用

     v-once指令

     对于

    {{counter}}

    这个指令，如果在h2处增加v-once，变为：

    <h2 v-once>{{counter}}h2>

    这个v-once的意思是是只渲染一次，那么后期如果counter这个值改变了，那么h2显示的内容也不变

    v-html

    可以解析html命令字符串

    1.     <div class="app">
    2. //解析字符串
    3.         <h2 v-html="infos">h2>
    4.     div>
    5.     <script src="./lib/vue.js">script>
    6.     <script>
    7.         const app = Vue.createApp({
    8.             data:function(){
    9.                 return {
    10.                     infos:`hhhhh`,
    11.                 }
    12.             },

    v-pre

    可以跳过解析过程，也就是说{{}} 直接当成大括号字符串处理

    <h2 v-pre>{{counter}}h2>

    结果就直接是{{counter}}

    v-cloak

    1.     <style>
    2.         [v-cloak]{
    3.             display: none;
    4.         }
    5.     style>
    6. head>
    7. <body>
    8.     <div class="app">
    9.         <h2 v-cloak>{{counter}}h2> 
    10.     div>
    11.     <script src="./lib/vue.js">script>
    12.     <script>
    13.         const app = Vue.createApp({
    14.             data:function(){
    15.                 return {
    16.                     counter:11,
    17.                 }
    18.             },
    19.         })
    20.         setTimeout(()=>{
    21.             app.mount(".app")
    22.         },1000)
    23.     script>
    24. body>
    25. html>

    如果我给 app.mount(".app")设置间隔时间，1s之后再挂载div，也就是说1s之后h2中的counter才会变渲染变为11

    正常情况下，前1s，浏览器显示的是 {{counter}} 1s之后显示 11

    很显然这样是不好的，因为我们不希望用户看见代码内容，那么就可以使用v-cloak ，在没有渲染完毕时先隐藏这个内容，注意这里还需要在style中设置其作用

    v-memo

    缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过

    1. <body>
    2.     <div class="app">
    3.         <div v-memo="[name]">
    4.             <h2>{{name}}h2>
    5.             <h2>{{age}}h2>
    6.             <h2>{{gender}}h2>
    7.         div>
    8.         <button @click="update">button>
    9.     div>
    10.     <script src="./lib/vue.js">script>
    11.     <script>
    12.         const app = Vue.createApp({
    13.             data:function(){
    14.                 return {
    15.                     name:'kobe',
    16.                     age:18,
    17.                     gender:'male'
    18.                 }
    19.             },
    20.             methods:{
    21.                 update:function(){
    22.                     this.gender='why'
    23.                 }
    24.             }
    25.         })
    26.         app.mount(".app")
    27.     script>

     只有当我name变量发生更新时，别的变量才会更新，反之异然

    也就是说上面的例子，点击按钮，gender不能更新

    v-bind（重要）

    动态的绑定一个或多个 attribute，也可以是组件的 prop。

    之前说的方法都是对 标签的内容 起作用，这个可以对 标签属性 进行赋值等操作 

    1.     
      class="app">
    2.         <a v-bind:href="baidu">baidua>
    3.
  • <script src="./lib/vue.js">script>