Vue随记

属性字段：

el:选择器

data:数据

methods:函数

computed：计算属性 

reversedMessage:function(){

//编写如何反转去掉单引号反转后在加入单引号

  return this.msg.split("").reverse().join("")

}

vue:指令

1.1: v-model  数据绑定

1.2: v-html

1.3: v-text

1.4: v-bind 属性绑定  简写  ：

1.5: v-on   @  指令绑定一个事件监听器

once只触发一次 stop阻止冒泡事件 prevent阻止默认事件

left左键 right右键 middle滚轮

@mouseup.right

@keyup 键盘按下

@keyup.enter  键盘绑定回车

event对象keyCode方法获取键盘

@keyup="show($event)" 绑定任意

String.fromCharCode( )键盘序号转成字母

show(e){

   let code = String.fromCharCode(e.keyCode);

   this.msg2=code;

}

v-on：submit  表单提交

v-on：submit.prevent  阻止默认提交

条件渲染指令

1.11：v-if：false删除元素

1.12：v-else-if

1.13：v-else

1.14：v-show  改变display样式

v-show有很高的初始渲染开销，适用于非常频繁地切换

1.15：v-for 循环遍历

1.16：v-model.lazy（懒惰的） 失去焦点时同步

1.17：v-model.number

1.18：v-model.trim

Vue过滤器：filter  需要注册过滤器

先定义本地的template组件模板

1.全局过滤器：如果你定义了一个全局过滤器，它必须在Vue实列之前定义

        1、先定义好过滤器2、在实例化vue对象

        Vue.filter(过滤器名，function(){

        

        })

2.局部过滤器:  在

new Vue({

        el:"#app",

        data:{

        

        },

        filters:{

        

        }              

})

        

3.vue.directive 注册指令

4.Vue组件 (全局) ：

    1.调用vue.extend()创建一个组件构造器，

    该构造器中有一个选项对象的template属性可以用来定义组件要渲染的HTML

    2．使用vue.component ()注册组件，需要提供2个参数:组件的标签和组件构造器。

5．局部组件

1．组件构造器在外部编写

2.注册组件时在Vue 实例中注册

6、父子组件

    6.1：子组件获取父组件的数据  

            props:[属性1,属性2... ..]

    6.2：父组件获取子组件的数据

            

7、vue路由基础   router

8、导航守卫：

        router.beforeEach((to,from.next)=>{

                

        })

        参数1：to    即将要进入的目标路由对象

        参数2：from    当前导航正要离开的路由

        参数3：next    放行  前进

9、安装Vue-cli脚手架

    1、从npm中获取资源

        npm前段（maven）服务器可以进行资源的下载和上传

10、

1. dos命令vue create hello 名字小写

2．选择预设模板。这里选择“Manually select features”(手动选择特征)

3、选择vue插件 通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。

4、cd进入到项目磁盘路径

5、npm run  serve 运行

11、项目目录

src：项目源代码

        asstes ：css图片等资源目录

        components：公共组件目录

        router：路由  导航

        view：视图  

            组件编写完后import导入views中

        App.vew：总组件

        main.js  总js文件

        package.json：模块依赖

12、AJAX技术：异步刷新

    1、一种创建交互式网页应用的网页开发技术。

    2、可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

13、Vue生命周期：

钩子函数 ：

1、beforeCreate:组件实例创建之前

2、created：组件实例创建完毕                    常用

3、beforeMount：组件DOM挂载之前

4、mounted：组件DOM挂载完毕                常用

5、beforeUpate：组件数据更新之前            常用

6、updated：组件数据更新完毕

7、beforeDestroy：组件实例销毁之前

8、destroyed：组件实例销毁完毕

当style标签里面有scoped属性时，它的css只作用于当前组建的元素

总结：params方式与query方式的区别：

query方式：

类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。

利用路由规则中的path跳转。

params方式：

类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。

利用路由规则中的name跳转。

使用this.$router.push方法可以实现路由跳转，方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。

通过this.$router.go(n)方法可以实现路由的前进后退，n表示跳转的个数，正数表示前进，负数表示后退。

如果只想实现前进后退可以使用this.$router.forward()（前进一页），以及this.$router.back()（后退一页）。