vue常见知识

目录

基本指令

常见属性

生命周期

组件声明

组件传值

路由使用

路由传参

axios

字符串操作

Json

---

基本指令

根标签下写html样式,使用到的属性及方法直接用名字即可,无需this或vue对象名

v-model→双向数据绑定

v-text

v-bind:属性名=’data中的属性’→绑定属性→可省略v-bind

{ {属性}}óv-text=’属性’→引用data中数据,双{ {}}内可运算式

:class=’{}’→添加类名,大括号内可类名字符串,可运算代码

v-on:事件名ó@事件名→添加事件

stop→事件后接.stop阻止冒泡事件

prevent→事件后接.prevent阻止默认事件触发

prevent /prɪˈvent/ v. 阻止，阻碍

v-show→显示/隐藏

v-if→加载与否(v-if-else、v-else)

v-for→v-for=”i in 10” :key=’i’纯数字则1开始遍历→数组(item,index) in list参数依次为内容和索引,按索引遍历→对象(item,attr,index) in obj参数依次为属性值,属性名,索引

key→唯一标识,使生成的节点有独立数据,值不同即可

$event→获取当前节点→在js中获取当前节点对象兼容写法obj=参数.target || 参数.srcElement

常见属性

el:’#id名’→匹配模板的根标签,可以类名和id名

data→定义数据,在vue对象内可直接this.属性名获取

directives→设置自定义指令,directives:{自定义指令名:function(el,binding){}},其中el为当前指令所在dom,其中binding包含了指令的参数,binding.value可以获取到值(v-指令=’值’)

Vue.directive("自定义指令名",{

    //指令加载之前自动调用

    bind:function (el,binding) {

        el.innerHTML=binding.value.toLowerCase();

    },

    inserted: function (el, binding) {

        console.log("inserted:被绑定元素插入父节点时调用");

    },

    update: function (el, binding) {

        console.log("update:之前的值" + binding.oldValue + "被绑定元素所在的模板更新时调用，而不论绑定值是否变化");

    },

    componentUpdated: function (el, binding) {

        console.log("componentUpdated:之前的值:" + binding.oldValue + "被绑定元素所在模板完成一次更新周期时调用");

    },

    unbind: function (el, binding) {

        //无法手动解绑

        console.log("unbind:只调用一次， 指令与元素解绑时调用");

    }

})

$refs→元素添加ref=’自定义名’→js中通过this.$refs.自定义名以获取dom

methods→定义函数位置

methods /ˈmeθədz/ n. 方法，方式；研究方法

计算属性和过滤器在html中直接方法名可不要括号,默认传参为当前计算/过滤值,其他参数排在其后

computed→计算属性不需