金沙官网线上vue

vue

  • sync修饰
    (1)双向数据绑定,父子组件之间信息的交互
    金沙官网线上 1

    1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么可以实现通信过程 
    2⃣️使用简单的方式传递,如上图中emmit(updete:title),然后在v-bind:title.sync='title',从而实现双向数据绑定

    (2)双向数据绑定,使用v-model
    金沙官网线上 2

    通过在自组件中使用model 定义 prop event ,从而可以实现父子组件之间通过v-model实现通信,或者不定义model ,使用默认的的prop:value,enent:input金沙官网线上 3

  • keep-alive
    <keep-alive><My-component /> <keep-alive>  可以实现缓存

  • 作用域插槽
    这个其实就是可以使用自组件中的数据,使用slot-scope接受自组件中的数据
    金沙官网线上 4
  • 自组件访问父级组件
    1⃣️ let father = this.$parent
    2⃣️通过依赖注入
    金沙官网线上 5
  • 计算属性
    刚开始在学习计算属性的时候,一直默认的认为是一个函数,但是在调用的时候,是不用加()的,这样的话,在认为是一个函数就不对了,其实就是类似于
    data中的数据,只不过会有缓存和更新。例如使用的时候直接{{computed}},通俗的说,可以单纯的将它作为一个data值
  • method方法
    调用方法的时候,如果不传递值的话,那么可以不用加入()
    金沙官网线上 6
  • 混入 minxins
    金沙官网线上 7 
  1. 单向绑定
    注意v-bind这个指令的用法,一般后面跟什么字符
    {{message}}
    {{* message}} (once)
    {{{ html_string }}}
    {{ message.split('') }}
    No: {{ var a = 1 }}
    {{ message | filterA 'arg1' arg2 }}
    <a v-bind:href="url"></a>
    <a :href="url"></a>
    <a v-bind:href.literal="/a/b/c"></a>
    <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
    <div v-bind:class="[classA, { classB: isB, classC: isC }]">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  2. 双向绑定
    <input v-model="message">
  3. 列表
    <div v-for="(index, item) in items" track-by="_uid">
    <div v-for="(key, val) in object">
    {{ n }}
  4. 事件
    <button v-on:click="doSomething">
    <button @click="doSomething">
    <button v-on:click="say('hi', $event)">Say Hi</button>
  5. 条件
    <p v-if="flag">
    <h1 v-show="ok">Hello!</h1>
    <div v-else>
  6. VM 实例的生命周期
    1. created
    2. beforeCompile
    3. compiled
    4. ready
    5. beforeDestroy
    6. destroyed
  7. VM 构造参数
    1. el
    2. data
    3. computed
    4. methods
    5. events
    6. components
  8. VM 实例
    1. $watch
    2. $parent / $root
    3. $children
    4. $on / $emmit / $dispath / $broadcase
    5. $refs
  9. 占位标签
    1. <template>
    2. <slot>
    3. <slot name="one"></slot>
  10. 动画
    <div v-if="show" transition="expand">hello</div>
    <div v-if="show" :transition="transitionName">hello</div>
  11. Props
    <child msg="parentMsg"></child>
    <child :msg="parentMsg"></child>
    <child :msg.sync="parentMsg"></child>
    <child :msg.once="parentMsg"></child>
  12. 引用
    <user-profile v-ref:profile></user-profile>
  13. 组件
    1. 声明:var MyComponent = Vue.extend({})
    2. 注册:Vue.component('my-component', MyComponent)
    3. 使用:
      • <my-component></my-component>
      • <div is=my-component></div>

自定义指令
通过Vue.directive(name,{})
Vuex

  • 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
    不能用 $on 侦听子组件抛出的事件,而必须在模板里直接用 v-on 绑定,就像以下的例子:
  • 三部分构成 state actions mutations
  • state
    此部分存放数据,可以通过mapStated获取到数据。
    金沙官网线上 8
    金沙官网线上 9
  • actions
    可以使用异步,通过this.$store.dispathc()触发

  •  mutatios

    mutatios
    必须是同步,通过this.emmit()触发

  • 步骤:

     Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {
          context.commit('increment')
        }
      }
    })
    

      

     

     

<input v-model="something">
这不过是以下示例的语法糖:
<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">
所以在组件中使用时,它相当于下面的简写:
<custom-input
  v-bind:value="something"
  v-on:input="something = arguments[0]">
</custom-input>
[非父子组件通信
](https://cn.vuejs.org/v2/guide/components.html#非父子组件通信)有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:
var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
  • 金沙官网线上,data必须是函数

  • 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

  • 可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="http://www.paulbetty.com/uploads/allimg/191213/1925453943-10.jpg"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})
</script>
</body>
</html>
  • DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化
  • .v-show指令,v-if的区别
    条件渲染指令,与v-if不同的是,无论v-show的值为true或false,元素都会存在于HTML代码中;而只有当v-if的值为true,元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值
  • 如何让css只在当前组件中起作用
    在每一个vue组件中都可以定义各自的css,js,如果希望组件内写的css只对当前组件起作用,只需要在style中写入scoped,即: <style scoped></style>
  • 指令keep-alive,在vue-router写着keep-alive,keep-alive的含义:
    如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
    <component :is='curremtView' keep-alive></component>
  • 这里注意一点,组件要先注册再使用,也就是说:

本文由金沙官网线上发布于Web前端,转载请注明出处:金沙官网线上vue

您可能还会对下面的文章感兴趣: