vue1

1、vue的环境配置
安装nodejs 在http://nodejs.cn
检测nodejs是否安装成功 cmd node-v
npm是世界上最大的软件注册表 下载nodejs自带npm
开发不使用npm(来自世界各地的资源 下载不稳定) 使用cnpm
cnpm安装命令 npm install -g cnpm --registry=http://registry.npm.taobao.org
安装vue脚手架 cnpm install -g vue-cli
webpack集成打包
创建项目：vue init webpack 项目文件名 (完整项目安装命令)
整个项目的首页在index.html
cnpm run dev启动文件
完整版的node_modules文件很大
一般使用简洁版 vue init webpack-simple 项目名
现在直接运行简洁版是不能运行的 需要安装依赖 cnpm install
就会出现node_modules
static文件 静态资源文件(js css 图片)
src是开发者文件 要把图片放在static文件里面 放在src文件下会加载不出来
vue文件 temple script style
src/router/inedx.js 里面有路由在路径为“/”时 走helloword.vue文件
2、主文件入口main.js

import Vue from 'vue' //导入vue
import App from './App.vue'  //导入主模板

new Vue({
    el:"#app", //匹配作用的元素
    render:h=>(App) //将主模板渲染到作用元素
})

3、App.vue
数据绑定 {{}}
模板字符串{{'我的名字叫：${obj.name}'}}
数据循环绑定<li v-for="(item,index) in student" :key="index">{{item.name}}</li>
多层渲染(嵌套)<li v-for="(item,index) in student" :key="index">{{item.name+"爱好是："}}</li> <li v-for="(hot,k) in item.hobby" :key="k">{{hot.h}}</li>

export default {
    name:"app",
    data(){
        return {
            a:1,
            str:"fine",
            arr:[1,2,3],
            obj:{
                name:"张三",
                sex:"男",
            },
            student:[
                {
                    name:"小花",
                    sex:"女",
                    hobby:[
                        {h:"篮球"},
                        {h:"乒乓球"},
                        {h:"足球"},
                    ]
                },
                {
                    name:"小黑",
                    sex:"男",
                    hobby:[
                        {h:"篮球"},
                        {h:"乒乓球"},
                        {h:"足球"},
                   ]
                }
            ]
            addclass:"block", //style中设定.block大小
            test:"请输入"
        }
    }
}

4、绑定属性
<div v-bind:title="title"></div>``title="标题"
v-html="title" v-text="title" 把title的值绑定在页面上
绑定class<div class="block"></div> <div :class="addclass">
多个class的绑定<div :class="{'block':true,'bor':true}"> <div :class="['block','bor']">
绑定元素样式<div :style="{'width':'100px','height':'100px'}">
5、vue数据双向
v-modle 表单元素的使用指令 数据双向 后台数据变化 前台自动变化
数据双向 <input type="text" v-model="test" >
vue里面的事件绑定 @click="" 等价于 v-on:click=""
事件执行的方法 在script标签里 与return同级
<button v-on:click="setmsg()"> <button @click="getmsg()">
keypress 方法 同步变换 console.log(this.test)

methods:[
   setmsg(){
       this.test="我修改了";
   },
   getmesg(){
       console.log(this.test)
   }
]

6、获取dom元素 通过ref 也可以通过原生js进行获取
<div ref="domlist">
<button @click="getdom()">获取dom元素</button>

getdom(){
    console.log(this.$ref.domlist);
}

console.log(e.target.getAttribute("data-uid"))
7、列：未完成事项

<input @click="change(index)" type="checkbox" :checked="item.iswan">
//把默认为 未完成的事项更改为已完成
change(index){
    this.listdata[index].iswan=!this.listdata[index].iswan;
    this.setstorage("news",JSON.stringify(this.listDate));
}
//-------------
<input type="text" v-model="val" @keyup="addDate">
//输入新的事件
addDate(e){
    if(e.keyCode===13){
    if(this.val.replace(/\w/g,"")){
    let todo={
        id:this.listdata.length+1,
        name:this.val,
        iswan:false
    }
        this.listdata.push(todo)
        this.val="";
        //写入缓存
        this.setstorage("news",JSON.stringify(this.listDate));
    }
    }
}
//删除
<button @click="btndelete(index)">
btndelete(index){
    this.listdata.splice(index,1);
}

查看缓存的方法 控制台application里面的storage

mounted(){
    //读取缓存
    this.listdata=this.getStorage();
}

//存
setstorage(key,val){
    localStorage.setItem(key,val)
},
//读
getstorage(){
    return JSON.parse(localStorage.getItem("news"));
}

8、模块化封装缓存
localstorage.js

let storage={
    setstorage(key,val){
        localStorage.setItem(key,JSON.stringify(val));
    },
    getstorage(key){
        return JSON.parse(localStorage.getItem(key));
    },
    clearstorage(key){
        localStorage.removeItem(key);
    },
    clearall(){
        localStorage.clear();
    }
}
//模块暴露
export default storage；

在其他的vue文件中引入这个方法import storage from './路径'
在methods中引入storage.setstorage("news",this.listdata)
9、vue生命周期
①beforeCreate 初始化之后 创建实例之前执行的钩子事件
②created 实例创建完成后执行的钩子
③beforeMount 挂载开始之前调用
④mounted 编译好的html挂载到页面完成后执行的事件钩子
⑤beforeUpdate 更新之前的钩子
⑥update 更新之后的钩子
⑦beforeDestroy 实例销毁之前执行的钩子
⑧destroyed 实例销毁完成时执行的钩子

beforeCreate(){
    console.log(1);
}
created(){
    console.log(2);
}
beforeMount(){
    console.log(3);
}
mounted(){
    console.log(4);
}
beforeDestroy(){
    console.log(5);
}
destroyed(){
    console.log(6);
}
beforeUpdate(){
    console.log(7);
}
updated(){
    console.log(8);
}

在进入一个简单网页时 beforecreate created beforemount mounted 会触发
beforedestroy destroyed beforeupdate updated 不会触发 只有设置了更新或者销毁操作时才会触发
★beforeupdate updated 的触发

<button @click="updatebtn" v-model="msg">修改数据</button>
export default{
name:"app",
data(){
    return {
        msg:"welcome to your vue.js app",
    }
}
methods:{
    updatebtn(){
        this.msg="修改信息";
    }
}
}

在点击这个btn的时候就触发了信息修改操作 就会触发beforeupdate updated

★beforedestroy destroyed 的触发
我们新建一个vue文件 在app.vue中 引入这个文件
在export default中添加components
挂载：

<button @click="addele"></button>
<v-header v-if="isadd"></v-header>
import headele from './components/header'
data(){
    return(){
        isadd:true;
    }
}
components:{
    "v-header":headele;
}
methods:{
    addele(){
        this.isadd=!this.isadd;
    }
}

header.vue

<div id="headele">{{msg}}</div>
export default{
    name:"headele",
    data(){
        return{
            msg:"我是子组件"
        }
    },
    methods:{
        beforeDestroy(){
        }
        destroy(){
        }
    }
}

10、vue请求数据 vue-resource axios fetch-jsonp
vue-resource 官方的 安装命令cnpm install vue-resource --save
安装完成之后要引入 在main.jsimport vuersource from 'vue-resource'
关联到vue上Vue.use(vueresource)
ajax.vue

<button @click="getajax">请求数据</button>
<ul>
    <li v-for="(item,index) in student" :key="index">
    {{item.name+"------"+item.sex+"----"+item.age}}
    </li>
</ul>
data(){
    return{ 
        student:mull,
    }
}
created:{
    this.getajax();
}
methods:{
    //执行ajax请求
    getajax(){
        let url="public/data/data.json",
        this.$http.get(url).then((res)=>{
            console.log(res);
    //res返回的是response对象 res.body将拿到json数据
        }
        this.student=res.body;
    },
    getdata(){
        console.log(this.student);
    }
}

vue-resource的post不能直接用路径请求本地文件 要用 post可以请求远程路径
axios cros跨域
fetch-jsonp jsonp跨域
11、mockjs数据模拟
cnpm install mockjs --save
新建mock文件夹 下建立mock.js文件
get 和post 的请求方式如下

import Mock from "mockjs";
Mock.mock("/list","get"，{
    result:[
        {
            name:"小花",
            sex:"女"
        },{
            name:"小黑"，
            sex:"男"
        }
    ]
});//请求配置 路径 请求方式 
Mock.mock("/info","post",()=>{
    return {
         result:[
             {
                 name:"小花",
                 sex:"女"
             },{
                 name:"小黑"，
                 sex:"男"
             }
         ]
    }
})

在main.js中引入mock

require("./mock/mock.js");

在app.js中使用vue-resource 请求mock模拟数据

getajax(){
    this.$http.get("./list").then((res)=>{
         console.log(res.body.result);
    })
}

vue-resource是官方的插件还有axios fentch-jsonp
11、axios 跨域
安装 cnpm install axios --save
新建axios.vue要显示的话要挂在app.vue上 标签 import components三步
下面是两种请求方法

<template>
<script>
import Axios from "axios"
mounted(){
    Axios.get("/list").then((res)=>{
        console.log(res.data.result);
    }).catch(()=>{}).finally(()=>{});
    Axios({
        method:"get",
        data:mull,
        url:"/list"
    }).then((res)=>{
        console.log(res.data.result);
    })
}

12、fentch-jsonp跨域
安装 cnpm install fentch-jsonp --save
fetch.vue

<template>
<script>
import fetchjsonp from "fetch-jsonp";
mounted(){
    fetchjsonp.get("url").then((res)=>{
        //jsonpCallback:"custon_callback", 设置回调函数名
        //jsonpCallbackFunction:"getdata"
        //timeout:1000, 设置请求事时间
    }).then((res)=>{
        return res.json();
    })
}

在app.vue中 引入fetch-jsonp 标签 import components

import fetch from "./components/fetch";
components:{
    fetch,
}

13、子父组件传值
★父组件向子组件传值
在index.html中引入css文件 public/css/?
子组件header.vue 父组件app.vue
在export default{}中声明 props属性props:["title"] <div>父容器传递给我的属性----{{title}}</div>

<div id="h-header">
    <div>父容器传递给我的属性为----{{title}}</div>
</div>
export default{
    name:"h-header",
    //props:["title"],
    props:{
    /*限制传递变量类型 类型首字母大写 
    如果app.vue中的 title:123 会报错*/
        'title':String,
    }
    data(){
        return{   
        }
    }
}

app.vue 中注册header 在header的标签里<v-header :title="title">
然后在app.vue的script标签内写出需要传递的title的值

<div id="app">
    <v_header :title="title"></v_header>
</div>
import v_header from "./components/header";
export default{
    name:"app",
    components:{
        v_header,
    },
    data(){
        return {
            title:"商家"
        }
    }
}

★子组件给父组件传值
①通过ref获取

//app.vue
<v_header ref="header">
import v_header from "./components/header";
components:{
    v_header,
}
mounted(){
    let=this.$ref.header;
    //header代表了整个子组件对象
    header.getson();
    console.log(header.title);//输出 商家
}
}

//header.vue
mounted(){
   getson(){
       console.log("父组件执行了我的方法");
   }
}

★子组件主动获取父组件的方法和属性$parent

//header.vue
mounted(){
    console.log(this.$parent);
    let app=this.$parent;
    app.getfather();//会输出 子组件调用我的方法
}

//app.vue
methods:{
    getfather(){
        console.log("子组件调用我的方法")；
    }
}

//header.vue
props:{
    'parent':Object
}
mounted(){
    console.log(this.parent)
}

//app.vue
<v_header :parent="my">
data(){
    return{
        my:this
    }
}

14、非子父组件传值$emit $on
footer.vue
在app.vue挂载footer.vue
建立一个广播文件src/emit/emit.js

//emit.js
import Vue from "vue";
let vue=new Vue();
export default vue;

在header里面发送广播

//header.vue 发送广播
<template>
<button @click="sendmsg">发送广播</button>
<script>
import Emit from '../emit/emit.js';
data(){
    return{
        msg:"我是header",
    }
}
methods(){
    sendmsg(){
        Emit.$emit("sendmessage",this.msg);
        //广播名sendmessage 发送的广播 this.msg
    }
}
<style>

//footer.vue 接收广播
<div>接收数据------{{send}}</div>
import Emit from '../emit/emit.js';
data(){
    return {
        send:"",
    }
}
mounted(){
    Emit.$on("sendmessage",(res)=>{
        console.log(res);
        this.send=res;
    })
}

15、vue路由 vue-router
安装 cnpm install vue-router --save
在main.js中引入vue-router

import Vue from "./App.vue";
//引入路由
import vuerouter from "vue-router";
//配置路由 实例化路由
let router=new vuewrouter({
    mode:"history",
    routes:[
        {
            path:"",
            component:""
        }
    ]
})
//使用路由
Vue.use(vuerouter);
new Vue({
   el:"app",
   router,//挂载路由
   render:h=>h(App),
})

路由的模块化封装src/router/router.js

import Vue from "vue";
import vuerouter from "vue-router";
let router=new vuerouter({
    routes:[
        {
            path:"",
            component:""
        }
    ]
})
Vue.use(vuerouter);
export default router;

//app.vue 
//在配置路由引入某界面的时候将不需要import 标签 和 components
//router-link将会被解析为a链接 router-link路由的入口
<router-link to="/">首页</router-link>
//路由的出口
<router-view></router-view>

我们建立一个子页面 child.vue

<div id="firstpage"></div>

在main.js中引入在app.vue中需要的路由

import firstpage from "./components/child";
import vuerouter from "vue-router";
let router=new vuerouter({
    mode:"history",
    routes:[
        {
            path:"/",
            component:firstpage
        }
    ]
})
Vue.use(vuerouter);
new vue({
    el:"#app",
    router,
    render:h=>h(App)
})

★通过id实现路由的切换寻找详细的内容

//main.js
import news from "./components/news"
let router=new vuerouter({
    mode:"history",
    routes:[
        {
            path:"/news/:id",
            components:news
        }
    ]
})

//app.vue
<div v-for="(item,index) in news" :key="index">
    <router-link :to="'/news/${item.id}'">{{item.title}}</router-link>
    //或者写成 :to="'/news/+index'"
</div>
data(){
    return {
        news:[
            {
                id:1,
                title:"新闻1",
            },{
                id:2,
                title:"新闻2",
            }
        ]
    }
}

//news.vue
<div>{{message}}</div>
data(){
    return{
        list:[
            {
                content:"新闻1的内容"
            },
            {
                content:"新闻2的内容"
            }
            ],
        message:null
    }
}
mounted(){
    this.getdata();
}
methods:{
    getdate(){
        console.log(this.$route.params);
        let id=this.$route.params.id-1;
        this.message=this.list[id].content;
    }
}
//监听路由
watch:{
    "$route"(to,from){
       if(this.$route.params){
            this.getdata();
       }
    }
}

16、mint UI
安装命令cnpm install mint-UI --save
在main.js中引入mint UI

import Mint from "mint-ui";
Vue.use(Mint);

把mint UI里响应的标签放在需要的页面上
！需要引入mint UI的css 在main.js中import 'mint-ui/lib/style.css'
★引入ElementUI
提示插件 Element UI Snippets

//main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);