【初级】个人分享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 // true
vm.a === data.a // true

vm.a = 2
data.a // 2

data.a = 3
vm.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@3
vue@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-focus
Vue.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
      }
    }
  }
})

String
Number
Boolean
Array
Object
Date
Function
Symbol

vm.$emit(eventName,[...args])

参数：
1. {string} eventName
2. [...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')
 }
}

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

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

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

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

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

// 触发Action
mothods: {
 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 'vuex
computed: {
 ...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'])
}