一文速览Vue全栈

var app = new Vue({
    //选项
});

<div id='app'></div>
var app =new Vue({
    el: document.getElementByld('app')  // 或者是'#app'
});

var app = new Vue({
    el: '#app',
    data: {
        a: 2
    }
});
console.log(app.a);  // 2

var myData = {
    a: 1
};
var app =new Vue({
    el: '#app',
    data: myData
});
console.log(app.a) ; // 1
//修改属性，原数据也会随之修改
app.a = 2;
console.log(myData.a); // 2
//反之，修改原数据， Vue属性也会修改
myData.a = 3;
console.log(app.a); // 3

<span>Message: {{ msg }}</span>

<span v-pre>{{这里的内容是不会被编译的}}</span>

<div id='app'>
    {{ number / 10 ))
    {{ isOK ? ’确定’ : ’取消’ }}
    {{ text.split(’,’).reverse().join(’,’) }}
</div>

<span v-once>这个将不会改变: {{ msg }}</span>

<div id='app' v-cloak> {{ message }}</div>
<style>
[v-cloak] {
    display: none;
}
</style>

<span v-once>{{ message }}</div>

var contenthtml = `<span>哈哈大笑😄</span>`;
<span v-html="contenthtml"></span>

<div id='app'>
    <span v-if='false'>{{ message }}</span>
</div>
// 会被渲染为以下节点：
<div id='app'></div>

<div id='app'>
    <span v-show='false'>{{ message }}</span>
</div>
// 会被渲染为以下节点
<div id='app'>
    <span style="display: none;”>哈哈大笑😄</span>
</div>

<span v-if='show'>{{ message.a }}</span>
<span v-else>{{ message.b }}</span>

<ul>
    <li v-for=”book in books” :key="book.id">{{ book.name }}</li>
</ul>

<div id=”app”>
    <a v-bind:href=”url”〉链接</a>
    <img v-bind:src=”imgUrl”>
</div>

<button v-on:click=”counter++”>+ 1</button>

<button v-on:click=”handleAdd(1)”>+ 1</button>

methods: {
    handleAdd: function(count) {
        this.counter += count;
    }
}

<a href=”http://www.apple.com” @click="handleClick ('禁止打开'，$event)">
打开链接 </a>

methods: {
    handleClick: function(message, event) {
        event.preventDefault();
    }
}

<input type=”text” id="name" v-model="fullname" />
<p>你好，{{fullname}} !</p>

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

// 或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

{{ message | filterA | filterB }}

{{ message | filterA('arg1', arg2) }}

<span>{{fullName}}</span>
computed: {
    fullName: {
        get: function() {
            return this.firstName + ' ' + this.lastName;
        },
        set: function(newValue) {
            var names= newValue.split (' ') ;
            this.firstName = names[O);
            this.lastName = names[names.length - 1];
        }
    }
}

<span>{{getName()}}</span>
methods: {
    getName: function() {
        return this.firstName + ' ' + this.lastName;
    }
}

watch: {
    message(newvalue, oldValue) {
        newvalue && this.getNewMessage();
    }
}

Vue.component(’my-component’, {
    //选项
})

<div id=”app”>
    <my-component></my-component>
</div>
<script>
var Child = {
    template: '<div>局部注册组件的内容</div>'
};
components: {
    ’my-component’: Child
}
</script>

<div id=”app”>
    <table>
        <tbody is=”my-component”></tbody>
    </table>
</div>
<script>
var Child = {
    template: '<div>局部注册组件的内容</div>'
};
components: {
    ’my-component’: Child
}
</script>

Vue.component('my-component', {
    template: '<div>{{ message }}</div>',
    data: function() {
        return {
            message: 'aaa'
        }
    }
});

// 字符串数组
Vue.component ('my-component', {
    props: [ ’ message ’ ] ,
    template: ’<div>{{ message }}</div>’
});
// 对象形式
Vue.component ('my-component', {
    props: {
        //必须是数字类型
        propA : Number,
        //必须是字符串或数字类型
        propB : [String , Number],
        //布尔值，如果没有定义，默认值就是 true
        propC: {
            type: Boolean,
            default: true
        },
        //数字，而且是必传
        propD: {
            type: Number,
            required: true
        },
        //如果是数组或对象，默认值必须是一个函数来返回
        propE: {
            type: Array,
            default: function() {
                return [];
            }
        }
    } ,
    template: ’<div>{{ message }}</div>’
});

var eventHub = new Vue();

eventHub.$emit('delete', id);
eventHub.$on('delete', this.delete);
eventHub.$off('delete', this.delete)

// 父组件
<submit-button>save</submit-button>
// 子组件
<button type="submit">
  <slot>Submit</slot>
</button>

// 最终渲染
<button type="submit">
  Save
</button>

// 父组件
<base-layout>
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>

 <template v-slot:default>
   <p>A paragraph for the main content.</p>
   <p>And another one.</p>
 </template>

 <template v-slot:footer>
   <p>Heres some contact info</p>
 </template>
</base-layout>
// 子组件
<div class="container">
 <header>
   <slot name="header"></slot>
 </header>
 <main>
   <slot></slot>
 </main>
 <footer>
   <slot name="footer"></slot>
 </footer>
</div>

// 最终渲染
<div class="container">
 <header>
   <h1>Here might be a page title</h1>
 </header>
 <main>
   <p>A paragraph for the main content.</p>
   <p>And another one.</p>
 </main>
 <footer>
   <p>Heres some contact info</p>
 </footer>
</div>

// 父组件
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

// 子组件
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

// 父组件
<template>
    <child :updateTitle='updateTitle'></child>
</template>
<script>
export {
    data: {
        return {
            title: '我是父组件'
        }
    },
    methods: {
        updateTitle(value) {
            this.title = value;
        }
    }
}
</script>
// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>
  </header>
</template>
<script>
export {
    props: {
        title: {
            type: String,
            default: '我是父组件'
        }
    }，
    methods: {
        changeTitle() {
            this.$emit('updateTitle', '我是子组件');
        }
    }
}
</script>

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

// 父组件
<template>
    <child :foo="foo" :boo="boo"  title="天道酬勤Lewis"></child>
</template>
// 子组件
<template>
    <p>boo: {{ boo }}</p>
    <p>child: {{ $attrs }}</p>
</template>

// 父组件
export default {
  provide: {
    name: '天道酬勤Lewis'
  }
}
// 子组件
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 天道酬勤Lewis
  }
}

Vue.prototype.$on = function (event, fn) {
    var this$1 = this;
    var vm = this;
    //如果传参event是数组，递归调用$on
    if (Array.isArray(event)) {
      for (var i = 0, l = event.length; i < l; i++) {
        this$1.$on(event[i], fn);
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn);
      // 这里在注册事件的时候标记bool值也就是个标志位来表明存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。
      if (hookRE.test(event)) {
        vm._hasHookEvent = true;
      }
    }
    return vm
};

Vue.prototype.$once = function (event, fn) {
    var vm = this;
    function on () {
      //在第一次执行的时候将该事件销毁
      vm.$off(event, on);
      //执行注册的方法
      fn.apply(vm, arguments);
    }
    on.fn = fn;
    vm.$on(event, on);
    return vm
};

  Vue.prototype.$emit = function (event) {
    var vm = this;
    {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    if (cbs) {
      //将类数组的对象转换成数组
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      for (var i = 0, l = cbs.length; i < l; i++) {
        try {
          //触发当前实例上的事件，附加参数都会传给监听器回调。
          cbs[i].apply(vm, args);
        } catch (e) {
          handleError(e, vm, ("event handler for \"" + event + "\""));
        }
      }
    }
    return vm
};

  Vue.prototype.$off = function (event, fn) {
    var this$1 = this;
    var vm = this;
    // 如果没有参数，关闭全部事件监听器
    if (!arguments.length) {
      vm._events = Object.create(null);
      return vm
    }
    // 关闭数组中的事件监听器
    if (Array.isArray(event)) {
      for (var i = 0, l = event.length; i < l; i++) {
        this$1.$off(event[i], fn);
      }
      return vm
    }
    // 具体的某个事件
    var cbs = vm._events[event];
    if (!cbs) {
      return vm
    }
    //  fn回调函数不存在，将事件监听器变为null，返回vm
    if (!fn) {
      vm._events[event] = null;
      return vm
    }
    // 回调函数存在
    if (fn) {
      // specific handler
      var cb;
      var i$1 = cbs.length;
      while (i$1--) {
        cb = cbs[i$1];
        if (cb === fn || cb.fn === fn) {
          // 移除 fn 这个事件监听器
          cbs.splice(i$1, 1);
          break
        }
      }
    }
    return vm
};

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

MyPlugin.install = function (Vue, options) {
    //全局注册组件(指令等功能资源类似〉
    Vue.component ('component-name'，{
        //组件内容
    }),
    //添加实例方法
    Vue.prototype.$Notice = function() {
        //逻辑 ...
    },
    //添加全局方法或属性
    Vue.globalMethod = function() {
        //逻辑 ...
    },
    //添加全局混合
    Vue.mixin ({
        mounted: function() {
            //逻辑 ...
        }
    })，
    //添加全局过滤器
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
            // 逻辑...
        }
    }
  })
};
// 通过 Vue.use()来使用插件:
Vue.use(MyPlugin);
// 或 
Vue.use(MyPlugin, {
    // 参数选项
});

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

const moduleA = {
    state: { ... },
    mutations: { . . . },
    actions: { ... ),
    getters: { ... )
};