vue.js1.0 버전 시작하기

vue

　vue.js는 대화형 웹 인터페이스를 구축하기 위한 라이브러리입니다. 간단하고 유연한 API를 통해 MVVM 데이터 바인딩 및 구성 가능한 구성 요소 시스템을 제공합니다. 기술적으로 말하면 Vue.js는 MVVM 패턴의 뷰 모델 계층에 중점을 두고 양방향 데이터 바인딩을 통해 뷰와 모델을 연결합니다. 실제 DOM 조작 및 출력 형식은 지시문과 필터로 추상화됩니다. 다른 MVVM 프레임워크에 비해 Vue.js는 시작하기가 더 쉽습니다.

Vue.js는 웹 대화형 인터페이스를 만들기 위한 라이브러리입니다. 간단하고 유연한 API를 통해 데이터 기반 UI 구성 요소를 만들 수 있습니다.

 <br>

Vue1.0 공통 구문

<span style="font-size: 18px"><code class="hljs oxygene"><span class="hljs-keyword">var vm = <span class="hljs-keyword">new Vue(<span class="hljs-comment">{

　　el: "选择器",  挂载到页面的那个元素里，即确定vue的作用范围  外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

　　a: '',  //自定义属性  外部可通过vm.$options访问

　　data: { }, <span class="hljs-comment">//实例属性都在这里面，外部通过实例名,即vm.$data调用

　　computed: <span class="hljs-comment">{ }, <span class="hljs-comment">//计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

　　<span class="hljs-function"><span class="hljs-keyword">method: <span class="hljs-comment">{ }, <span class="hljs-comment">//实例方法都在这里

　　watch: <span class="hljs-comment">{ }, <span class="hljs-comment">//对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用

　　<span class="hljs-comment">//注意：以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

　　<span class="hljs-comment">//在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入：　　　

　　created: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 实例已经创建 }

　　<span class="hljs-title">beforeCompile: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之前 }

　　<span class="hljs-title">compiled: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之后；即模板占位符被是内容替换}

　　<span class="hljs-title">ready: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模板插入到文档中了；相当于window.onload }//<span class="hljs-title">Vue2.0已改为<span class="hljs-title">mounted

　　注意： 以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用 实例名.$<span class="hljs-title">destory<span class="hljs-params">() 才执行

　　<span class="hljs-title">beforeDestroy: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之前 }

　　<span class="hljs-title">destroyed: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之后 }

});<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>

Vue 개체 분석:

1, 개체 속성

　data, el, 옵션, watch, 계산됨

2, 개체 방법

라이프 사이클 후크 기능

3, 객체 인스턴스 액세스 및 호출 속성과 메소드

A: 인스턴스 속성 호출: $options, $el, $data, $watch

여기 $watch에 중점을 둡니다.

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 });     --浅度监听

모니터링되는 속성이 기본 데이터 유형인 경우 위의 사용법에는 문제가 없습니다. 그러나 모니터링되는 속성이 객체인 경우 객체 내부의 데이터는 다음과 같습니다. 위의 쓰기 방법은 모니터링할 수 없습니다. 세부적인 모니터링을 위해서는 매개변수가 필요합니다.

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 },{deep: true});　　--深度监听

B: 인스턴스 메소드 호출: $mount(), $log(), $ destroy()

4. 내장 필터 및 사용자 정의 필터

A: Vue의 내장 필터는 다음과 같습니다:

　 대문자(첫 글자를 대문자), 대문자, 통화, json(동등) to JSON.Stringify() ), 디바운스(초 수, 이벤트와 일치, 실행 지연)

　　limitBy(매개변수 1, 매개변수 2) 일반적으로 사용되는 단어 v-배열의 경우, 출력 수 제한 출력할 위치를 나타냅니다. 매개변수 2는 order

　　filterBy(매개변수)가 데이터를 필터링하고, 매개변수가 포함된 데이터를 필터링하고, 입력 입력 상자와 협력하고, 입력 변수를 통해 필터링하는 출력을 나타냅니다. , 핫 검색 효과를 얻습니다

　　orderBy(매개변수)는 데이터를 정렬하는데, 매개변수가 1이면 양의 순서로, -1이면 역순으로 정렬됩니다. ? 따라서 1과 -1은 기본적으로 일반적인 상황입니다

　B: 사용자 정의 필터 구문(타임스탬프 처리에 더 일반적으로 사용되는 사용자 정의 필터)

<span style="font-size: 18px"><code class="hljs actionscript">Vue.filter(<span class="hljs-string">"过滤器名称",<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(参数<span class="hljs-rest_arg">...){

　　　　...  //业务处理

　　　　return <span class="hljs-rest_arg">...;

　　});<br></span></span></span></span></span></span></code></span>

5, 내장 지침 및 사용자 정의 지침

　 지침은 다음과 같습니다. HTML 구문의 확장이며 v-로 시작해야 합니다. 일반적으로 우리 입에서 말하는 명령어는 실제로 속성 명령어를 나타냅니다. 다음 C는 속성 명령어와 다릅니다.

　A: 지침과 함께 제공됩니다: v-if, v-show, v-else, v-module, v-text, v-html, v-bind, v-on, v-el, v-cloak...

여기에서는 v-text 및 v-cloak에 중점을 둡니다. 템플릿에서 인스턴스 속성 데이터를 호출할 때 일반적으로 이 {{ 인스턴스 속성}}을 수행하므로 네트워크 속도가 상대적으로 느릴 때 페이지가 이 상황을 처리하는 방법에는 두 가지가 있습니다:

　　1. 더 큰 단락 요소 명령에 v-clock을 사용하고, 요소의 CSS를 설정합니다: 디스플레이:none

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ient in "는 v-text/v-html을 사용합니다. Vue2.0도 이를 지원하며 중괄호 방법이 취소될 수 있습니다

　B: 사용자 정의 명령 구문:

　Vue.directive("指令名称",function(..){
　　　　this.el.style.background = 'red';   //这里的this代表new出来的实例，this.el代表原生的dom元素
　　});

템플릿에 v-command 이름을 사용하거나 v-command name="parameter"를 사용하면 명령 호출 시 매개변수를 전달할 수 있습니다

　명령 이름 정의 시 필요하지 않음 v- 추가, v- 추가 템플릿을 사용할 때

C: 사용자 정의 요소 명령(거의 쓸모가 없다고 합니다. 무시해도 됩니다. 달성하려는 효과가 구성 요소를 능가했습니다.)

 Vue.elementDirective("自定义元素名称",{
　　　　bind: function() {};
　　});

B가 아닙니다. 대소문자 구문은 지원되지만 B 대소문자 구문도 기본적으로 바인딩됩니다

6, 사용자 정의 키보드 정보

Vue.directive('on'),keyCodes.ctrl = 17;  //17是ctrl的键码  等号前的ctrl是定义ctrl的别名，可以随便取，实际绑定的就是键盘上的ctrl键

template call @keydown.ctrl = "custom method"

위 내용은 vue.js1.0 버전 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!