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
|
2、this.$router.push() (函数里面调用)
|
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);