随笔分类 - Vue框架（VUE Cli 2 ）
是真的多....好散的知识！！！
摘要：在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画 实现等，那个时候代码还是很少的。 以前的代码 直接将代码写在<script>标签中即可 随着ajax异步请求的出现，慢慢形成了前后端的分离 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维 护。但是这种维护方式
阅读全文
摘要：其实就是 如果有很多个组件 ，当你在组件 使用变量的时候 ，那么你变量的作用域其实就也是在他定义的代码中找，如果没找到，那么就报错，【这个很基础的 是人都看出的】 官方说：父组件模板的所有东西都会在父级作用域内编译；子 组件模板的所有东西都会在子级作用域内编译。 下面例子完美说明了： 作用域插槽是s
阅读全文
摘要：我们学了插槽 发现组件化开发复用性很高。 我们拿上面说过的一个代码 讲解下 具名插槽solt： 就是说 这个cpn组件 他 是有两个插槽的，因为在调用的时候 ，里面写了代码，所以 他们两个插槽的值都会是 调用cpn时的 代码。 如果要这么一个场景： 一个组件有若干插槽，每个插槽的值有些一样 有些不一
阅读全文
摘要：其实这个slot 被翻译为 插槽，类似于接口。 ？ 为什么使用slot ？ 插槽的目的是让我们原来的设备具备更多的扩展性。 如果我们做一个组件，我们用哪个很多次，那么此次他都一样，，那么这就写的很死板。 举个例子 某东的导航栏： 可以看出有些东西是一样的，但有些是不一样的，即: 所以这就是为什么用插
阅读全文
摘要：说了 父组件直接访问子组件，现在讲 子组件访问父组件: 有这么个代码： <body> <template id="cpn"> <div style="border: solid red 2px "> <h2>这里是 cpn</h2> <v-ccpn></v-ccpn> </div> </templa
阅读全文
摘要：我们知道 父子组件之间的通讯 很烦对吧，所以现在有新方法： 父组件直接访问子组件中的对象： 2种方法 ： 1: $children,2: $refs 有以下代码： <body> <template id="cpn"> <div>不断奋起，直到羔羊变雄狮。</div> </template> <div
阅读全文
摘要：watch 上面说到了绑定，这里说一下 watch 这个属性，他是和 data 那些属性同一个级别的， 他的作用是 监听data数据改变，他有两个参数，第一个是 新值（改变后的值），第二个是 旧值（之前的值） 下面代码已充分解释了 <div id="app"> 已绑s1 : <input type=
阅读全文
摘要：父子组件结合 双向绑定 其实这个不是什么 就是 结合 v-model 一起写，v-model 可以绑定 data 或 props 中的数据，但是！ 如果你绑定props Vue会出来阻止，因为props没那么容易被修改，然而最好就是绑data，下面代码就是邦data： <script> const
阅读全文
摘要：父传子 我们学了，现在我们学 子传父 还记得那个图吗 其实就是 用 $emit 传递。换句话说就是传递自定义事件： 直接上代码 Vue其实很繁琐，框架这种东西就得照猫画虎，说道理是没用的： 这里我们还是一样用VUE实例来当父组件 因为代码很多 为了简便吧 其实都一样的： 下面这个代码是一个很简单的一
阅读全文
摘要：在组件中，使用选项props来声明需要从父级接收到的数据。 props的值有两种方式： 方式一：字符串数组，数组中的字符串就是传递时的名称。 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。 换句简单的话来说： 父组件传递的方式分两种，第一种是用字符串数组来传，第二种是通过对象的形式来传
阅读全文
摘要：在开发中，往往一些数据确实需要从上层传递到下层： 比如在一个页面中，我们从服务器请求到了很多的数据。 其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。 如何进行父
阅读全文
摘要：组件可以访问Vue实例数据吗? 答案是： 不行！，我们都说组件的复用了，所以呢 组件访问不了VUE实例中的data 数据，如果访问会报错 我试过了： vue.js:635 [Vue warn]: Property or method "a" is not defined on the instanc
阅读全文
摘要：VUE开发组件的时候 很不方便，现在我们吧 tempate 中的代码 和 声明、注册、绑定 分离开写： 有两种方法分离，先说第一种： 第一种是直接 用script标签，然后他的type属性一定要是 "text/x-template",然后可以注册个id，直接在template中调用即可： <scri
阅读全文
摘要：貌似在VUE2.x之后，VUE就不和以前那样写了， 用语法糖： 把 vue.exdents({template:xxx}) 简化为： 一个对象的形式：｛template：xxx｝ 【其实内部也是调用vue.exdents（） 这个方法的】 代码： <div id="app"> <m-cpn></m-
阅读全文
摘要：父组件和子组件 在前面我们看到了组件树： 1.组件和组件之间存在层级关系 2.而其中一种非常重要的关系就是父子组件的关系 直接上代码 然后分析： <div id="app"> <p-a></p-a> </div> <script src="js/vue.js"></script> <script>
阅读全文
摘要：什么是组件化？ 如果将一个复杂的问题，拆分成很多个可以处理的小问 题，再将其放在整体当中，你会发现大的问题也会迎刃 而解，那么组件化开发也是类似于这样的思想： 如果我们将一个页面中所有的处理逻辑全部放在一 起，处理起来就会变得非常复杂，而且不利于后续 的管理以及扩展。但如果，我们将一个页面拆分成一个
阅读全文
摘要：三个： 第一个是 lazy修饰符：【懒】 我们都知道你绑定了之后 他是实时更新的，但是我们一般不需要他这样，如果我们是用户输入账号或密码的时候，我们离开焦点或按回车后才是确定输入完毕，那么那个时候才绑定不是最好的嘛，所以： <div id="app"> <input type="text" plac
阅读全文
摘要：v-model 这个指令用于双向绑定 input 的值，比如下面有个 输入框，他的值就可以用v-model 来绑定： <div id="app"> <input type="text" v-model = "message"> <h2>{{message}}</h2> </div> <script>
阅读全文
摘要：https://cn.vuejs.org/v2/guide/filters.html 貌似VUE 三点多以后就不支持过滤器了 你可以去百度一下 能淘汰的话证明用的不多了
阅读全文
摘要：如图所示，首先数据源来至于JSON ，自己去导即可： 文件分布分为3部分 html vue代码 和 c3样式 提示 关于表格遍历你可以这样写： <tr v-for="item in books"> <td v-for="i in item">{{i}}</td> </tr> 但是这样的遍历 仅此适用
阅读全文