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 · 281 阅读 · 0 评论 -
Vue组件化之父子组件的相互访问
父访问子 children-refs当父组件想直接调用子组件的数据或方法时。父组件访问子组件:使用$children或 $refschildren在父组件中调用this.$children会返回包含子组件对象的数组,用索引找到对应的子组件父组件methods:{ btnclick(){ this.$children[0].showMessage() //即可调用索引为0的子组件中的showMessage方法 }}ref父组件中调用this.$refs会返回{ref:原创 2021-01-28 12:48:52 · 155 阅读 · 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 · 192 阅读 · 0 评论 -
Vue组件化之父子组件
在父组件里使用子组件时,父组件的模板最外层一定要有div块组件的数据存放问题组件内部是无法访问vm实例里的data数据的,组件有自己的保存数据的位置。组件也有data、methods、生命周期函数等属性,但data必须是一个函数且返回的是一个对象,对象内部保存着数据。为什么组件里的data必须是函数形式?当重复使用组件时,如:<div> <cpn><cpn> <cpn><cpn> <cpn>&原创 2021-01-24 10:38:52 · 183 阅读 · 0 评论 -
Vue组件化之构造组件
在构建项目中尽可能的将页面分成一个个小的、可复用的组件。使用步骤一、构造全局组件(但必须在实例挂载的元素中使用)创建组件构造器 Vue.extend(),里面传递的参数是包含组件选项的对象const cpnC = Vue.extend({ template:``, components:{} //括号里为子组件})注册组件 Vue.component(cpn,cpnC) 给构造器中的模板命名为cpn(即标签的名字)使用组件二、语法糖注册全局组件即将一二步合原创 2021-01-23 09:53:23 · 356 阅读 · 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 · 160 阅读 · 0 评论 -
Vue实例的常用选项
用new Vue()创建实例的时候,里面传递的参数一个对象,该对象有很多默认的属性。const app = new Vue({ el:'#app'; //用于挂载要管理的元素 data:{};//定义数据。可以是自己定义的,也可也是服务器请求来的 methods:{}, //调用几次就会执行几次,没有缓存,性能不好。 computed:{},//计算属性用于简便的对数据进行变换,可不加小括号()。 components:{cpn1:cpnC,cpn2:`<d原创 2021-01-21 11:27:30 · 373 阅读 · 0 评论