2020-04-09vue

Vue基本指令

捕获.PNG
捕获.PNG

改变样式

捕获.PNG

v-for

 <p v-for="(i,index) in array">索引值：{{index}}----数据：{{i}}</p>
    <p v-for="(obj,index) in objarray">索引值：{{index}}----数据：{{obj.id}}:{{obj.name}}</p>
    <p v-for="(i,index) in 10">索引值：{{index}}----数据：{{i}}</p>
    <div>
      <input type="text" v-model="id">
      <input type="text" v-model="name">
      <button @click="add">添加</button>
    </div>
    <p v-for="(obj,index) in objarray" :key="obj.id">
      <input type="checkbox" name="" id="">{{obj.id}}---{{obj.name}}
    </p>

v-if与v-show

捕获.PNG
捕获.PNG

过滤器

捕获.PNG
捕获.PNG

生命周期

2.Vue生命周期钩子函数.png
捕获.PNG

动画过渡

捕获.PNG
捕获.PNG

定义组件

捕获.PNG
捕获.PNG

组件中的data和methods

组件中data()必须是一个方法，并且返回一个对象

捕获.PNG

私有化组件

捕获.PNG

组件切换

捕获.PNG

父组件向子组件传值

捕获.PNG
捕获.PNG

子组件调用父组件的方法

捕获.PNG

父组件调用子组件的方法

捕获.PNG

路由的基本使用--组件切换示例

捕获.PNG
捕获.PNG

路由传参

两种方法

捕获.PNG
捕获.PNG

路由嵌套

捕获.PNG
捕获.PNG

监听器与计算属性

使用名称拼接的例子

捕获.PNG

计算属性

捕获.PNG
计算属性的get,set方法
捕获.PNG

监听路由

监听路由的url是否为登录url.如果不是,校验用户是否登录,未登录的情况下跳转到登录页
路由编程式导航
通过代码控制路由,包括传参

捕获.PNG
捕获.PNG