Vue 構造の詳細な紹介 (例付き)-jsチュートリアル-php.cn

Vue 構造の詳細な紹介 (例付き)

不言

リリース： 2019-02-20 14:11:07

転載

3454 人が閲覧しました

この記事では、Vue の構造について詳しく説明します (例を示します)。必要な方は参考にしていただければ幸いです。

1.Vue の使用シナリオ:

* 在html中通过script引入
* 在webpack中，由于配置有处理各种文件的loader，所以可以用import引入

ログイン後にコピー

2.Vue の手順

v-cloak
v-bind  ==> :
v-on ==> @
v-text
v-html
v-modal
:class : 简单值，数组，对象，数组中对象
:style ： 数组， 对象
v-for
v-if
v-show

ログイン後にコピー

カスタマイズされたグローバルディレクティブ

Vue.derictive(自定义指令名字, 指令生效周期配置对象{
    bind : (被绑定的那个元素的js原生对象el) => {},   ==> 一旦绑上马上调用
    inserted : (el同上) => {},  ==> 元素插入到DOM之后再调用
    updated : (el同上, binding) => {}
}

ログイン後にコピー

var vm2 = new Vue({
  el: '#app2',
  data: {},
  methods: {},
  directives: { 
    'fontweight': {
      bind: function (el, binding) {
        el.style.fontWeight = binding.value
      }
    },
  }
})

ログイン後にコピー

3. Vue イベント修飾子

.stop
.prevent
.capture
.self
.once
.self和.stop在阻止冒泡行为上的区别

ログイン後にコピー

4.Vue フィルター

グローバルフィルターのパラメーター受け渡しルールは同じです;グローバルフィルターとローカルフィルターの場合、コンポーネント内でフィルターを使用する場合は、その独自の内部フィルターが最初に使用されます。

#グローバルフィルター

Vue.filter('自定义过滤器名字' , function(第一参数来自于管道符 | 前的数据 ， 后面的参数是该过滤器被调用时候传递过来的参数){}

ログイン後にコピー

ローカルフィルター

は、Vue インスタンスのフィルター属性で定義されます

var vm2 = new Vue({
  el: '#app2',
  data: {},
  methods: {},
  filters: { 
    dateFormat: function (dateStr, pattern = '') {}
    }
  },
})

ログイン後にコピー

5.Vue キー修飾子

キー修飾子は、.self などのイベント修飾子と同様に、v-on イベントの後に使用されます。

.enter
.tab
.up
.down
.left
.right
.delete
.esc
.space

ログイン後にコピー

カスタムグローバルキー修飾子

Vue.config.keyCodes.自定义按键修饰符名字 = 按键的码值

ログイン後にコピー

beforeCreated(){} ==> data和methods中数据还没初始化好
created(){} ==> data和methods中的数据已经初始化好
beforeMount(){} ==> 模板已经在内存中编译好了，但是没有被渲染到页面上
mounted(){} ==> 内存中的模板已经渲染到了页面行，用户可以看到页面了
beforeUpdate (){} ==> data中的数据已经更新，但是界面上的数据没有更新
updated (){} ==> 界面上数据更新结束
beforeDestory (){} ==> 此时data和methods中数据还可以使用
destoryed (){} ==> data和methods中数据都不能使用了，Vnode被完全销毁

ログイン後にコピー

7.Vue-resource

axios に似ていますが、Vue.js に依存します。導入後、$http 属性が Vue インスタンスに自動的に追加されます

$http.get()
$http.post()
$http.jsonp()

均返回一个promise
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
  console.log(result.body)
})

ログイン後にコピー

8。 Vue アニメーション

クラス名

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

ログイン後にコピー

サードパーティのクラス名を使用

<transition
name=&#39;my&#39;
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 400 }">
  <h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>

ログイン後にコピー

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
  <p class="ball" v-show="flag"></p>
</transition>

beforeEnter (要执行动画的那个对象的原生DOM对象el) {} ==> 动画入场之前，设置动画的起始样式
enter (el , done) {done()} ==> 动画开始后样式，设置动画结束样式
afterEnter () {} ==> 动画完全结束回调

ログイン後にコピー

##9.Vue がコンポーネントを作成

(1) コンポーネントテンプレートオブジェクトの作成

方式1：
Vue.extend({
    template : ''
})

方式2：
直接一个 Object

ログイン後にコピー

(2) グローバルコンポーネントの登録

Vue.component(自定义组件名字, 组件模板)

ログイン後にコピー

(3) コンポーネントデータと Vue インスタンスデータの違い

コンポーネントデータはオブジェクトを返す必要があります

10。

コンポーネント切り替え

<component :is="comName"></component>
comName是变量

ログイン後にコピー

<!-- 通过 mode 属性,设置组件切换时候的 模式 -->
<transition mode="out-in">
  <component :is="comName"></component>
</transition>

ログイン後にコピー

11. 親コンポーネントと子コンポーネントの間で値を渡す

传单纯值：
<com1 v-bind:parentmsg="msg"></com1>

传函数
<com2 @func="show"></com2>
this.$emit('func', this.sonmsg)

ログイン後にコピー

##関数のパラメータを親コンポーネント経由で渡します

12.Vue routing

Vue-resource と同様に、vue を導入する必要があります。 -router.js ファイル

let routeObj = new VueRouter({  
    routes : [
        {path : '' , redrect : '' , component : null}
    ]
})

var vm = new Vue({
  el: '#app',
  router: routerObj
});

ログイン後にコピー

ルーティングパラメータ

<router-link to="/login?id=10&name=zs">login</router-link>
routes: [
  { path: '/login/:id/:name', component: login , children : [{path , redrect , component , children}] },
]
$route.params.id

ログイン後にコピー

<router-view></router-view>
<p class="container">
  <router-view name="left"></router-view>
  <router-view name="main"></router-view>
</p>

var router = new VueRouter({
  routes: [
    {
      path: '/', components: {
        'default': header,
        'left': leftBox,
        'main': mainBox
      }
    }
  ]
})

ログイン後にコピー

13.watch は、データ変更またはデータ内のルーティング変更を監視します

var vm = new Vue({
  el: '#app',
  data: {firstname: '',},
  watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    'firstname': function (newVal, oldVal) {
      this.fullname = newVal + '-' + this.lastname
    },
    '$route.path': function (newVal, oldVal) {   ==> 只需要这是一个变量
      if (newVal === '/login') {
        console.log('欢迎进入登录页面')
      } else if (newVal === '/register') {
        console.log('欢迎进入注册页面')
      }
    }
  }
});

ログイン後にコピー

以上がVue 構造の詳細な紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。