집 > 기사 > 웹 프론트엔드 > Vue.js의 가장 완벽한 사용법에 대한 자세한 설명

Vue.js의 가장 완벽한 사용법에 대한 자세한 설명

小云云원래의: 2017-12-21 13:20:095399검색

Vue.js는 뷰 레이어에만 초점을 맞추고 상향식 증분 개발 디자인을 채택하는 진보적인 프레임워크입니다. 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 결합된 뷰 구성 요소를 달성하는 것입니다. Vue는 배우기 매우 쉽습니다. 이 튜토리얼은 Vue 2.1.8 버전 테스트를 기반으로 합니다. 프로그래밍 분야에서 매우 인기가 많은 글입니다. Vue.js의 자세한 사용법을 주로 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

먼저 Vue를 살펴보겠습니다.

　 Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 기본적으로 최소 비용, 점진적으로 채택 가능한 디자인을 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있습니다. 반면 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수도 있습니다. 따라서 Vue는 실제로 매우 강력합니다.

1. Vue.js 설치 및 템플릿 구문

Vue 사용은 매우 간단합니다. Vue.js를 직접 다운로드하거나 Vue.min.js를 가져와 사용할 수 있습니다.

1-1 템플릿 구문

　 Vue.js는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있습니다.

　Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 선언적으로 데이터를 DOM에 렌더링할 수 있는 시스템입니다.

　 응답 시스템과 결합하여 애플리케이션 상태가 변경되면 Vue는 구성 요소를 다시 렌더링하는 데 드는 최소 비용을 지능적으로 계산하고 이를 DOM 작업에 적용할 수 있습니다.

1.html 템플릿

html 템플릿: DOM 기반 템플릿, 템플릿은 구문 분석 가능하고 유효한 HTML입니다.

보간:

텍스트: "Mustache" 구문 사용(중괄호) {{ 값 }} 함수: 교체 인스턴스의 속성 값입니다. 값이 변경되면 보간된 내용이 자동으로 업데이트됩니다. 대신 v-text="value"를 사용할 수도 있습니다.

　　<p>{{ value }}<p> 等价于 <p v-text="value"></p>

　 기본 HTML: 이중 중괄호로 출력된 텍스트는 html 태그를 구문 분석하지 않습니다. 즉, 인스턴스의 데이터가 html 태그인 경우 파싱이 불가능하고 직접 출력됩니다. 이때 구문 분석을 하려면 대신 v-html="value" 를 사용하면 됩니다.

new Vue({
  data:{
    value: `<span>我是一个span标签</span>`
  }
});
<p>{{ value }}<p>  页面展示 => <span>我是一个span标签</span> 
<p v-html="value"><p>  页面展示 => 我是一个span标签

때때로 일부 네트워크 지연 및 기타 이유로 인해 사용자에게 {{ xxx }}가 먼저 표시된 다음 데이터가 표시된다는 점에 유의해야 합니다. 이 효과를 피하려면 대신 v-text="xxxx"를 사용할 수 있습니다.

속성: 변경 사항에 응답하려면 바인딩에 v-bind를 사용하세요.

Title

=> 여기에 표시된 것은 데이터의 부울 값인 경우 빨간색 클래스가 추가됩니다. false인 경우 red 클래스를 제거하고 javascript 표현식을 사용하면 간단한 표현식을 작성할 수 있습니다. (간단한 삼항 연산은 가능하지만 if 문은 작성할 수 없습니다.) 앞으로 계산된 속성이 있을 것입니다.

{ 1+2 }
{ true? "yes":"no" }

2. 문자열 템플릿

템플릿 문자열

tempalte => 옵션 객체의 속성

템플릿은 마운트된 요소를 대체합니다. 마운트된 요소의 내용은 무시됩니다. 루트 노드는 하나만 있습니다. 스크립트 태그 쌍에 HTML 구조를 작성하고 type="x-template"을 설정합니다.

<body>
  <p id="box">

  </p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var str = '<h2>hello pink!</h2>'
    var vm = new Vue({
      el: '#box',
      template: str
    });
  },false);
</script>

은 가중치가 상대적으로 높음을 나타냅니다. 마운트 지점을 직접 "교체"하고 원본 HTML을 교체하여 표시합니다.

//代码片段这个就是利用script标签对内定义模版，局限性：不能跨文件使用，一个页面中可以使用
<body>
  <p id="box">

  </p>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
  <p>我是一个p标签</p>
</script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#str'
    });
  },false);
</script>

Vue 인스턴스, 각 애플리케이션은 Vue 생성자를 통해 루트 인스턴스(루트 인스턴스)를 생성하여 New Vue(옵션 개체)를 시작합니다. 매달린 요소, 데이터, 템플릿, 메서드 등이 포함된 옵션 개체를 전달해야 합니다.

el: 요소 선택기 마운트 --- String|HtmlElement

data: 프록시 데이터 --- Object|Function

methods: 메서드 정의 --- Object

Vue 프록시 데이터 데이터, 각 vue 인스턴스는 해당 데이터를 프록시합니다. 개체에서 이러한 프록시 속성은 반응합니다. 새로 추가된 속성은 반응하지 않으며 변경 후 보기가 업데이트되지 않습니다.

Vue 인스턴스의 자체 속성과 메서드는 $el, $data와 같이 "$"로 시작하는 자체 속성과 메서드를 노출합니다. . .

var vm = new Vue({
    el: '#app',
    data: {
     message: 'hello,Datura!!!'
    }，
    methods: {
      test (){
        alert(1);
      }
    },
    compontents:{
    //这里存放组件
    }
   });
 /* vm就是new出来的实例 */
 console.log(vm.$data);//也就是数据data，后面还有很多挂载在vm（new出来的）实例上的属性
//代码片段放在template标签里，并给一个id名
<body>
  <template id="tem">
    <p>我是template</p>
  </template>
  <p id="box">

  </p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#tem'
    });
  },false);
</script>

3. 템플릿 - 렌더링 기능

render 기능은 편집기와 매우 유사합니다.

render => 옵션 개체 속성

데이터 개체 속성

class: {}, => 绑定class，和v-bind:class一样的API
style: {}, => 绑定样式，和v-bind:style一样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot作用域
slot: {}, => 定义slot名称 和组件有关系，插曹
key: "key", => 给元素添加唯一标识
ref: "ref", => 引用信息
2Vue.js的条件、循环语句
2-1条件语句
v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
v-show ：根据值的真假，切换元素的display属性；
v-else ：条件都不符合时渲染；
v-else-if ：多条件判断，为真则渲染；

1. 조건부 판단은 v-if 명령을 사용합니다.

<p id="app">
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
   <p>哈哈哈，打字辛苦啊！！！</p>
  </template>
</p>  
<script>
new Vue({
 el: '#app',
 data: {
  seen: true,
  ok: true
 }
})
</script>

여기서 v-if 명령어는 표시된 표현식의 값(true 또는 false)을 기반으로 p 요소를 삽입할지 여부를 결정합니다.

2. v-else

v-else 명령을 사용하여 v-if에 "else" 블록을 추가할 수 있습니다.

숫자를 무작위로 생성하고 0.5보다 큰지 확인한 다음 해당 정보를 출력합니다. :

<p id="app">
  <p v-if="Math.random() > 0.5">
   Sorry
  </p>
  <p v-else>
   Not sorry
  </p>
</p>
  
<script>
new Vue({
 el: '#app'
})
</script>

3. v-show

v-show 명령을 사용하여 조건에 따라 요소를 표시할 수도 있습니다.

<p id="app">
  <h1 v-show="ok">Hello!</h1>
</p>
<script>
new Vue({
 el: '#app',
 data: {
  ok: true
 }
})
</script>

4 v-else-if

v-else-if가 2.1.0에 추가되었습니다. 이름에서 알 수 있듯이 v-if -if 블록의 else로 사용됩니다. 체인에서 여러 번 사용할 수 있습니다:

유형 변수의 값을 판단합니다:

<p id="app">
  <p v-if="type === &#39;A&#39;">
   A
  </p>
  <p v-else-if="type === &#39;B&#39;">
   B
  </p>
  <p v-else-if="type === &#39;C&#39;">
   C
  </p>
  <p v-else>
   Not A/B/C
  </p>
</p> 
<script>
new Vue({
 el: '#app',
 data: {
  type: 'C'
 }
})
</script>

[v-show 사용 및 비교, v-if]

① v-show: 요소의 표시 속성을 그에 따라 전환합니다. ;

v-show 요소는 항상 렌더링되고 DOM에 유지됩니다.

v-show는 템플릿 구문을 지원하지 않습니다.

② v-if는 조건부 블록이 전환 중에 조건부 블록 내의 이벤트 리스너와 하위 구성 요소를 적절하게 삭제하고 다시 빌드하도록 보장하기 때문에 진정한 조건부 렌더링입니다.

③ v-if有更高的切换消耗而v-show有更高的初始渲染消耗。

如果需要频繁切换使用v-show更好，如果在运行时条件不大可能改变，使用v-if比较好

2-2 循环语句 v-for

① 语法：v-for="x in items"

　　　　x是索引；items是数组，这样进行遍历

② v-for循环是不断创建新的标签，标签里的内容，我们决定，一般都是放在数组里，然后遍历显示出来。也可以放对象，遍历对象。

③ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

<body>
  <p id="app">
    <ul>
      <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循环出来的列表项
    </ul>
  </p>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#app',
      data:{
        fruitsArr:['apple','banana','orage','pear']  //数据源
      }
    });
  },false);
</script>

总结

以上所述是小编给大家介绍的Vue.js用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

学完本文之后相信大家对Vue.js有一个更深的了解，大家觉得不错的话就收藏起来吧。

Vue.js의 가장 완벽한 사용법에 대한 자세한 설명

Title

관련 기사