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);