이 글은 Vue의 기본 소개와 Vue의 기본 사용법을 포함하여 Vue에 대한 자세한 기본 학습 지식을 정리했습니다. 또한 기본 예제에 대한 자세한 설명도 제공됩니다.

1. Vue 기본 소개

1. Vue.js란 무엇입니까

• Vue.js는 현재 가장 인기 있는 프런트엔드 프레임워크이며, React는 웹사이트 개발 외에도 React 모바일 앱도 개발할 수 있습니다. Vue 구문은 모바일 앱 개발에도 사용할 수 있으며 Weex를 사용해야 합니다.)
• Vue.js는 메인스트림 프레임워크와 함께 프론트엔드 중 하나입니다. Angular.js와 React.js는 세 가지 주류 프론트엔드 프레임워크가 되었습니다!
• Vue.js는 사용자 인터페이스 구축을 위한 프레임워크로, 뷰 레이어에만 중점을 둡니다. 시작하기 쉬울 뿐만 아니라 타사 라이브러리나 기존 프로젝트와도 쉽게 통합할 수 있습니다. (Vue는 대규모 프로젝트 개발을 위해 통합할 수 있는 타사 클래스 라이브러리를 지원합니다.)
• 프론트엔드의 주요 작업은? MVC의 V 레이어를 주로 담당합니다. 주요 작업은 프런트 엔드 페이지 효과를 만들기 위한 인터페이스를 다루는 것입니다.

2. 개발 효율성을 높이기 위해 널리 사용되는 프레임워크를 배워야 하는 이유는 다음과 같습니다. 시간은 효율성입니다.

기업에서는 프레임워크를 사용하여 개발 효율성을 높일 수 있습니다.
• 개발 효율성 향상의 역사: 기본 JS -> ; Angular.js / Vue.js(불필요한 DOM 작업을 줄이는 데 도움이 될 수 있음, 렌더링 효율성 향상, 양방향 데이터 바인딩 개념 [프레임워크에서 제공하는 지침을 통해 프런트엔드 프로그래머는 비즈니스에만 신경 쓰면 됩니다.
• Vue의 핵심 개념은 사용자가 더 이상 DOM 요소를 작동하지 않도록 하여 사용자의 손을 자유롭게 하고 프로그래머가 비즈니스 로직에 더 많은 시간을 할애할 수 있도록 하는 것입니다.
• 3.Node 백엔드의 MVC와 프런트엔드의 MVVM의 차이점

MVC는 백엔드의 계층화된 개발 개념입니다.

MVVM은 프런트엔드의 개념입니다. 뷰 레이어는 주로 뷰 레이어의 분리, 즉 MVVM에 중점을 둡니다. 프런트 엔드 뷰 레이어는 Model, View, VM ViewModel의 세 부분으로 나뉩니다.
• MVC가 있는데 왜 MVVM이 필요한가요? M, V, VM으로 나뉘는데, 그 중 VM이 MVVM의 핵심 아이디어이다. 왜냐하면 VM은 M과 V를 연결해주기 때문이다.
• 프런트 엔드 페이지에서 MVVM을 사용하는 아이디어는 주로 데이터의 양방향 바인딩을 제공하는 MVVM을 개발할 수 있도록 하는 것입니다. 양방향 바인딩은
VM

에서 제공됩니다. Vue

1. 첫 번째 경우
 코드는 다음과 같습니다.

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>

로그인 후 복사

코드의 주석에 주목하세요!

페이지를 방문하세요

2. 공통 명령

Command

Description

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

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

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>

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>

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>

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>

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>

위 내용은 돈을 잃지 않고 Vue에 대한 기본 튜토리얼(예제와 함께 자세한 설명 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!