VueJS 基础

阅读更多
VueJS 基础

所有的 Vue 组件都是 Vue 实例

slot

作用是否用于将子组件包含的元素预留存放的位置,但是里面的元素是不属于子组件的,它是属于父组件的,变量和方法都是访问父组件的,受父组件所控制。

12345


因为没有slot,所以 12345 是不会显示的


12345


12345  这样就会显示出来


12345 56789

加上名字就会放到对应名字的slot中


【12345】
 

【1】name=’first’的slot标签被父组件对应的标签所替换(slot标签内部的内容被舍弃);

【2】name=’last’的slot标签,因为没有对应的内容,则显示该slot标签内部的内容。


VUE表达式,可以在标签内容上或绑定的属性上,表达式可以做到一个值的改变会引起表达式重新计算的变化,表达式可以是计算属性\方法\属性
{{5+5}}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
菜鸟教程


v-for 指令可以迭代对象,也会有index的参数传入,key参数传入


计算属性
在处理一些复杂逻辑时是很有用的。
依赖变量发生改变时,它也会更新。与表达式类似,只不过不用每次引用都写表达式

计算属性与方法都可以在标签中引用,其依懒发生改变,都会重新计算和调用
但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

重新渲染
一般情况下vue推崇的是数据驱动 也是数据更新进而使组件得以重新渲染。


监听属性,通过监听属性进行相关的逻辑处理(如改变另一个属性的值等)
如果存在依懒多个属性的话可以使用计算属性\方法的方式达到监听多个属必引起的变化作出处理的功能

可以在挂载时进行一次初始化,也可以获取路由中的相关参数


ES6中的字符串模板
` ${row.name}`; //用``,可以写变量在里面,不用一个个字符串进行拼接





  • checkboxTest.zip (351.2 KB)
  • 下载次数: 1
  • checkboxTest.zip (351.2 KB)
  • 下载次数: 2
  • elementTabsComponent.zip (1.4 KB)
  • 下载次数: 1
  • vueTest.zip (355.8 KB)
  • 下载次数: 2

你可能感兴趣的:(VueJS 基础)