- 博客(12)
- 收藏
- 关注
RSS订阅原创 关于Vue的学习笔记（十二）
Vue的父子组件 在组件树中，组件与组件存在层级关系，而其中一种非常重要的关系就是父子组件的关系。参考以下案例，做一个简单关系概要： <div id = "app"> <h2>app</h2> <cpn></cpn> </div> <script src = "../JS/vue.js"></script> <script> const cpn2 = Vue.extend({
2021-08-09 22:03:16
96
原创 关于Vue的学习笔记（十一）
Vue的组件化 组件化是Vue.js中的重要思想：它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一棵组件树。 组件化思想的应用：有了组件化的思想，我们在之后的开发中就要充分利用它，尽可能将页面拆分成一个个小的可复用的组件，这样让我们的代码更加方便组织和管理，并且扩展性很强（因此组件开发常常离不开slot标签的应用） 通常我们将包含一个功能模块的div，或是多页面均需展示的功能栏div拆分成组件。 注册组件的基本步骤 组件的使用分成三个步骤：1.创
2021-08-08 16:50:15
87
原创 关于Vue的学习笔记（十）
关于Vue的一些基本参数、方法及其应用规则 表单绑定v-model 表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。以下面代码为案例： <div id = "app"> <input type="text" v-model="message"> <h2>{{message}}</h2> </div> <script src = ".
2021-08-07 22:43:58
100
原创 关于Vue的学习笔记（九）
关于Vue的一些基本参数、方法及其应用规则 v-cloak 在某些情况下，我们的浏览器可能会直接显示出未编译的mustache标签。如进行以下异步操作时，浏览器显示的并不是我们预设好的：Hello world，而是将整个mustache标签以字符串的形式输出： <div id = "app"> <h2>{{message}}</h2> </div> <script src = "../JS/vue.js"></script>
2021-08-07 17:58:11
61
原创 关于Vue的学习笔记（八）
关于Vue的一些基本参数、方法及其应用规则 关于ES6中for循环的增强写法： 在笔记六中有提过ES6中新增了对对象的属性和方法做了新的增强写法，除了这些，ES6中同时对for循环也做了相应的增强写法，如下所示： //1.第一种写法，类似于java中对集合对象的遍历 for(let i in this.books){ console.log(this.books[i]); } //2.第二种写法 for(let i of this.books){ console.log(this.b
2021-06-24 23:50:55
115
原创 关于Vue的学习笔记（七）
关于Vue的一些基本参数、方法及其应用规则 v-for遍历：v-for的语法类似于javascript的for循环，格式类如item in item。v-for可用于对数组、对象的遍历。 v-for遍历数组的两种形式： 1.在遍历过程中，没有使用索引值（下标值） 格式：v-for="item in items" 依次从items中取出item并且在元素的内容中，我们可以使用Mustache语法来使用item 2.遍历过程中，获得索引值 格式：v-for=(item,index) in item
2021-06-22 23:03:36
443
2
原创 关于Vue的学习笔记（六）
关于Vue的一些基本参数、方法及其应用规则 Vue的对象增强写法 ES6中，对对象自变量进行了很多增强，属性初始化与方法的简写与对比如下 //ES6之前 let name = 'why' let age = 18 let obj1 = { name: name, age: age, test: function () { console.log('obj1的test函数') } } console.log(obj1); //ES6之
2021-06-22 21:56:59
265
原创 关于Vue的学习笔记（五）
关于Vue的一些基本参数、方法及其应用规则 v-on：绑定事件监听器。 在前端开发中，我们需要经常用到交互。这个时候，我们必须监听用户发生的事件，比如点击、拖拽、键盘事件等等，在Vue中我们使用v-on帮助我们便于监听。 语法糖/缩写：@ 预期：Function|Inline Statement|Object 参数：event 依然以之前的计算器作为例子： <div id="app"> <h2>计算器:{{count}}</h2> <butt
2021-06-22 18:25:37
74
原创 关于Vue的学习笔记（四）
关于Vue的一些基本参数、方法及其应用规则 修饰标识符const,let,var之间的联系与应用 const：在许多语言中，体现的主要作用是将某个变量作为常量，如c++/c，在Javascript也是如此，使用const修饰的标识符为常量，不可以再次赋值。 const注意事项： 1.使用const修饰的变量不可被重复赋值，如 const a = 10; a=30//不可修改，否则报错 2.使用const修饰的变量必须赋值，如 const a;//使用const修饰的标识符必须一开始为变量初
2021-06-22 17:29:32
115
原创 关于Vue的学习笔记（三）
关于Vue的一些基本参数、方法及其应用规则 options： 创建Vue实例的同时，我们需要对传入实例对象的options进行编写才能使我们的DOM得到渲染。 对于初学者（我）而言，Vue中options主要包括一下一些选项： （选项：挂载类型） el：（string|HTMLElement） 作用：决定之后Vue实例会管理哪一个DOM data：（Object|Function） 作用：Vue实例对应的数据对象 methods：{[key:string]：Function} 作用：定义
2021-06-22 16:08:46
50
原创 关于vue的学习笔记（二）
与JS（命令式）最大不同的是，vue属于属于响应式框架，声明式渲染，这里简单写一些关于命令式与响应式的区别。 命令式编程是我们一步一步告诉机器需要怎么做，机器按部就班地执行命令。如关于js代码的编写中，代码将被按序一行行被读写编译完成，即执行的顺序是定死了的，灵活性很低，也很难复用。 声明式编程是我们告诉机器我想要这样的结果，而不管他是怎么实现的，这更符合人类的思维。用一个基本程序员能理解的话是，我已经写好了可以用来实现功能的方法，如果需要这个功能只需要调用该方法即可，而不用知道方法在机器被实现的具体步
2021-06-22 15:29:06
95
原创 关于Vue的学习笔记（一）
使用vue.js框架安装的三种方法 （1）直接cdn引用 选择引入开发环境版本还是生产环境版本（写个人项目推荐使用开发环境版本） 开发环境版本（包含了有帮助的命令行警告） <script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 生产环境版本（优化了尺寸和速度） <script src = "https://cdn.jsdelivr.net/npm/vue"></scri
2021-06-22 14:47:12
49
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人