vue.js 사용법에 대한 포괄적인 요약

Vue.js는 현재 매우 인기 있는 JavaScript MVVM 라이브러리로, 데이터 기반 및 구성 요소 기반 아이디어로 구축되었습니다. Angular.js와 비교하여 Vue.js는 더 간단하고 이해하기 쉬운 API를 제공하므로 Vue.js를 빠르게 시작하고 사용할 수 있습니다. 다음 글에서는 주로 vue.js 사용에 대한 관련 요약을 소개합니다. 도움이 필요한 친구들은 참고할 수 있습니다.

1. Vue.js 컴포넌트

vue.js는 컴포넌트를 빌드하는 데 사용됩니다

Vue.component('componentName',{ /*component*/ })；

여기서 한 가지 주의할 점은 먼저 컴포넌트를 등록해야 한다는 것입니다. 즉,

Vue.component('mine',{
  template:'#mineTpl',
  props:['name','title','city','content']
 });

 var v=new Vue({
 el:'#vueInstance',
 data:{
  name:'zhang',
  title:'this is title',
  city:'Beijing',
  content:'these are some desc about Blog'
 }
});

역순으로 하면 오류가 보고됩니다. 이는 구성 요소가 먼저 사용되었지만 구성 요소가 등록되지 않았음을 의미하기 때문입니다.

webpack이 오류를 보고한 후 webpack --display-error-details를 사용하여 문제를 해결하세요.

2. keep-alive 명령

보시다시피 데모 vue-router에는 keep-alive가 작성되어 있으며 keep-alive의 의미는 다음과 같습니다.

전환된 구성 요소를 메모리에 유지하면 해당 상태를 유지하거나 다시 렌더링을 피할 수 있습니다. . 이를 위해 keep-alive 지시어를 추가할 수 있습니다

<component :is=&#39;curremtView&#39; keep-alive></component>

3. CSS가 현재 구성 요소에서만 작동하도록 만드는 방법

각 vue 구성 요소에서 자체 정의할 수 있습니다 css.js, 구성 요소에 작성된 CSS가 현재 구성 요소에만 영향을 미치도록 하려면 스타일에 범위를 지정하기만 하면 됩니다. 즉,

<style scoped></style>

4. vuejs는 루프에 이미지를 삽입합니다.

in 루프 작성시 다음 코드를 작성하세요:

<p class="bio-slide" v-for="item in items"> 
 <img src="{{item.image}}">
</p>

이때 콘솔에 경고가 뜹니다
[Vue Warn]: src="{{item .image}}": "src" 속성에 보간하면 404 요청이 발생합니다. 대신 v-bind:src를 사용하세요. 즉, "src" 속성을 보간하면 404 요청이 발생합니다. 대신 v-bind:src를 사용하세요.

따라서 다음으로 바꾸세요:

<p class="bio-slide" v-for="item in items"> 
 <img v-bind:src="item.image">
</p>

공식 성명에 따르면 여기에서 집중해야 합니다. v-bind는 더 이상 작성할 때 {{}}를 사용할 수 없습니다.

<a v-bind:href="url" rel="external nofollow" ></a>

여기 href는 요소의 href 속성을 표현식 url의 값에 바인딩하도록 v-bind 지시문에 지시하는 매개변수입니다. 기능 보간 href="{{url}}" rel="external nofollow"를 사용하면 동일한 결과를 얻을 수 있다는 것을 눈치챘을 것입니다. 이는 정확하며 내부 기능 보간은 실제로 v-bind 바인딩으로 변환됩니다.

5. Vue 인스턴스의 동적 속성에 값을 바인딩합니다.

라디오 버튼, 확인란 및 선택 상자 옵션의 경우 v-model에 바인딩된 값은 일반적으로 정적 문자열( 확인란의 경우 논리 값입니다):

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

하지만 때로는 vue 인스턴스의 동적 속성에 값을 바인딩하고 싶을 때도 있습니다. 이 경우 v-bind를 사용하여 구현할 수 있습니다. 이 속성의 값은 문자열일 수 없습니다. 예를 들어, Checkbox 값을 vue 인스턴스의 동적 속성에 바인딩합니다:

<input 
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
<p>{{toggle}}</p>

여기에 바인딩한 후에는 클릭 후 true 및 false에서 a 및 b로 전환할 수 있다는 의미는 아닙니다. 여기에 정의된 동적 a와 b는 스코프에 있는 a와 b이며 이때

//当选中时
vm.toggle === vm.a
//当没选中时
vm.toggle === vm.b

로 직접 표시할 수 없으므로 이때 데이터에 a와 b를 정의해야 합니다.

new Vue({
 el:'...',
 data:{
 a:'a',
 b:'b' 
 }
});

Six , 조각 인스턴스

다음 상황에서는 인스턴스가 조각 인스턴스로 전환됩니다.

1. 템플릿에 여러 개의 상단이 포함되어 있습니다. 레벨 요소.

2. 템플릿에는 일반 텍스트만 포함되어 있습니다.

3. 템플릿에는 다른 구성 요소만 포함됩니다(다른 구성 요소는 조각 인스턴스일 수 있음).

4. 템플릿에는 또는 vue-router의

5. 템플릿 루트 노드에는 v-if 또는 v-for와 같은 흐름 제어 지시문이 있습니다.

이러한 경우에는 DOM 콘텐츠를 조각으로 처리하는 알 수 없는 수의 최상위 요소가 있는 인스턴스가 허용됩니다. 조각 인스턴스는 여전히 콘텐츠를 올바르게 렌더링합니다. 그러나 루트 노드가 없으며 해당 $el은 빈 텍스트 노드(개발 모드의 주석 노드)인 앵커 노드를 가리킵니다.

그러나 더 중요한 것은 바인딩할 루트 요소가 없기 때문에 흐름 제어가 아닌 지시문, prop이 아닌 속성 및 구성 요소 요소의 전환이 무시됩니다.

<!-- 不可以，因为没有根元素 -->
<example v-show="ok" transition="fade"></example>
 
<!-- props 可以 -->
<example :prop="someData"></example>
 
<!-- 流程控制可以，但是不能有过渡 -->
<example v-if="ok"></example>

조각 인스턴스 용도도 있지만 일반적으로 구성 요소에 루트 노드가 있는 것이 더 좋습니다. 루트 노드는 구성 요소 요소의 지침과 속성이 올바르게 변환될 수 있도록 보장하고 성능이 약간 더 향상됩니다.

7. 경로 중첩

라우트 중첩은 전체 페이지를 점프하는 대신 다른 구성 요소를 구성 요소로 렌더링합니다. 페이지로 이동하려면 경로를 구성할 때 페이지를 루트 구성 요소로 렌더링해야 합니다.

var App = Vue.extend({ root });
router.start(App,'#app');

여기서 먼저 루트 구성 요소를 등록하여 경로를 구성합니다. 렌더링된 다음 #app과 일치하는 요소에 루트 구성 요소가 마운트됩니다.

8. 조건에 따라 다른 텍스트를 표시하는 다중 방법 구현

v-if, v-else는 조건부 선택을 구현할 수 있지만 다중 연속 조건부 선택인 경우에는 계산된 계산된 속성을 사용해야 합니다. 예를 들어, 입력 상자에 아무것도 쓰여 있지 않을 때 'empty' 문자열을 표시하고, 그렇지 않은 경우 입력 상자에 내용을 표시하려면 코드는 다음과 같습니다.

<p id="test">
 <input type="text" v-model="inputValue">
 <h1>{{changeVaule}}</h1>
</p>
new Vue({
 el:'#test',
 data:{
 changeVaule:'123'
 },
 computed :{
 changeVaule:function(){
  if(this.inputValue!==''){
  return this.inputValue;
  }else{
  return 'empty';
  }
 }
 }
});

9. Vuejs 변경 감지 문제

1. 배열 감지

JavaScript 제한으로 인해 vuejs는 다음 배열의 변경 사항을 감지할 수 없습니다.

vm.item[0]=과 같은 설정 요소를 직접 색인화합니다. {};

vm.item.length와 같은 데이터 길이를 수정합니다.

문제 1을 해결하기 위해 Vuejs는 관찰 배열을 확장하고 여기에 $set() 메서드를 추가합니다.

// 与 `example1.items[0] = ...` 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})

问题2，需要一个空数组替换items。

除了$set() ，vuejs也为观察数组添加了$remove()方法，用于从目标数组中查找并删除元素，在内部调用了splice() 。

因此，不必：

var index = this.items.indexOf(item)
if (index !== -1) {
 this.items.splice(index, 1)
}

只需：

this.items.$remove(item);

2.检测对象

受ES5的显示，Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter，所以属性必须在data对象才能让Vuejs转换它，才能让它是响应的，例如：

var data = { a: 1 }
var vm = new Vue({
 data: data
})
// `vm.a` 和 `data.a` 现在是响应的
 
vm.b = 2
// `vm.b` 不是响应的
 
data.b = 2
// `data.b` 不是响应的

不过，有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例，可以使用$set(key,value)实例方法：

vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象，可以使用全局方法Vue.set(object, key, value) :

Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：

// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

十、关于vuejs页面闪烁{{message}}

在vuejs指令中有v-cloak，这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

用法如下：

[v-cloak]{
 display:none;
}
<p v-cloak>{{message}}</p>

这样

不会显示，直到编译结束

十一、关于在v-for循环时候v-model的使用

有时候需要循环生成input，用v-model绑定后，利用vuejs操作它，此时我们可以在v-model中写一个数组selected[$index] ，这样就可以给不同的input绑定不同的v-model，从而分别操作他们。这个我在demo中的dataBind.vue中用到。

十二、vuejs中过渡动画

在vuejs中，css定义动画：

 .zoom-transition{
  width:60%;
  height:auto;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
 }
 .zoom-enter, .zoom-leave{
  width:150px;
  height:auto;
  position: absolute;
  left:20px;
  top:20px;
  transform: translate(0,0);
 }

其中动画在定的时候要注意上下对应，上面有什么，下面有什么，都要变化的，如果有不变化的，应该抽离出去，作为公共css样式，在上面的css中，如果我只写 transform: translate(-50%,-50%);而不写下面的transform: translate(0,0);则会导致上面的transform: translate(-50%,-50%);被添加到下面，认为这个是不变的。

十三、指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。

注意

HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
this.$els.msg //-><span>hello</span>

十四、关于vuejs中使用事件名

在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用v-on:click-"event" ,这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。在2.0中没有该限制！

十五、v-if与v-show的区别

v-if直接不渲染这个DOM元素，而v-show是会渲染DOM元素，只是使用display:none隐藏，打开开发者工具可以看到该DOM

十六、关于transition全局钩子如何在组件中使用

Vue.transition是定义一个全局transition钩子的，如果想针对组件定义，则需要如下写法：

export default{
 transition:{
  'fade':{
   enter() {},
   leave() {}
  }
 }
}

这样fade这个过度钩子只会作用于组件内，如果同时有同名的全局钩子，则会优先使用组建定义的

十七、利用vue-router如何实现组件在渲染出来前执行某个事件

export default{
 data(){
  return{
   selected:0,
   currentView:'view_0'
  }
 },
 methods:{
  choose(index) {
   this.selected=index;
   this.currentView='view_'+index;
  }
 },
 route:{
  data() {
   /*每次切换路由，在渲染出页面前都会执行*/
  }
 }
}

更多超全面的vue.js使用总结相关文章请关注PHP中文网！

相关文章：

通过纯Vue.js构建Bootstrap组件

强大Vue.js组件详细说明

Vue.js环境搭建教程介绍