Tutoriel de base sur Vue sans perdre d'argent (avec explications détaillées avec exemples)

Cet article a compilé une connaissance de base détaillée de Vue, qui comprend l'introduction de base de Vue et l'utilisation de base de Vue. Il apporte également des explications détaillées sur des exemples de base. J'espère qu'il sera utile à tout le monde !

1. Introduction de base à Vue

1. Qu'est-ce que Vue.js

• Vue.js est actuellement le framework front-end le plus populaire, et React est le framework front-end le plus populaire (en En plus du développement de sites Web, React Vous pouvez également développer des applications mobiles. La syntaxe Vue peut également être utilisée pour le développement d'applications mobiles, et vous devez utiliser Weex)
• Vue.js est l'un des frameworks grand public front-end, avec Angular.js et React.js, et sont devenus trois frameworks front-end grand public !
• Vue.js est un framework pour créer des interfaces utilisateur, se concentre uniquement sur la couche de vue Il est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. (Vue prend en charge des bibliothèques de classes tierces qui peuvent être intégrées pour le développement de projets à grande échelle)
• Le travail principal du front-end ? Principalement responsable de la couche V dans MVC ; la tâche principale est de gérer l'interface pour créer des effets de page frontale

2 Pourquoi devrions-nous apprendre les frameworks populaires

• Afin d'améliorer l'efficacité du développement, les entreprises : Dans. les entreprises, le temps c'est l'efficacité.L'efficacité c'est de l'argent;
• Dans les entreprises, l'utilisation de frameworks peut améliorer l'efficacité du développement
• L'histoire du développement pour améliorer l'efficacité du développement : bibliothèques de classes natives telles que Jquery -> -> Angular.js / Vue.js (peut nous aider à réduire les opérations DOM inutiles ; à améliorer l'efficacité du rendu ; le concept de liaison de données bidirectionnelle [Grâce aux instructions fournies par le framework, nos programmeurs frontaux n'ont qu'à se soucier de la logique métier des données et ne se soucient plus de la façon dont le DOM est rendu])
• Dans Vue, un concept central est de permettre aux utilisateurs de ne plus utiliser les éléments du DOM, libérant ainsi les mains des utilisateurs et permettant aux programmeurs de passer plus de temps à se concentrer sur logique métier ;

3.Node La différence entre MVC dans (back-end) et MVVM dans le front-end

• MVC est le concept de développement en couches du back-end
• MVVM est le concept du front ; -couche de vue finale, se concentrant principalement sur la séparation de la couche de vue, c'est-à-dire : MVVM La couche de vue frontale est divisée en trois parties : Modèle, Vue, VM ViewModel
• Pourquoi avez-vous besoin de MVVM quand vous avez MVC ? Il est divisé en M, V et VM, parmi lesquels VM est l'idée centrale de MVVM : parce que VM connecte M et V.
L'idée d'utiliser MVVM dans la page front-end est principalement de nous permettre de développer MVVM pour fournir une liaison bidirectionnelle de données. La liaison bidirectionnelle est fournie par

VM

2. Utilisation de base de. Vue

Cette fois, l'outil de codage est Visual Studio Code, les amis peuvent le télécharger et l'installer eux-mêmes. 1. Le premier cas

 Le code est le suivant :

nbsp;html>
  <meta>
  <meta>
  <meta>
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script></script>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- 3. Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <p>
    </p><p>{{ msg }}</p>
  

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: &#39;#app&#39;,  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
      msg: &#39;欢迎学习Vue&#39; // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>

Faites attention aux commentaires dans le code !

Visitez la page

2. Commandes communes

Commande

Description

{ Expression d'interpolation Résolvez le problème de clignotement des expressions d'interpolationv-textComme l'interpolation, il utilise également des variables dans vue, mais il n'y a pas de problème de clignotement par défaut, mais le contenu original sera écrasé et l'interpolation ne le sera pasv-html Afficher le contenu du HTMLv-bindLe mécanisme de liaison d'attribut fourni par Vue, l'abréviation est ':'v-onLe mécanisme de liaison d'événement fourni par Vue , l'abréviation est :'@'

2.1 插值表达式

  在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取，如下

  <p>
  	<!-- 插值表达式获取vue中的msg信息 -->
    </p><p>{{ msg }}</p>
  

  <script>
    var vm = new Vue({
      el: &#39;#app&#39;, 
      data: {
        msg: &#39;欢迎学习Vue&#39; 
      }
    })</script>

注意：插值表达式有闪缩的问题
我们以站点的方式启动，Ctrl+shift+p ：在输入中搜索 如下

访问地址：http://localhost/xxx.html

加载完成就会变好！这就是插值闪烁的问题

2.2 v-cloak

  v-cloak指令可以解决上面插值闪烁的问题，如下：其实利用的就是当插值没有被加载出来的是通过 style属性将内容给隐藏了。

nbsp;html>
  <meta>
  <meta>
  <meta>
  <title>Document</title>
  <style>
    [v-cloak] {
       display: none; 
    }
  </style>
  <p>
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    </p><p>++++++++ {{ msg }} ----------</p>
  
  <script></script>

  <script>
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {
        msg: &#39;hello&#39;,
      }
    })
  </script>

2.3 v-text

  和插值差不多，也可以从vue对象中获取信息，v-text默认是没有闪烁问题的，但是会覆盖掉原有的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空，如下

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script></script>
    <p>
        </p><p>----{{msg}}=====</p>
        <p></p>
        <p>*******</p>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        })
    </script>

2.4 v-html

  默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示，如果我们要显示标签的语义，那么需要使用v-html指令如下

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script></script>
    <p>
        </p><p>----{{msg}}=====</p>
        <p></p>
        <p>*******</p>
        <p></p>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<h3>hello vue"
            }
        })
    </script>

2.5 v-bind

  v-bind是 Vue中，提供的用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式，可以做类似的处理，见代码。

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script></script>
    <p>
        <input><br>
        <input>
        <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
        <input>
        <!-- v-bind 中，可以写合法的JS表达式-->
       <input>
    </p>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                title:"title123"
            }
        })
    </script>

2.6 v-on

  Vue 中提供了 v-on: 事件绑定机制,具体使用如下:

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script></script>
    <p>
        <input>
        <!--还可以缩写为 @-->
        <input>
    </p>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<h3>hello vue"
            },
            methods:{
                show:function(){
                    alert(&#39;hello&#39;)
                }
            }
        })
    </script>

更多编程相关知识，请访问：编程入门！！

	{}}
v-cloak

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!