VUE初级

创建项目

1、在命令窗口输入  node -v  若有版本号，则可用，否则需下载node
2、安装cnpm：一个国内的npm工具
安装淘宝镜像中的cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
3、使用cnpm安装vue
cnpm install vue -g
4、安装vue命令行工具
cnpm install vue-cli -g
5、在项目文件夹中进入命令窗口
6、创建项目
vue init webpack 项目名 
配置文件，只有第一个y/n选y，其余都是n
7、进入项目  cd 项目名
8、安装依赖  cnpm install
9、启动项目  npm run dev
10、安装axios跨域   cnpm install --save axios

VUE指令

v-cloak 解决闪烁
v-html  html格式插入
v-text  纯文本插入
v-bind(简写 : )  绑定属性
v-on(简写 @ ) 
v-model  绑定表单
v-if   条件成立显示，否则无代码
v-show  条件成立显示，不成立为隐藏

Vue正则

字符串**.match(/条件/)** 条件与python相同

\w	数字字母下划线
\d	纯数字
[a-zA-Z]	纯字母
\D	非数字
\W	非数字字母下划线

特有的匹配规则

i ：匹配时忽略大小写         str.match(/\w/i)
g：全局匹配模式            str.match(/8/g)   全局找8
m：多行匹配               str.match(/8/m)

Vue前后端交互配置（VUE中）

1、src的main.js中
import axios from 'axios'
Vue.prototype.axios=axios

2、config的index.js中
proxyTable:{
    '/api':{
        target:'http://127.0.0.1:8000',
            changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
    }
},

VUE阻止表单提交

form标签中添加@submit='函数名'  <form @submit='函数名'>  </form>

script的methods中添加函数：

函数名:function(e){
	e.preventDefault()
}

Vue路由跳转及获取参数

• 路由跳转   字典的key可加引号可不加
<router-link :to="{'name':'Detail',params:{'id':'g.id'}}">
    <a href=""> <img src="images/goods/goods003.jpg"></a>
</router-link>

• 获取参数
var goods_id = this.$route.params.id

Vue组件跳转

//跳转1 总路由跳转
window.location.href='http://localhost:8080/#/deletegoods'

//跳转2  组件路由跳转
this.$router.push('/deletegoods')

Vue删除sessionStorage

清除所有：sessionStorage.clear() 
根据key清除：sessionStorage.removeItem('num')

Vue父子组件嵌套

1、导入子组件
import pagination from '@/components/pagination'

2、注册子组件（与name同级）
components:{
    'v-pagination':pagination
},
    
3、调用子组件
<v-pagination></v-pagination>

父子组件传值

父组件传到子组件

1、父组件传
<v-pagination :pages="this.pages" ></v-pagination>

2、子组件接收（子组件内加props，与name同级）
props:['pages'],
    
3、子组件调用
    1、直接展示{{ pages }} 
	2、函数调用  this.pages

子组件传到父组件

1、父组件传到子组件一个带一个参数的函数
    1-父组件内写函数：
    methods:{
        changepage:function(val){
            this.p=val;
            return;
    	}
    }
    2-传函数（最好用v-on，不用:）
        <v-pagination v-on:param="changepage"></v-pagination>

2、子组件传给父组件值
this.$emit('param',20)    //将20作为函数的参数传入父组件，并调用函数

3、父组件接收
methods:{
    changepage:function(val){
        this.p=val;
        return;
    }
此时函数被调用，变量p变为子组件传入的值

Vue添加图片

图片：<inputtype="file"id="image"><br>
var data=new FormData();
var image=document.getElementById('image').files[0];  根据id获取到图片
data.append('img',image,image.name)
axios传参
this.axios({
    url:'/api/api/addgoods/',
    data:data,
    method:'post',
    headers:{'Content-Type':'multipart/form-data'}
}).then((res)=>{
    alert(res.data.message)
}).catch((err)=>{
    console.log(err)
})

Vue定时任务

mounted() {
	setInterval(this.hintxiulian, 30000);  // 定时30s执行  hintxiulian为函数
}