Vue基础

已于 2024-07-02 00:01:05 修改
阅读量109 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-11-08 16:01:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45887481/article/details/127752366
版权

目录

框架是什么?

重点记忆

vue.js

vue是什么？

谁开发的

vue特点

MVVM

HelloWord

淘宝镜像

vue初体验

多个vue实例

{{}}--模板语法--双大括号赋值法

el与data的两种写法

$mount 手动挂载

指令

什么是html标签的属性？

什么是指令？

v-model

v-show

v-on

v-for

v-bind 这个是初学者最容易忘记的 但是很重要

v-if全家桶

v-html

v-once

v-text

框架是什么?

帮助我们构建与业务（就是项目中的功能）无关的事情

例子：

在没有学习框架的时候 隔行变色（代码最少在10行）

在学习了框架之后 jquery

重点记忆

  1. vue是什么？
  2. vue的特点
  3. MVVM是什么？请分别简述
  4. 多个vue实例可以吗？怎么用？
  5. {{}}是什么？
  6. vue的延迟挂载是什么？$mount是什么？
  7. data的写法分别是什么？
  8. 什么是指令?
  9. v-model 作用
  10. 双向绑定是什么与原理
  11. v-show是什么？

vue.js

vue是什么？

vue就是一个当下最为主流的前端框架，用于构建用户界面的渐进式javascript框架

渐进式：先完成最基本的功能 开发应用 但是如果想开发复杂功能 那么就可以引入各种vue插件来完成（vue是一个自底向上逐层开发的一个框架）

谁开发的

尤雨溪

vue特点

1、组件化。实现了封装和重用，且组件间可以相互嵌套；2、轻量级。相对于其他框架，Vue学习成本低，简单易上手；3、虚拟 DOM。虚拟 dom 中存在 diff算法，是 cpu 密集型运算，占用内存较少，可以提高运行效率，并压缩运行时体积；4、Vue是一个MVVM框架，数据绑定。数据单项绑定（v-bind），单向指data中的值绑定到视图中，但视图中修改不会影响到data数据；双向绑定（v-model），数据发生变化会驱动视图的更新，视图的更新也会驱动数据的变化；5、单页面应用（SPA）。用户体验好，内容改变时不需要重新加载整个页面，不会进行多个 html 页面间的切换；服务器压力小等。

MVVM

MVVM是Model-View-ViewModel的简写

M --- model 模型==数据==变量 （只要今后听见了M 或者是模型 就直接想象成 data数据·）data数据·

V --- view 视图==页面==用户可以看见的界面 模板

VM --- viewModel 视图模型==用来关联数据与视图之前的桥梁 vue实例

Data Bindings 数据绑定 （按照上图描述 就是把model数据 ----》数据绑定 ----》绑定到页面上）

DOM Listeners dom监听 (按照上图描述 就是view页面的数据改变-----》dom监听------》反应到数据上)

HelloWord

淘宝镜像

安装淘宝镜像（ npm服务器在国外可能会导致网速很慢导致下载失败,可以使用淘宝镜像 当然不是必须要安装 ---- 如果安装了今后所有使用npm 在下载内容的时候 就要把npm 变成 cnpm 剩下都一样）

npm install cnpm -g --registry=https://registry.npm.taobao.org

检查是否安装成功

cnpm -v

安装成功显示如图下：

vue初体验

1.下载vue库文件 npm init -y （初始化） npm install --save vue@2 简写 ： npm i -S vue@2（下载）

2.新建html页面先把vue引用进来

3.编写如下代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- 1.先引用 -->
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- M       ---   model         模型==数据==变量

V       ---   view             视图==页面==用户可以看见的界面

VM   ---   viewModel 视图模型==用来关联数据与视图之前的桥梁 -->


<!-- 2创建视图层   V vue的根容器 根节点 今后把你的vue内容都写在这个根节点中-->
   <div id="demodiv">
       <h1>{{text}}</h1>
       <h1>{{num}}</h1>
       <h1>{{obj.name}}</h1>
       <h1>{{arr[4]}}</h1>
   </div>

 

   <script>
       // 3.创建vm层 ---》 就是vue实例
       new Vue({
           el:"#demodiv",//关联视图
           data:{//4 m层 模型数据
               text:"我是字符串",
               num:18,
               bool:true,
               obj:{
                   name:"xixi",
                   age:18
              },
               arr:[1111,22222,33333,4444,5555]
          }
      })
   </script>
</body>
</html>

多个vue实例

多个vue实例生效的就是对应的 视图

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
   <div id="demodiv">
       <h1>{{text}}</h1>
   </div>
   <div id="demodivb">
       <h1>{{text}}</h1>
   </div>
   <script>
     
       new Vue({
           el:"#demodiv",
           data:{
               text:"我是第一个",
           
          }
      })
       new Vue({
           el:"#demodivb",
           data:{
               text:"我是第2个",
           
          }
      })
   </script>
</body>
</html>

{{}}--模板语法--双大括号赋值法

在vue中{{}}被称之为模板语法 双花括号赋值法 vue数据插值 。。。。 作用：就是可以在双大括号中写入表达式 并且展示在页面中

语法:在你想展示数据的任何位置 {{表达式}} （表达式 通过计算可以返回结果的公式）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           <h1>{{num}}</h1>
           <!-- 因为{{表达式}}s所以运算符都可以写 -->
           <h1>{{num*2}}</h1>

           <h1>{{bool?"你好":"你坏"}}</h1>
           <!-- 建议不要在{{}}写太复杂的内容 -->
           <h1>{{text.toUpperCase().slice(1,5)}}</h1>

       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                   num:666,
                   bool:false,
                   text:"abcdefghiaslkdjaskldhalk"
              }
          })

       </script>


</body>
</html>

el与data的两种写法

$mount 手动挂载

Vue 的$mount()为手动挂载，在项目中可用于延时挂载（比如vue是一个渐进式的 在我们使用一些负载功能的时候 我们需要依赖很多后面会学到的vue插件 来完成 但是使用这些插件 我们必须先要把这些插件先挂载之后 在加载视图的关联 所以在这个时候我们会用到延迟健在 ），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
   <div id="demodiv">
       <h1>两种挂载方式</h1>
       <h1>{{text}}</h1>
   </div>

   <script>
     
      let v= new Vue({
           // el:"#demodiv",  
           data:{
               text:"我是一个变量"
          }
      })
       console.log(v);
       v.$mount("#demodiv")
     
   </script>
</body>
</html>

data函数式
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
   <div id="demodiv">
       <h1>两种挂载方式</h1>
       <h1>{{text}}</h1>
   </div>

   <script>
     
      let v= new Vue({
      //对象式写法  
           // data:{
           //     text:"我是一个变量"
           // }
           // 函数式写法
           data(){
               return {
                   text:"我是函数式变量"
              }
          }
      })
       console.log(v);
       v.$mount("#demodiv")
     
   </script>
</body>
</html>

指令

什么是html标签的属性？

通过写在html开标签中的 使用属性="属性值" 的这些东西 可以扩展标签的功能

什么是指令？

就是在vue中给html标签添加的带有v-前缀的特殊属性（在vue中 给html标签添加个一些特殊性功能属性）

v-model

作用 ： 就是给表单元素进行数据的双向数据绑定

双向绑定

视图改变模型也会改变

模型变视图也会随之改变

语法: <标签 v-model=""值/>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           <h1>v-model</h1>

           <input type="text" v-model="inputval"/>
           
           <h1>{{inputval}}</h1>

       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                  inputval:""
              }
          })

       </script>


</body>
</html>

双向绑定的原理

在vue中基于数据劫持--数据代理与发布者订阅者模式完成的

数据劫持：数据拦截 就是对data中的数据在初始化的时候监听起来(Object.defineProperty 来进行监听/代理) 当数据改变setter之后 vm就会知道 在视图改变getter 他就会通知模型你要修改了 模型改变了也会通知视图改变

发布者订阅者模式：就是一个一对多的关系 发布者就是数据提供者 订阅者就是页面展示的 一个发布者可以对应无数个订阅者 但是发布者改变了 所有订阅者也会改变

v-show

作用：控制dom元素的显示或者隐藏 v-show的显示和隐藏是通过css的dispaly方式来控制的

语法 v-show="布尔值" true显示 false隐藏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           <input type="checkbox" v-model="bool"/>{{bool?"勾选了":"没勾选"}}

          <h1 v-show="bool">我是站位的</h1>
       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                   bool:false
              }
          })

       </script>


</body>
</html>

v-on

作用：就是给vue的dom绑定事件的

语法: onclick v-on:click onchange v-on:change

传统写法(写法稍微麻烦点)： v-on:你的事件不加on="函数" v-on:click=”函数“

简写写法: @你的事件不加on="函数" @click="函数"

那今后工作用哪个 简写的函数 传统的 （想用那个用哪个）

注意：函数需要写在 与el data同级位置使用methods来进行包裹

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           <button v-on:click="fun()">点我触发函数</button>
           <button @click="fun()">点我触发函数简写写法</button>
       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                 
              },
               // 函数需要写在与el data同级的位置使用methods来进行包裹
               methods:{
                   fun(){
                       console.log("你好")
                  },
                   
              }
          })

       </script>


</body>
</html>

注意 函数中怎么使用data数据 使用this.变量名（this指向的就是vue实例）

 methods:{
                   fun(){
                       // console.log("你好")
                       console.log(this.text)
                       
                        console.log(this._data.text);
                  },
                   
              }

v-for

概念： 用来遍历数据 生成页面内容

语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           <!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据" -->
           <ul>
               <li v-for="(v,i) in arr">
                  {{v}}------{{i}}
               </li>
           </ul>
       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                   arr:["ez","Vn","MF","noc"]
              },
         
               methods:{
                 
                   
              }
          })

           
       </script>


</body>
</html>

遍历复杂数据

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           <!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据" -->
           <ul>
               <li v-for="(v,i) in arr">
                  {{v}}------{{i}}
               </li>
           </ul>

           <hr/>

           <table border="1">
               <tr v-for="(v,i) in obj">
                   <td>{{v.name}}</td>
                   <td>{{v.age}}</td>
               </tr>
           </table>
       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                   arr:["ez","Vn","MF","noc"],
                   obj:[
                      {name:"xixi1",age:181},
                      {name:"xixi2",age:182},
                      {name:"xixi3",age:183},
                      {name:"xixi4",age:184},
                      {name:"xixi5",age:185},
                      {name:"xixi6",age:186}
                  ]
              },
         
               methods:{
                 
                   
              }
          })

           
       </script>


</body>
</html>

key属性

可以在是用v-for的时候搭配使用 他的作用就是给便利出来的dom 起个唯一的名字 相当于我们的身份证号 通过添加了这个key属性可以增加我们在便利展示的时候生成dom元素的效率 （key里面是唯一的不建议使用我们便利出来的下标 因为如果一个页面有两次便利的话key的值就有可能相同）

v-bind 这个是初学者最容易忘记的 但是很重要

概念: 就是html的属性插入变量

语法：

传统写法： v-bind:html的属性="值"

简写写法: :html的属性="值"

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
       <div id="demodiv">
           
           <a v-bind:href="ahref">{{text}}</a>
           <a :href="ahref">{{text}}</a>

       </div>

       <script>

           new Vue({
               el:"#demodiv",
               data:{
                  text:"点我去百度",
                  ahref:"http://www.baidu.com"
              }
          })

       </script>


</body>
</html>

v-if全家桶

v-if

作用：就是对dom元素进行移除和添加

语法: 写在开标签中 true添加 false移除

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
       <div id="demoDiv">
           <h1>v-if</h1>
           <input type="checkbox" v-model="bool"/>{{bool}}
           <h1 v-show="bool">我是v-show的标签</h1>


           <h1 v-if="bool">我是v-if的标签</h1>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                   bool:true
              },
               methods:{

              }
          })
       </script>
</body>
</html>

v-if与v-show的区别

1.v-show是使用css的方式对dom元素进行显示和隐藏的 在频繁切换的时候效率更高 在初始化的时候对性能的损耗比较高

2.v-if是直接把这个dom元素移除或者是添加 在频繁切换的时候效率比较低 在初始化的时候对性能的损耗比较低

v-else

语法： 必须配合v-if使用 不能单独使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
       <div id="demoDiv">
           <h1>v-if</h1>
           <input type="checkbox" v-model="bool"/>{{bool}}
           <h1 v-if="bool">请您登录</h1>
           <h1 v-else>欢迎您尊敬的vip</h1>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                   bool:true
              },
               methods:{

              }
          })


         
       </script>
</body>
</html>

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
       <div id="demoDiv">
           <h1>v-else-if</h1>
           <select v-model="text">
               <option value="吃饭">吃饭</option>
               <option value="睡觉">睡觉</option>
               <option value="在吃饭">在吃饭</option>
               <option value="在睡觉">在睡觉</option>
         
           </select>


           <h1 v-if="text=='吃饭'">我是吃饭的dom</h1>
           <p v-else-if="text=='睡觉'">我是睡觉的dom</p>
           <em v-else-if="text=='在吃饭'">我是在吃饭的dom</em>
           <h2 v-else-if="text=='在睡觉'">我是在睡觉的dom</h2>
           <b v-else>我什么都没有干</b>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                   text:""
              },
               methods:{

              }
          })


         
       </script>
</body>
</html>

v-if与v-for能同时使用吗

当 v-if 与 v-for不推荐同时使用，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中,影响速度

如果必须要使用的话 变成一个嵌套关系

解决方式

1.使用computed处理数据在便利

2.使用v-show替代v-if

v-html

作用：就是把字符串标签插入到页面中

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
       <div id="demoDiv">
           <h1>v-html</h1>
          {{text}}
           <div v-html="text">

           </div>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                  text:"<h1>我是一个h1</h1>"
              },
               methods:{

              }
          })
       </script>
</body>
</html>

v-once

作用: 一次性插值 数据插入到页面中就不会被改变了

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
       <div id="demoDiv">
           <h1>v-once</h1>
           <input type="text" v-model="text">
           <h1>{{text}}</h1>
           <h1 v-once>{{text}}</h1>
           <h1>{{text}}</h1>
           <h1>{{text}}</h1>
           <h1>{{text}}</h1>
           <h1>{{text}}</h1>
           <h1>{{text}}</h1>
           <h1>{{text}}</h1>
           <h1>{{text}}</h1>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                   text:"我是默认值"
              },
               methods:{

              }
          })
       </script>
</body>
</html>

v-text

作用：向dom中插入文本内容 和{{}}作用一样

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
       <div id="demoDiv">
           <h1>v-text</h1>
           <h1>{{num}}</h1>

           <h1 v-text="num"></h1>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                   num:"你好么么哒！！！！^_!"
              },
               methods:{

              }
          })
       </script>
</body>
</html>

屏幕闪烁

当用户的设备和网络比较慢的时候可能就会在页面中吧{{}}全部展现出来 当网络恢复正常之后 有突然间显示ok

使用{{}}模板语法的话就会出现这个问题

解决方式

1.使用v-text （全部在页面中使用v-text指令很麻烦）

2.使用v-cloak指令 等待vue实例渲染完成之后在进行（这个指令是防止页面加载时出现 vuejs 的变量名而设计）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
   <style>
      [v-cloak]{
           display: none;
      }
   </style>
</head>
<body>
       <div id="demoDiv" v-cloak>
           <h1>v-text</h1>
           <h1>{{num}}</h1>

           <h1 v-text="num"></h1>
       </div>

       <script>
           new Vue({
               el:"#demoDiv",
               data:{
                   num:"你好么么哒！！！！^_!"
              },
               methods:{

              }
          })
       </script>
</body>
</html>

Star� ??
关注
Vue源码解析-$mount
踩坑之路
02-16 814
前言 Vue实例是通过mount方法进行挂载的，上一篇说了new Vue这篇分析一下mount挂载方法。mount的定义在Vue源码中有多处，这是因为Vue需要适配不同的平台以及构建方式，本文这里主要分析一下带compiler的mount实现方式。 找入口 因为是需要适配不同平台，mount方法定义在src/platform/web/entry-runtime-with-compiler.js下，代码如下： const mount = Vue.prototype.$mount Vue.prototype.$
Vue基础培训培训资料.ppt
06-06
MVVM（Model-View-ViewModel）模式是Vue.js的基础架构。在MVC（模型-视图-控制器）模式的基础上，MVVM将Controller改为了Presenter，并实现了双向数据绑定。在MVVM中，View的变化会自动反映到ViewModel，反之亦然。...
浅谈vue $mount()
热门推荐
驚鴻入梦
10-23 7万+
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。 具体见代码： 顺便附上vue渲染机制流程图：
vue $mount
UCZone
03-16 184
触发机制 自动方式 new Vue({ data: { msg: 'hi' }, template: '<div>{{ msg }}</div>', el: '#app' }) // vue/src/core/instance/init.js Vue.prototype._init = function (optio...
vue $mount
lishi9092的博客
01-03 422
刚刚接触vue ，查看router文档，发现 mount和el作用差不多，挂在数据的。mount 和 el 作用差不多，挂在数据的。mount和el作用差不多，挂在数据的。mount 是手动挂载，延迟些。el是自动挂载， 待续 继续研究 ...
Vue中的$mount 中
Oliver_web的博客
04-20 848
1.
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
vue面试——2021最全面的vue基础面试题.pdf
12-14
Vue面试2021最全面的Vue基础面试题.pdf 本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP等软件架构设计模式的区别等知识点。 1. Vue的基本原理 Vue实例创建时，Vue...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue中的.$mount(#app)手动挂载操作
01-21
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount(‘#app’)进行挂载。 配置了el属性： new Vue({ el:#app, router }); 如果没有配置el属性，可以使用手动挂载$mount(“#app”) new Vue({ router }).$mount('#app'); var vm = new Vue({ router }); vm.$mount('#app'); 补充知识：Vue手动挂载组件$mount()，实现js插入组件，替换组件 项目中有时候用到需要再页面中使用js插入一个vue组件，这时候就用到vue的
Vue $mount的用法
Judy1623
07-19 3万+
$mount的用法 1.$mount方法是用来挂载我们的扩展的 做一个扩展，然后用$mount的方法把扩展挂载到dom上 var judy = Vue.extend({ template:'&lt;p&gt;{{message}}&lt;/p&gt;', data: function () { return{ ...
Vue笔记_挂载点(el+$mount)
qq_43260366的博客
09-17 1553
​ 在Vue中不再和HTML直接进行交互了，而是将其挂载到DOM元素上,当数据发生变化的时候 数据变化->操作DOM->更改数据，但是操作DOM->更改数据是通过Vue内部 虚拟DOM 完成的，表现是数据驱动视图改变！// [2]没有设置挂载点，vue不知道将数据渲染到哪个视图上，将插值语法按照普通文本显示。2）若是希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素上；// [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
浅谈Vue.$mount()使用以及原理
m0_37941483的博客
05-15 1万+
一、作用 Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。 具体代码如下： new Vue({ store, router }).$mount('#app') vue渲染机制流程图： 二、原理 1.$mount函数的流程: 首先，提取出el所对应的...
Vue 的 el 属性和 $mount 方法详解
My_wife_QBL的博客
07-05 371
Vue 的el属性和$mount方法是两个重要的概念，它们用于将 Vue 实例挂载到 DOM 元素上。el属性用于指定 Vue 实例要挂载的 DOM 元素，而$mount方法提供了更灵活的挂载方式，可以在实例化后随时挂载到指定的 DOM 元素上。在同时使用el属性和$mount方法时，$mount方法的优先级更高。希望本文能够帮助你全面理解el属性和$mount方法的作用及优先级，并在实际开发中发挥其最大的价值。
vue源码分析（四）——vue 挂载（$mount）的详细过程
weixin_44784401的博客
10-27 862
vue源码分析（四）——vue 挂载（$mount）的详细过程
Vue $mount的用法以及render方法
11-03 1646
通俗说：$mount方法是用来挂载我们定义好的模板（扩展） $mount的函数在Vue的原型链上，Vue的任何实例都可以直接调用 vue挂载是替换对应节点 vue挂载方式有两中： //el属性 var app=new vue({ el:"#app", data(){} }) //$mount挂载 var app=new vue({ data(){} }) app.$mount("#app") 在新建项目时总会出现如下代码 new Vue({ router, store, render: h
knowLedge-Vue I18n 是 Vue.js 的国际化插件
最新发布
2301_76671906的博客
09-30 953
Vue 2 中使用 Vue I18n 插件实现中英文切换
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值