Vue使用心得笔记

Vue官网：https://cn.vuejs.org

1、生命周期：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

2、展示页面基本命令及事件
       数据双向绑定:v-model="selected"；
       是否显示控制：v-show="show"
       绑定点击事件：@click="del(item)"     v-on 简写为@
       获取当前返回的数据，文本插值：{{ret.jd}}、<span>Message: {{ msg }}</span>
       绑定数据：:total="total"    v-bind省略不写
       ref属性 ：ref="son" 
       for循环：<li v-for="(item ,index) in ret" :key="index">
       命名规则：在 JavaScript 中是 postTitle,在HTML中用post-title

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

3、script部分

<script>
  import { Toast } from 'mint-ui';//提示，引入mint-ui框架
  import  getToken from '../../components/getToken.js';//引入js
  import PagingPlug from '@/pages/CqPage/PagingPlug';//分页插件,引入Vue文件
  export default {
    name:'Svc-DraftBox1',
    data(){
      return{
        selected: "1",
        ret:[],
        showPag:false,
        total:10,
      }
    },
    props: {    //用于参数传值
      isTotal:{
        type: Boolean,
        default: true
      },
      totalPage:{
        type: Number,
        default: 1000
      }
    }，
    created(){    //created 钩子可以用来在一个实例被创建之后执行代码：
      this.ajaxPost("1","gsp/mng30011");
    },
    computed: {    //计算属性
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    },
    methods :{
      edit(work_id){
        alert("编辑")
      },
      detail(work_id){
        alert("查看详情")
      }
    }
    components: {
      towtop,
      'v-PagingPlug': PagingPlug,
    },
  }
</script>

4、路由跳转
      1、router-link

1. 不带参数  <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。  2.带参数  <router-link :to="{name:'home', params: {id:1}}"> // params传参数 (类似post) // 路由配置 path: "/home/:id" 或者 path: "/home:id" // 不配置path ,第一次可请求,刷新页面id会消失 // 配置path,刷新页面id会保留 // html 取参 $route.params.id // script 取参 this.$route.params.id <router-link :to="{name:'home', query: {id:1}}"> // query传参数 (类似get,url后面会显示参数) // 路由可不配置 // html 取参 $route.query.id // script 取参 this.$route.query.id

      2、this.$router.push() (函数里面调用)

1. 不带参数  this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) 2. query传参  this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) // html 取参 $route.query.id // script 取参 this.$route.query.id 3. params传参  this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

       3.  this.$router.replace() (用法同上,push)
       4.  this.$router.go(n) ()
    this.$router.go(n)
         向前或者向后跳转n个页面，n可为正整数或负整数

ps : 区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

3、定时执行

setTimeout(() => {
    console.log("执行的代码")   
}, timeout);