収集する価値のある Vue 開発スキルの例-jsチュートリアル-php.cn

この記事では、Vue の便利な開発スキルをさまざまな側面から詳しく説明します。これが皆さんの役に立つことを願っています。

1. プレースホルダーと計算された

フォームの開発は間違いなく日常の開発に不可欠な部分ですが、設計図面には次のようなフォームのデフォルト値の設計が含まれることがよくあります。要点は
です。値が入力されていない場合はデフォルト値が表示され、値が入力されている場合は入力値が表示されます。収集する価値のある Vue 開発スキルの例通常、この問題を解決するには 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、これは矛盾しています。要件 2 番目のものは、要件を満たすプレースホルダーの値を表示できます。しかし、いくつかの複雑な要件の場合、たとえば、ユーザーが都市名 (city) と国名 (country) を選択し、最終的にそれらを変数 (countryAndCity) に表示できるようにする場合、この場合は computed 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. 動的コンポーネントと非同期コンポーネントの使用

動的コンポーネントは一般的にはほとんど使用されませんが、コンポーネントを動的に導入する場合には非常に役立ちます。これは、以前に行ったコンポーネント構成システムの中核です。動的コンポーネントループを使用し、is を使用してコンポーネント名を取得し、props を使用して各コンポーネントのカスタムプロパティを取得します

rrreee4。クライアントレンダリング中に作成およびマウントされたウィンドウオブジェクトのサーバー側レンダリングです。存在するので直接操作できます。しかし、サーバー側のレンダリング中はそれらのウィンドウが存在しないため、すべてのロジックの前に判断を追加する必要があります

rrreee

5。 this.$emit コンポーネントの考え方に基づいて、何度もそれを実行します。ページをいくつかのコンポーネントに分割し、ダイアログポップアップコンポーネントなどのいくつかの共通コンポーネントを抽出します。その開始と終了はコンポーネントページを参照するデータの値に基づいて決定されますが、通常は終了ボタンが書き込まれます。つまり、参照コンポーネントのページにはクリックできるボタンがないため、ダイアログ内でクリック時の

シグナル🎜を渡すことができ、参照コンポーネントのページはシグナルを受け取ります。次に、シャットダウンを制御します🎜rrreee🎜 一般的な考え方は、操作を便利にするために、実際のシャットダウン操作を isDialog のページに置くことです。 🎜このように参照せず、メソッド内で直接参照するパブリックコンポーネントの書き方も登場する予定ですので、ご期待ください🎜🎜6.css スコープ付き🎜🎜vue の Css はスコープ付きキーを使用して CSS のスコープを制限できます🎜rrreee🎜これこれにより、クラス名の重複を気にする必要がなくなります。さらに、sass、less、stylus、postcss などの CSS プロセッサを使用すると、その効果は驚くべきものになります。 🎜ただし、body 要素の CSS スタイルを変更したいが、パブリックレイアウトテンプレートは変更したくない場合。次に、vue ファイルに 2 つの style タグを記述することができます 🎜rrreee🎜関連する推奨事項: 🎜🎜🎜番号入力ボックスで携帯電話番号を分割する Vue の実装チュートリアル 🎜🎜🎜🎜Vue 構文のスプライシングの詳細な説明文字列🎜🎜🎜🎜vue イベントバスを使ってコンポーネント間で値をやり取りする詳しい説明🎜🎜🎜🎜vue 遷移アニメーション詳細説明🎜🎜🎜🎜vue 検証コードの60秒カウントダウン機能の簡単な実装例🎜 🎜

以上が収集する価値のある Vue 開発スキルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。