Vue系列
文章平均质量分 52
里面会包括一些前端的算法、框架、原理等等
IsPinocchio
学之广在于不倦,不倦在于固志
展开
-
Vue源码前戏之Mustache模板引擎的源码解析
模板引擎是一个帮助我们在一个有规则的字符串内渲染数据的工具。 举一个例子: var str = `<h1>我叫{{name}},来自于{{school}}</h1>` var name = '王五' var school = '一个神秘的大学' 现在有一个str字符串,里面带有花括号的子串需要被渲染成对应的数据,得到这样的字符串,渲染到页面中,就形成了模板引擎。 我叫王五,来自于一个神秘的大学 当然mustache有更复杂的语法,比如: var templateStr = `原创 2021-03-27 17:15:43 · 276 阅读 · 0 评论 -
Vue组件化之父子组件的相互访问
父访问子 children-refs 当父组件想直接调用子组件的数据或方法时。 父组件访问子组件:使用$children或 $refs children 在父组件中调用this.$children会返回包含子组件对象的数组,用索引找到对应的子组件 父组件methods:{ btnclick(){ this.$children[0].showMessage() //即可调用索引为0的子组件中的showMessage方法 } } ref 父组件中调用this.$refs会返回{ref:原创 2021-01-28 12:48:52 · 152 阅读 · 0 评论 -
Vue组件化之父子组件之间的双向绑定
例如子组件里有input,想实现子组件props里的属性和value值实现双向绑定,可以在子组件中添加一个data或computed属性来代替props中的属性,然后实现绑定。 //如果不改变父组件的值 <div> <cpn :cmessage="message"> </div> <template> <h2>{{cmessage}}</h2> <input type="text" v-model="dmessa原创 2021-01-27 22:24:39 · 186 阅读 · 0 评论 -
Vue组件化之父子组件
在父组件里使用子组件时,父组件的模板最外层一定要有div块 组件的数据存放问题 组件内部是无法访问vm实例里的data数据的,组件有自己的保存数据的位置。 组件也有data、methods、生命周期函数等属性,但data必须是一个函数且返回的是一个对象,对象内部保存着数据。 为什么组件里的data必须是函数形式? 当重复使用组件时,如: <div> <cpn><cpn> <cpn><cpn> <cpn>&原创 2021-01-24 10:38:52 · 181 阅读 · 0 评论 -
Vue组件化之构造组件
在构建项目中尽可能的将页面分成一个个小的、可复用的组件。 使用步骤 一、构造全局组件(但必须在实例挂载的元素中使用) 创建组件构造器 Vue.extend(),里面传递的参数是包含组件选项的对象 const cpnC = Vue.extend({ template:``, components:{} //括号里为子组件 }) 注册组件 Vue.component(cpn,cpnC) 给构造器中的模板命名为cpn(即标签的名字) 使用组件 二、语法糖注册全局组件 即将一二步合原创 2021-01-23 09:53:23 · 351 阅读 · 3 评论 -
Vue的一些常用指令
在调用方法时,参数若不加双引号,会默认为实例中的变量或方法去寻找。方法会默认传递进event参数。 v-for: <li v-for="(item,index) in list">{{item}}</li> //遍历数组 <li v-for="(item,index) in list">{{item}}</li> //遍历对象 <li v-for="(value,key,index) in dict">{{value}}-{{key}原创 2021-01-22 11:26:38 · 157 阅读 · 0 评论 -
Vue实例的常用选项
用new Vue()创建实例的时候,里面传递的参数一个对象,该对象有很多默认的属性。 const app = new Vue({ el:'#app'; //用于挂载要管理的元素 data:{};//定义数据。可以是自己定义的,也可也是服务器请求来的 methods:{}, //调用几次就会执行几次,没有缓存,性能不好。 computed:{},//计算属性用于简便的对数据进行变换,可不加小括号()。 components:{cpn1:cpnC,cpn2:`<d原创 2021-01-21 11:27:30 · 370 阅读 · 0 评论