404源码社区 - Admin404

动态组件：不同组件之间进行动态切换，通过 Vue 的元素加一个特殊的 is attribute 实现1. 基础使用component的is 属性值是组件名，就可以调用该组件<component is="comb"></component><div id="app"><component is="comb"></component></div><script>var coma = {t...

1. 什么是插槽插槽的作用: 让封装的组件更加具有扩展性插槽就是子组件提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码，如：html、组件等，填充的内容会替换到子组件中的<slot></slot>标签2. 基础使用<div id="app"><parent>12323</parent></div><script&g...

子组件中使用 $emit(‘tt’)1. 示例一<div id="app"><parent @tt="go"></parent>{{ msg }}</div><script>var par = {template: `<div><button @click="$emit('tt', 'liang')">点我</button></div>`}let vm = new.

1. 父传子 props父组件中的数据传递给子组件官方文档：通过-Prop-向子组件传递数据props: ['movies'],props: {movies: Array},props: {movies: {type: Array,default: [],required: true}},props 的驼峰标识<cpn :c-info="userinfo"></cpn>props: {cInfo: {type: Object,

1.Vue组件的data必须是一个函数参考官网文档一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝<div id="app"><my-button></my-button></div><script>Vue.component('my-button', {template: '<button @click="count++">{{ msg }} {{ count }}&lt

1. 什么是组件组件是可复用的 Vue 实例，通过自定义元素实现组件组件名定义规范: html 不区分大小写，统一使用小写，多个单词使用短横线隔开（art-list）2. 组件的使用第一步: 创建组件构造器对象const notice = Vue.extend({template: `<div><p>国庆放假通知</p><div>国庆节假期为10.1~10.7,共七天</div></div>`,});

1. 侦听器 watchVue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性当属性发生改变时，自动触发属性对应的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。2. 基础用法当 msg 属性的值发生改变时，就会触发侦听器的执行<div id="app"><input type="text" v-model="msg"></div><script>let vm = new Vu

1. 什么是计算属性众所周知，在模板中可以直接通过插值语法显示一些 data 中的数据，但是在某些情况下，我们需要对数据进行一些转化后再显示或需要将多个数据结合起来进行显示当然，此时可以通过使用模板表达式进行转化、拼接等处理，但如果需要转化拼接，那么就需要使用多次模板表达式模板内的表达式非常便利，但是它们的设计初衷是用于简单运算的, 在模板中放入太多的逻辑会让模板过重且难以维护那么, 此时我们可以使用计算属性 (computed) 来解决这个问题2. 计算属性的基本使用3. co

1. v-for 指令简介 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用item in/of items形式的语法 其中 items 是源数据数组，item 是被迭代的数组元素别名 支持多种数据格式：Array | Object | number | string | lterable(2.6新增) 2. v-for 指令使用示例<li v-for="value in users">{{ value }}</li&..

1. v-show根据表达式的真假值，切换元素的 display CSS属性。表达式为false时，p标签被赋予 style="display:none;"<p v-show="status">123</p>data: {status: false,},2. 用于条件性的渲染一块内容表达式为false时，p标签被替换成了html注释 <!----><p v-if="status">456</p>data: {s

在表单<input>、<textarea>及<select>元素控件或者组件上创建双向绑定，它负责监听用户的输入事件以更新数据1. 普通文本框<div id="app"> <p>{{ msg }}</p> <input type="text" v-model="msg"></div><script> let vm = new Vue({ e...

v-on 指令用于监听 DOM 事件1. v-on 基本使用<div id="app"><button v-on:click="test">测试</button></div><script>let vm = new Vue({el: '#app',methods: {test: function() {console.log(123)},}})</script>v-on可缩写为@&...

1. v-bind 绑定 class 属性对象语法对象语法的含义是:class后面跟的是一个对象，语法格式:<span :class="{类名: 布尔值}"></span>使用示例:当布尔值为 true 时才显示该类名:class 属性是一个对象，对象中的键值可以是布尔值，也可以是 vue 示例中的 data 数据名称<span :class="{actived: isShow}"></span><span :clas..

指令 (Directives) 是带有 v- 前缀的特殊属性，Mustache语法不能作用在HTML属性上，遇到这种情况应该使用v-bind指令。v-bind指令可简写为:1. v-bind 绑定属性<div id="app"> <p v-bind:class="art">标签内容</p></div><script> let vm = new Vue({ el: '#app', ...

数据绑定最常用的形式就是使用Mustache语法的文本插值，也可以使用 v-text、v-html指令进行插值。v-once指令可实现一次性插入，当数据改变时，插值出的内容不会改变1. v-text 指令将vue数据对象中的属性值作为标签内容插入到标签中，不会解析内容中的标签2. v-html 指令用法同 v-text，不同点是会解析内容中的标签3. v-once 指令因为vue是双向绑定，数据一旦发生改变，插值处的内容将自动改变；使用 `v-once` 指令使其一次性...

Vue实例也代理了data对象上所有的属性，所以访问vm.name等价于访问vm.$data.nameel选择一个dom元素作为Vue实例（对象）的挂载目标以下两种方式都可以el: '#app',el: document.getElementById('app'),dataVue实例的数据对象Vue实例也代理了data对象上所有的属性，所以访问vm.name等价于访问vm.$data.name通过Vue实例的$el属性访问挂载的目标vm.$el..

1. vue-router 介绍vue-router 官方文档:Vue Routervue-router 是 vue 官方的路由插件，它和 vue 是深度集成的，适合用于构建单页面应用2. vue-router 的使用安装 vue-routernpm install vue-router --save在模块化工程中使用 （因为它是一个插件，所以可以通过 Vue.use() 来安装路由功能）第一步: 导入路由对象，并且调用 Vue.use(VueRouter)第二步: 创建.

1. Vuex 是用来做什么的 ?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式多个组件中共享状态2. Vuex 安装npm install vuex --save创建文件:src/store/index.js, 文件内容如下:import Vue from 'vue';import Vuex from 'vuex';// 1. 安装插件Vue.use(Vuex)// 2. 创建对象const store = new Vuex.Store(..