【初级】个人分享 Vue 前端开发教程笔记

<script src="http://cdnjs.xxx"></script> // 使用CDN方法

npm install vue

<div id="#app"> <h1>{{message}}</h1></div>
var vm = new Vue({ el: '#app', data: {  message: 'hello world, 我是掘金，魔王哪吒' }})

<div id="app"> <h1>dadaqianduan is {{message}}</h1>  <input type="text" v-model="message"></div>

<div id="app"> <message content="dadaqianduan"></message></div>
<script type="text/javascript"> var Message = Vue.extend({  props: ['content'],  template: '<h1>{{content}}</h1>' })  Vue.component('message', Message);  var vm = new Vue({  el: '#app', })</script>

$npm install --global vue-cli
$vue init webpack my-project
$cd my-project
$npm install
$npm run dev

var data = {a:1}

var vm = new Vue({ data: data})
vm.$data === data // truevm.a === data.a // true
vm.a = 2data.a // 2
data.a = 3vm.a // 3

<my-component title="myTitle" content="myContent"></my-component>
var myComponent = Vue.component("my-component",{ props: ['title','content'], template: '<h1>{{title}}</h1><p>{{content}}</p>'})

<button v-on:click="daBtn">dadaqianduan</button>
new Vue({ el: '#app', data: {a:1}, methods: {  daBtn: function(){   console.log(this.a);  } }});

<span>hello {{name}}</span>

<span v-once>{{name}}</span>

<div v-bind:id="'id-'+id"/></div>
<div :id="'id-'+id"></div>

{{time | paramsTime}}

var vm = new Vue({ el: '#app', data: {  firstName: 'da',  lastName: '哪吒', } computed: {  fullName: function() {   // this 指向vm实例   return this.firstName + ' ' + this.lastName  } }});
<p>{{firstName}}</p><p>{{lastName}}</p><p>{{fullName}}</p>

var vm = new Vue({ el: '#el', data: {  num: 100, } computed: {  price: {   set: function(newValue){    this.num = newValue * 100;   },   get: function() {    return (this.num/100).toFixed(2);   }  } }});

<input type="text" v-model="message"/>
<span>dadaqianduan {{message}}</span>

<label><input type="radio" value="male" v-model="gender"> 男 </label><label><input type="radio" value="famale" v-model="gender"> 女 </label>
<p>{{gender}}</p>

<input type="checkbox" v-model="checked"/>
<span>dadaqianduan{{checked}}</span>

<label><input type="checkbox" value="1" v-model="multiChecked">1</lable><label><input type="checkbox" value="2" v-model="multiChecked">2</lable><label><input type="checkbox" value="3" v-model="multiChecked">3</lable><p>{{multiChecked.join('|')}}</p>

<select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option></select><span>dadaqianduan: {{selected}}</span>

<select v-model="multiSelected" multiple> <option selected>A</option> <option>B</option> <option>C</option></select><span>dadaqianduan: {{multiSelected.join('|')}}</span>

// checkbox<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">

选中：vm.checked==vm.a
未选中：vm.hchecked==vm.b

<div class="da" v-bind:class="{'active':active, 'unactive':!active}"></div>
vm实例中需要包含：data: { active: true}

<div v-bind:class="[classA, classB]"></div>
data: { classA: 'class-a', classB: 'class-b',}

<div v-bind:style="dada"></div>
data: { dada: {  color: 'green',  fontSize: '10px' }}

<div v-bind:style="{ fontSize: color: 'green' }"></div>

<div v-bind:style="[ styleObjectA, styleObjectB ]"></div>

<ul><li v-for="item in items">　　 <h3>{{item.web}}</h3>　　 <p>{{item.da}}</p> </li></ul>var vm = new Vue({el : '#app', data: {　　 items : [　　　 { title : 'web-1', description : 'da-1'},　　　 { title : 'web-2', description : 'da-2'},　　　 { title : 'web-3', description : 'da-3'},　　　 { title : 'web-4', description : 'da-4'}　　 ] }});

vm.$set('item[0]', {title: 'da'})

<form v-on:submit.prevent="onSubmit"></form> // 阻止表单默认提交事件
<form v-on:submit.stop.prevent="onSubmit"></form> // 阻止默认提交事件且阻止冒泡
<form v-on:submit.stop.prevent></form> // 也可以只有修饰符，并不绑定事件

Vue.component('child', Child) // 全局注册子组件<child ….></child> // 子组件在其他组件内的调用方式
var Child = Vue.extend({template : '#child',data : function() {　　 return {　　　 ….　　 } }….})

<img v-bind:src="avatar"/>new Vue({ data: {  avatar: 'http://' }})

<message v-re:title content="title"></message><message v-ref:sub-title content="subTitle"></message>
var Message = Vue.extend({ props: ['content'], template: '<h1>{{content}}</h1>'});Vue.component('message', Message);

<div v-cloak>{{msg}}</div>

<div v-global-directive></div>

var com = Vue.extend({ directives: {  'localDirective': {} }});

{{time | paramsTime }}

Vue.filter('date', function(value){ if(!value instanceof Date) return value; return value.toLocalDateString();})
</div> {{ date | date }}</div>var vm = new Vue({ el: '#app', data: {  date: new Date() }})

var MyComponent = Vue.extend({...})

Vue.component('my-component', MyComponent);

<div id="app"> <my-component></my-component></div>
var MyComponent = Vue.extend({template : '<p>掘金 魔王哪吒</p>'})
Vue.component('my-component', MyComponent)var vm = new Vue({el : '#app'});

var Child = Vue.extend({template : '<p>dadaqianduan.cn</p>'});
var Parent = Vue.extend({template: '<div> 　　 <p>dada</p>　　 <my-child></my-child>　　 </div>', components: {　　 'my-child': Child }});

// 全局注册Vue.component('my-component', {template : '<p>dadaqianduan.cn</p>'})
// 局部注册var Parent = Vue.extend({template: '<div>　　　 <p>掘金 魔王哪吒</p> 　　　 <my-child></my-child>　　 </div>', components: {　　 'my-child': {　　　　template : '<p>dada</p>'　　 } }});

Vue.component('my-child', {props : ['parent'],template: '<p>{{ parent }} is from parent'})<my-child parent="魔王哪吒"></my-child>

prop: { type: Object, default: function() {  return {a: 'a'} }}

events : {'add' : function(msg) {　　 this.todo.push(msg); }}methods: {onClick : function() {　　 this.$emit('add', 'dada'); }}

父组件：
events : {'add' : function(msg) {　　 this.todo.push(msg); }}
子组件：
methods: {toParent : function() {　　 this.$dispatch('add', 'dada'); }}

<child-todo v-ref:first></child-todo>

<keep-alive> <component :id="currentView"> </component></keep-alive>

// 组件被创建之前beforeCreate(){ console.log("组件被创建之前")}created(){ console.log("组件被创建之后")}beforeMount(){ console.log("组件被渲染之前")}mounted(){ console.log("组件被渲染之后")}beforeUpdate(){ console.log("数据改变渲染之前")}updated() { console.log("数据改变渲染之后}beforeDestory(){ // 组件销毁之前}destoryed(){ // 销毁之后}

// 注册一个全局自定义指令Vue.directive('focus', { inserted: function(el){  // 聚焦元素  el.focus() }})

directives: { focus: {  // 指令的定义  inserted: function(el){   el.focus();  } }}

{{message | capitalize}}
<div v-bind:id="rawId | formatId"></div>

filters: { capitalize: function(value) {  if(!value) return ''  value = value.toString()  return value.charAt(0).toUpperCase() + value.slice(1); }}

Vue.filter("author",function(value){ return value+"-dadaqianduan";})
Vue.filter("money", function(value){ return "$"+value;})

npm install axios

axios.get('/user?ID=123') .then(function(response){  console.log(response); }) .catch(function(error){  console.log(error); });
axios.get('/user', { paras: {  ID: 123 }}).then(function(response){ console.log(response);}).catch(function(error){ console.log(error);});

axios.post('/user', { firstName: 'da', lastName: 'jeskson'}).then(function(response){ console.log(response);}).catch(function(error){ console.log(error);});

function getUserAccount() { return axios.get('/user/123');}function getUserPermissions() { return axios.get('/user/123/permissions');}axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct, perms){}));

// axios（config）axios({ method: 'post', url: '/user/123', data: {  firstName: 'dada',  lastName: 'dadaqianduan' }});

// 发送get请求axios('/user/123');

created(){ this.$axios.get("http://xxx") .then(res=>{  this.axiosData = res.data }) .catch(error => {  console.log(error); })}}

axios.defaults.baseURL='http://xxx';

// 创建实例时设置的默认值var instance = axios.create({ baseURL: 'http://xxx'});

// 添加请求拦截器axios.interceptors.request.use(function(config){ // 在发送请求之前做些什么 return config },function(error){  // 对请求错误做些什么 return Promise.reject(error);});
// 添加响应拦截器axios.interceptors.response.use(function(response){ // 对响应数据做点什么 return response; },function(errror){ // 对响应错误做点什么 return Promise.reject(error);});

Axios.interceptors.request.use(function(config){ // 在发送请求之前做些什么 if(config.method === 'post'){  config.data = qs.stringify(config.data); } console.log(config); return config;},function(error){// 对请求错误做些什么return Promise.reject(error);});

proxy: { host: '127.0.0.1', port: 9000, auth: {  username: 'jeskson',  password: '123' }}

<div id="app"> <router-view></router-view></div>
const User = { template: '<div>User</div>`}
const router = new VueRouter({ routes: {  {path: '/user/:id', component: User} }})

const router = new VueRouter({ routes: [  {path: '/user/:id', component:User,  children: [   {    path: 'profile',    component: UserProfile   },   {    path: 'posts',    components: UserPosts   } ]})

<router-link :to="{name: 'dada', params: {id:'111', count: 12} }">魔王哪吒</router-link>

npm install -g vue-cli
vue init webpack-simple demo
vue init webpack demo2

a vue.js project
npm install
npm run dev
npm run build

<router-link></router-link>或者this.$router.push({path:''})
<router-view></router-view>

import GoodsList from './../views/GoodsList'Vue.use(Router)export default new Router({ routers: [  {   path: '/goods/:goodsId',   name: 'GoodsList',   component: GoodsList  } ]})
<template> <div>  <span>{{$route.params.goodsId}}</span> </div></template>

// App.vue<template> <div id="app">  <img src="./assets/logo.png">  <router-view></router-view> </div></template>

import GoodsList from './../views/GoodsList'import Title from '@/views/Title'import Image from '@/views/Image'Vue.use(Router)export default new Router({ routers: [  {   path: '/goods',   name: 'GoodsList',   component: GoodsList，   children: [    {      path: 'title',      name: 'title',      component: Title     },     {      path: 'img',      name: 'img',      component: Image     }   ]  } ]})
<template> <div>  <span>{{$route.params.goodsId}}</span>    <router-link to="/goods/title">显示商品标题</router-link>  <router-link to="/goods/image">显示图片</router-link>    <div>   <router-view></router-view>  </div> </div></template>

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)

import GoodsList from './../views/GoodsList'import Title from '@/views/Title'import Image from '@/views/Image'import Cart from '@/views/Cart'Vue.use(Router)export default new Router({ routers: [  {   path: '/goods',   name: 'GoodsList',   component: GoodsList，   children: [    {      path: 'title',      name: 'title',      component: Title     },     {      path: 'img',      name: 'img',      component: Image     }   ]  },  {   path: '/cart',   component: Cart  } ]})
<template> <div>  <span>{{$route.params.goodsId}}</span>    <router-link to="/goods/title">显示商品标题</router-link>  <router-link to="/goods/image">显示图片</router-link>    <div>   <router-view></router-view>  </div>    <router-link to="/cart">购物车</router-link>  <button @click="jump">跳转购物车</button> </div></template>
...
methods: { jump() {  this.$router.push("/cart");  // ({path: '/cart?id=123'}); }}

<router-link v-bind:to="{name: 'cart'}">跳转到购物车页面</router-link>
<router-link v-bind:to="{name: 'cart', params:{cartId:123}}">跳转到购物车页面</router-link>
路由：{ path: '/cart/:cartId", name: 'cart', component: Cart}

<template> <div id="app">  <img src="./assets/logo.png">  <router-view></router-view>  <router-view name="title"></router-view>  <router-view name="img"></router-view> </div></template>

import Vue from 'vue'import Router from 'vue-router'import GoodsList from './../views/GoodsList'import Title from '@/views/Title'import Image from '@/views/Image'import Cart from '@/views/Cart'
Vue.use(Router);
export default new Router({ routers: {  {   path: '/',   name: 'GoodsList',   components: {    default: GoodsList,    title: Title,    img: Image   }  },  {   path: '/cart/:cartId',   name: 'cart',   components: Cart  } }})

<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
npm install vue-ressource -save

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [option])

Vue.http.interceptors.push{(request, next) => { // 请求发送前的处理逻辑 next((response) => {  // 请求发送后的处理逻辑  return response })})

mounted() { Vue.http.interceptors.push(function(request,next){  next(function(response){   return response;  }); });}

<script src="https://unpkg.com/axios/dist/aios.min.js"></script>
npm install axios -save

function getUserAccount(){ return axios.get('/user/12345');}
function getUserPermissions(){ return axios.get('/user/12345/permissions');}
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function(acct, perms){
}));

mounted: function(){ axios.interceptors.request.use(function(config){  return config; }) axios.interceptors.response.use(function(response){  return response; })}

let checkLogin = function () { return new Promise(function(resolve,reject){  let flag = document.cookie.indexOf("userId") > -1 ? true:false    if(flag) {   resolve({    status: 0,    result: true   })  }else{   reject("error");  } })};
checkLogin().then(function(res){if(res.status==0){ console.log("login success");}}).catch((error)=>{ console.log(`error:${error}`);})

export let sum = (x,y)=>{ return x+y;}
export let minus  = (m,n) => { return m-n;}
import {sum, minus} from './util'sum()
console.log(`sum:${sum(1,2)}`);

import * as util from './util'
// util.sum(1,2)

exports.area = function(r){ return Math.PI * r * r;};

vue-cli@3vue@2.5
// 第一种搭建npm install -g @vue/cli
// 第二种搭建yarn global add @vue/cli

// 完整语法<a v-bind:href="url">...</a>
// 缩写<a :href="url">...</a>

// 完整语法<a v-on:click="doSomething">...</a>
// 缩写<a @click="doSomething>...</a>

// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当被绑定的元素插入到DOM中时 inserted: function(el){  // 聚焦元素  el.focus() }})

<div id="jeskson"> <p>{{message}}</p> <p>{{reversedMessage}}</p></div>

.stop
.prevent
.capture
.self
.once
.passive

<div id="app"> <h1>{{dada}}</h1> <button v-on:click="updateInfo">修改数据</button> <button v-on:click="destoryComponent">销毁组件</button></div>
var vm = new Vue({ el: '#app', data: {  info: 'dadaqianduan.cn‘ }, beforeCreate: function(){  console.log("beforeCreated，组件创建前");  console.log(this.$el);  console.log(this.$data); }, created: function(){  console.log("created，组件创建完毕");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, beforeMount: function() {  console.log("beforeMounted，组件挂载前");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, mounted: function(){  console.log("mounted，组件挂载完毕");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, beforeUpdate: function(){  console.log("beforeUpdate，组件更新前");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, updated: function(){  console.log("updated，组件更新完毕");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, beforeDestroy: function(){  console.log("beforeDestory，组件销毁前");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, destroyed: function(){  console.log("destoryed，组件销毁完毕");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); },})

el: undefined
data: undefined

el: undefined
data: {info: 'dadaqianduan.cn’}

el有值，data有值，info没值

// 组件引用<dada></dada>
// 引入import Dada from './components/Dada'export default { name: 'App', // 注册 components: {Dada}}

Vue.component('da-da', { props: ['textTitle'], template: '<h2>{{textTitle}}</h2>'})
// 使用<da-da text-title="dadaqianduan.cn"></da-da>

props: {  title: String,  likes: Number,  isPublished: Boolean,  commentIds: Array,  author: Object,  callback: Function,  contactsPromise: Promise}

<da-da title="dadaqianduan.cn"></da-da>

// 动态赋值<da-da v-bind:title="dada.title"></da-da>
<da-da v-bind:title="dada.title+'da da'+dada.author.name"></da-da>

props: ['dada'],data: function () {  return {    counter: this.dada  }}

props: ['size'],computed: {  normalizedSize: function () {    return this.size.trim().toLowerCase()  }}

Vue.component('my-component', {  props: {    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)    propA: Number,    // 多个可能的类型    propB: [String, Number],    // 必填的字符串    propC: {      type: String,      required: true    },    // 带有默认值的数字    propD: {      type: Number,      default: 100    },    // 带有默认值的对象    propE: {      type: Object,      // 对象或数组默认值必须从一个工厂函数获取      default: function () {        return { message: 'hello' }      }    },    // 自定义验证函数    propF: {      validator: function (value) {        // 这个值必须匹配下列字符串中的一个        return ['success', 'warning', 'danger'].indexOf(value) !== -1      }    }  }})

StringNumberBooleanArrayObjectDateFunctionSymbol

vm.$emit(eventName,[...args])
参数：1. {string} eventName2. [...args]
触发当前实例上的事件，附加参数都会传给监听器回调。

npm install vuex --save

import Vuex from 'vuex'Vue.use(Vuex)

const store = new Vuex.Store({ // state中存放的是全局共享的数据 state: {count:0}})

new Vue({ el: '#app', render: h=>h(app), router, // 将创建的共享数据对象，挂载到Vue实例中 // 所有的组件，就可以直接从store中获取全局的数据 store})

this.$store.state.全局数据名称

// 从vuex中按需导入mapState函数import {mapState} from 'vuex'

// 将全局数据，映射为当前组件的计算属性computed: { ...mapState(['count'])}

// 定义Mutation
const store = new Vue.store({ state: {  count: 0 }, mutations: {  add(state) {   // 变更状态   state.count++  } }})

// 触发mutation
methods: { handle1() {  // 触发mutations的第一种方式  this.$store.commit('add') }}

// 定义Mutationconst store = new Vuex.Store({ state: {  count: 0 }, mutations: {  addN(state,step){   // 变更状态   state.count += step  } }})

// 触发mutationmethods: { handle2() {  // 在调用commit函数  // 触发mutations 时携带参数  this.$store.commit('addN',1) }}

// 从vuex中按需导入mapMutations函数import {mapMutations} from 'vuex'

methods: { ...mapMutations(['add','addN'])}

// 定义Actionconst store = new Vuex.store({ mutations: {  add(state){   state.count();  } }, actions: {  addAsync(context){   setTimeout(()=>{    context.commit('add')   },1000)  } }

// 触发Actionmothods: { handle() {  // 触发actions的第一种方式  this.$store.dispatch('addAsync'); }}

this.$store.dispatch('addNAsync',5)

// 从vuex中按需导入mapActions函数import {mapActions} from 'vuex'

methods: { ...mapActions(['addAsync','addNASync'])}

import {mapState,mapMutations,mapActions} from 'vuexcomputed: { ...mapState(['count'])},methods: { ...mapMutations(['sub','subN']), ...mapActions(['subAsync']), btnHandler1(){  this.sub() }, btnHandle2(){  this.subN() }}

const store = new Vuex.store({ state: {  count: 0 }, getters: {  showNum: state => {   return state.count  } }})

this.$store.getters.名称

import { mapGetters } from 'vuex'
computed: { ...mapGetters(['showNum'])}