수집할 가치가 있는 Vue 개발 기술의 예

이 기사에서는 Vue의 유용한 개발 기술을 여러 측면에서 자세히 설명하겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 자리 표시자와 계산된

양식 개발은 확실히 일상적인 개발의 필수적인 부분이지만 디자인 도면에는 종종 다음과 같은 양식 기본값의 디자인이 있습니다. 수요자 포인트는
: 값이 입력되지 않은 경우 기본값이 표시되고, 값이 입력되면 입력된 값이 표시됩니다. 일반적으로 이 문제를 해결하려면 placeholder를 사용하는 것을 생각할 수 있으며, 일반적으로 v-model을 사용하여 data의 값을 바인딩합니다. 그런 다음 data의 값은 공백

//script
data(){
    return {
        index:0,
        name:''
    }
}
//template
<input type="number" placeholder="默认值index" v-model="index"/>
<input type="text" placeholder="默认值name" v-model="name"/>

이라는 기본값으로 설정됩니다. 위의 효과는 첫 번째 입력의 자리 표시자 값을 표시할 수 없으며 index 값이 표시된다는 것입니다. 0, 요구 사항이 일치하지 않습니다.두 번째는 요구 사항을 충족하는 자리 표시자의 값을 표시할 수 있습니다. 그러나 일부 복잡한 요구 사항의 경우 예를 들어 사용자가 도시 이름(city)과 국가 이름(country)을 선택하고 최종적으로 변수(countryAndCity)에 표시할 수 있도록 허용합니다. 이 경우 계산 code>

//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="国家" v-model="country"/>
<input type="text" placeholder="国家+城市" v-model="countryAndCity"/>

//script
data(){
    return {
        city:'',
        country:''
    }
},
computed:{
    countryAndCity () {
        let str = ''
        if(this.city && this.country){
            str = `${this.city}+${this.country}`
        }
        return str
    }
}

위에서 판단해야 합니다. 도시와 국가에 값이 있으면 결과가 표시됩니다. 그렇지 않으면 자리 표시자 값이 표시됩니다.

placeholder来解决这个问题，并且通常会用v-model来绑定data中的值。然后，data的值再设定默认值为空

//template
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>

//script

data(){
    return {
        currentIndex:0，
        list:['aa','bb','cc','dd']
    }
},
methods:{
    select(index){
        this.currentIndex = index
    }
}

以上这种效果是,第一个input的placeholder的值显示不出，显示了index的值：0，不符合需求
第二种能显示placeholder的值,需求满足。

但是一些复杂的需求，比如，让用户选择城市名(city)和国家名(country)，最后在一个变量(countryAndCity)上显示，这个时候就要用computed

data(){
    return {
        list:[
        {text:'aa',isActive:false},
        {text:'bb',isActive:false}
        {text:'cc',isActive:false}'
        ]
    }
},
methods:{
    select(index){
        this.list[index].isActive = !this.list[index].isActive
    }
}

在上面就需要做个判断，当city和country有值的情况才显示结果，否则显示placeholder的值。

2.单选选中和多选选中的设计

诸如经过设计师设计的单选和多选按钮
单选按钮就比较简单了

<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>

上面很简单，大概看看就懂了，这是单选的情况，那要是多选的情况呢，那就要换个思路了

首先换个数据格式

<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>

componentList:[{ name:'index',props:{title:'title'}}]

然后template就要变成这样

if(typeof window !== 'object') return ;

3.动态组件和异步组件的使用

动态组件一般很少用到，但是要做动态引入组件的时候真的超级好用。之前做过的组件配置系统核心就是它。我用的是一个动态组件循环，然后用is获取组件名，用props获取各个组件的自定义props

//app.vue
<dialog v-if="isDialog"></dialog>

data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    }
}

4.created和mounted的服务端渲染

created和mounted在客户端渲染时期window对象都是存在的，所以可以直接操作。
但是在服务端渲染时期，它们两者的window都是不存在的，所以要加一句判断,在所有逻辑前面

//dialog.vue
 
<p @click="close"> 点击关闭 </p>

methods:{
    close() {
        this.$emit('close')
    }
}    

//app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>

data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    },
    closeDialog(){
        this.isDialog = false
    }
}

5.this.$emit的妙用

基于组件化思维，很多时候我们会把一个页面拆分成几个组件，然后会提取一些公用的组件，比如dialog弹窗组件，他的打开和关闭，都是根据引用组件页面的data的一个值来决定，

<style scoped>...</style>

但是关闭按钮通常是写在dialog组件内部的，也就是说，在引用组件页面是没有这个按钮可以点击的，
所以，可以在dialog里面将点击时间的信号传递出来，引用组件页面接收到了信号，再控制关闭

<style> body{...} </style>
<style scoped> .. .</style>

大致的思路就是把真正关闭的操作，放在isDialog的页面，方便操作。
后续还会出一个不这样引用，直接在methods的方法中引用的公用组件写法，敬请期待

6.css的scoped

vue中的css可以用scoped这个关键子来限制css的作用域

rrreee

这个日常就会用到，因为这样就不用考虑class的命名会重合，加上使用sass、less、stylus、postcss等css处理器，效果简直杠杠的。
但是如果你想改动到body这个元素的css样式，但是又不想改动公用layout模板。那你就可以在一个vue文件写两个style2. 단일 선택 및 다중 선택 선택의 디자인

디자이너가 디자인한 라디오 선택 및 다중 선택 버튼과 같은

라디오 버튼은 비교적 간단합니다

rrreee위 내용은 매우 간단합니다. 그냥 보기만 해도 단일 선택 상황인데 다중 선택

상황이라면 생각을 바꿔야 합니다

먼저 데이터 형식을 바꿔보세요rrreee

그러면 템플릿이 이렇게 됩니다

rrreee3. 동적 구성 요소와 비동기 구성 요소의 사용

동적 구성 요소는 일반적으로 거의 사용되지 않지만 구성 요소를 동적으로 도입할 때 정말 유용합니다. 우리가 이전에 해왔던 컴포넌트 구성 시스템의 핵심입니다. 동적 구성 요소 루프를 사용한 다음 구성 요소 이름을 가져오고 props를 사용하여 각 구성 요소의 사용자 정의 소품을 가져옵니다

rrreee4. 클라이언트 렌더링 중에 생성 및 마운트된

생성 및 마운트된 창 개체의 서버 측 렌더링 존재하므로 직접 운영이 가능합니다.

하지만 서버 측 렌더링 중에는 해당 창이 존재하지 않으므로 모든 로직 앞에 판단을 추가해야 합니다rrreee5.$emit

🎜컴포넌트 사고를 기반으로 하는 경우가 많습니다. 페이지를 여러 구성 요소로 분할한 다음 대화 상자 팝업 구성 요소와 같은 일부 공통 구성 요소를 추출합니다. 열기 및 닫기는 구성 요소 페이지를 참조하는 데이터 값(🎜rrreee🎜)에 따라 결정되지만 일반적으로 페이지를 닫는 버튼은 즉, 참조 구성 요소 페이지에는 클릭할 수 있는 버튼이 없습니다. 따라서 클릭 시간의 🎜 신호🎜가 대화 상자에 전달될 수 있으며 참조 구성 요소 페이지는 그런 다음 종료를 제어하세요🎜rrreee🎜일반적인 아이디어는 편리한 작업을 위해 isDialog 페이지에 실제 종료 작업을 넣는 것입니다. 🎜이와 같이 참조하지 않고 메서드에서 직접 참조되는 공개 구성 요소 작성 방법이 있을 것입니다. 계속 지켜봐주세요🎜🎜6.css 범위 지정🎜🎜vue의 Css는 범위 지정 키를 사용하여 CSS 범위를 제한할 수 있습니다. 🎜rrreee🎜이것은 이렇게 하면 클래스 이름이 겹칠 염려가 없기 때문에 매일 사용됩니다. 게다가 sass, less, stylus, postcss 등과 같은 CSS 프로세서를 사용하면 그 효과가 정말 놀랍습니다. 🎜하지만 body 요소의 CSS 스타일을 변경하고 싶지만 공개 레이아웃 템플릿은 변경하고 싶지 않은 경우. 그런 다음 vue 파일에 두 개의 style 태그를 작성할 수 있습니다. 🎜rrreee🎜관련 권장 사항: 🎜🎜🎜숫자 입력 상자 튜토리얼에서 휴대폰 번호 분할의 Vue 구현 🎜🎜🎜🎜Vue 구문 접합에 대한 자세한 설명 strings 🎜🎜🎜🎜vue 컴포넌트 간 값 전송을 위해 이벤트버스를 사용하는 방법에 대한 자세한 설명 🎜🎜🎜🎜vue 전환 애니메이션 자세한 설명 🎜🎜🎜🎜vue 인증코드의 60초 카운트다운 기능을 구현한 간단한 예 🎜 🎜

위 내용은 수집할 가치가 있는 Vue 개발 기술의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!