vue學習記錄

原創 番茄和蛋 2020-02-23 04:28

文章目錄

vue項目結構說明:

vue文件結構.png在這裏插入圖片描述

vue項目結構.png在這裏插入圖片描述

vue操作元素的數據綁定

  1. 在vue的模板裏面所有的內容 需要一個根節點包裹起來
  2. data(){} 業務邏輯裏面定義的數據
  3. return {} 裏面定義數據
  4. v-bind:title=“url” 綁定屬性 或者 簡寫 :titile=“url”
  5. v-html 瀏覽器解析Html 綁定HTML
  6. 綁定數據的另一種方法 v-txt 也可以綁定數據
  7. v-bind:class =“對象” v-bing:class="{‘red’:flag,‘blue’:!flag}" flag = true
  8. v-bind:style 綁定一個樣式

vue 雙向數據綁定 和 獲取表單數據 (dom 節點獲取)

  1. MVVM 框架
  2. M : model V: view model改變會影響view view改變會影響 mode
  3. 雙向數據綁定在 表單中使用
  4. ref = “userinfo” console.log(this.$ref.userinfo); //獲取dom 節點
  5. ref 主要用來獲取 DOM節點

vue 事件以及方法

  1. v-on:click=“run1()” //點擊事件 觸發run1() 方法 @click 簡寫

vue ToDoList vue實現TODOList

mounted(){} //聲明周期函數 vue頁面刷新就會觸發的方法 和 data() 平級

vue中的組件: 有 模板 業務邏輯 css

vue中所有的內容要被根節點包含起來

組件的使用 :

1: 引入組件
<script>
    //引入組件
import Home from "./components/Home.vue";
export default {
  data() {
    return {
      msg: "你好vue"
    };
  },
  components: {
    "v-home": Home
  }
};
</script>
2: 掛載組件
<script>
import Home from "./components/Home.vue";
export default {
  data() {
    return {
      msg: "你好vue"
    };
  },
  //掛載組件
  components: {
    "v-home": Home
  }
};
</script>
3: 在模板中使用
<template>
  <div id="app">
    {{msg}}
      //在模板中使用
    <v-home></v-home>
  </div>
</template>

scoped 在css 中的作用 使當前組件的樣式只作用當前組件 css局部作用域

組件的名字不能和HTML的標籤的名字相同

vue生命週期以及鉤子函數

vue生命週期.png在這裏插入圖片描述

  1. 生命週期函數是組件掛載 以及組件更新 銷燬 的時候觸發的一系列的方法,這些方法叫做生命週期函數;

  2. <script>
export default {
  data() {
    return {
      msg: "我是一個vue生命週期函數的組件"
    };
  },
  methods: {
    setMsg() {
      this.msg = "我是改變後的方法";
    }
  },
  beforeCreate() {
    console.log("實例剛剛被創建1");
  },
  created() {
    console.log("實例已經創建完成2");
  },
  beforeMount() {
    console.log("模板編譯之前3");
  },
  mounted() {
    /*請求數據, 操作dom 放在這個裏面 mounted 這個方法很重要*/
    console.log("模板編譯完成4");
  },
  beforeUpdate() {
    console.log("數據更新之前");
  },
  updated() {
    console.log("數據更新完畢");
  },
  beforeDestroy() {
    /*頁面銷燬的時候要保存一些數據 就可以監聽這個銷燬的生命週期函數*/
    console.log("實例銷燬之前");
  },
  destroyed() {
    console.log("實例銷燬完成");
  }
};
</script>

vue請求數據的模塊:

  • vue-resource

  1. 官方提供的 vue的一個插件

  2. (1)安裝 npm install vue-resource --save

    //在package.json中生成 "vue-resource"
"dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1"
  },

  3. (2)引用 插件

    //在main.js 中引入vue-resource

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(VueResource);

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  4. (3)在組件中使用

     methods: {
    getData() {
      var api = "http://192.168.0.106:8899/ypgzt_new/api/ypgzt/v1/getJzCode";
      this.$http.get(api).then(
        function(response) {
          console.log(response);
          this.list = response.body.result;
        },
        function(error) {
          console.log(error);
        }
      );
    }
  },
//使用剪頭函數
methods: {
    getData() {
      var api = "http://192.168.0.106:8899/ypgzt_new/api/ypgzt/v1/getJzCode";
      this.$http.get(api).then(response => {
          console.log(response);
          this.list = response.body.result;
      },response => {
          console.log(error);
        }
      );
    }
  },

  • axios 第三方插件

    1. 安裝 npm install axios --save

      //在package.json中生成 "axios"
"dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1"
  },

    2. 哪裏用哪裏引入

      <script>
import Header from "../components/Header.vue";
import Lify from "../components/Lify.vue";
import Axios from 'axios'; //此處注意引入
export default {
  data() {
    return {
      flag: true,
      list: []
    };
  },
  methods: {
    getData() {
      var api = "http://192.168.0.106:8899/ypgzt_new/api/ypgzt/v1/getJzCode";
      Axios.get(api)
        .then(response => {
          console.log(response);
          this.list=response.data.result;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    "v-header": Header,
    "v-lify": Lify
  }
};
</script>

  • fetch-jsonp JSONP 僅支持GET方法

    1. 安裝 npm install fetch-jsonp --save

      //在package.json中生成 "fetch-jsonp"
"dependencies": {
    "axios": "^0.19.0",
    "fetch-jsonp": "^1.1.3",
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1"
  },

    2. 使用

      <template>
  <div id="Fetchjsonp">
    <p>{{msg}}</p>
  </div>
</template>
 <script>
import Fetchjsonp from "fetch-jsonp"; //引入
export default {
  name: "Fetchjsonp",
data() {
    return {
      msg: "Fetchjsonp"
    };
  },
  mounted() {
    let api =
      "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    Fetchjsonp(api)
      .then(res => {
        return res.json();
      })
      .then(res => {
        console.log(res);
      });
  }
};
</script>

vue父子組件傳值:

https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81

父組件給子組件傳值

  1. 父組件調用子組件的時候,綁定動態屬性

  2. 在子組件裏面通過 props接受父組件傳過來的數據 props: [“title”] 應用 : {title}

  3. 可以把一個 屬性 方法 整個實例

    /*父組件*/
<template>
  <div class="div">
    <v-header :title="title" :run="run" :home="this"></v-header>
    <br />
    <hr />
    <h2>我是首頁-{{msg}}</h2>
  </div>
</template>
<script>
import Header from "./Header.vue";
import Axios from "axios";
export default {
  data() {
    return {
      msg: "我是home組件",
      title: '父組件傳值給子組件1'
    };
  },
  methods: {
    run(message){
      alert("我是父組件的run方法"+message);
    }
  },
  mounted() {},
  components: {
    "v-header": Header
  }
};
</script>
<style scoped>

</style>

/*子組件*/
<template>
  <div id="div1">
    <h3>我是頭部組件----{{title}}---------{{msg}}</h3>
    <button @click="run('----我是子組件傳過來的值')">點擊出發父組件的方法</button>
    <br>
    <button @click="getPerson()">點擊觸發父組件的數據和方法</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "我是header組件"
    };
  },
  methods: {
      getPerson(){
        //   alert(this.title);
        //   alert(this.home.title);
        this.home.run()
        
      }
  },
  props: ["title", "run","home"]
};
</script>

  4. 也可以使用props 進行驗證父組件傳來的值得格式是否正確

    <template>
  <div id="div1">
    <h3>我是頭部組件----{{title}}---------{{msg}}</h3>
    <button @click="run('----我是子組件傳過來的值')">點擊出發父組件的方法</button>
    <br />
    <button @click="getPerson()">點擊觸發父組件的數據和方法</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "我是header組件"
    };
  },
  methods: {
    getPerson() {
      alert(this.title);
      alert(this.home.title);
      this.home.run();
    }
  },
    //驗證父組件傳來的類型是否一致
  props: {
    title: String,
    run: Function,
    home: Object
  }
};
</script>

父組件主動獲取子組件的數據和方法

  1. 調用子組件的時候定義一個 ref

    <v-header ref="header"></v-header>

  2. 在父組件裏面通過

    this.$refs.header.屬性
this.$refs.header.方法

    //父組件
<template>
  <div class="div">
    <v-header :title="title" :home="this" ref="header"></v-header>  //定義一個ref
    <br />
    <hr />
    <h2>我是首頁-{{msg}}</h2>
    <br />
    <button @click="getSon()">點擊調用子組件的值</button>
  </div>
</template>
<script>
import Header from "./Header.vue";
import Axios from "axios";
export default {
  data() {
    return {
      msg: "我是home組件",
      title: '父組件傳值給子組件1'
    };
  },
  methods: {
    getSon(){
      // alert(this.$refs.header.msg);  //獲取數據
      this.$refs.header.run();			//獲取方法
    }
  },
  mounted() {},
  components: {
    "v-header": Header
  }
};
</script>
<style scoped>

</style>

//子組件
<template>
  <div id="div1">
    <h3>我是頭部組件----{{title}}---------{{msg}}</h3>
    <button @click="run('我是子組件傳過來的值')">點擊組件的方法</button>
    <br />
    <button @click="getPerson()">點擊觸發父組件的數據和方法</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "我是header組件"
    };
  },
  methods: {
    getPerson() {
      alert(this.title);
      alert(this.home.title);
    },
    run(message){
        alert("子組件:"+message);
    }
  },
  props: {
    title: String,
    home: Object
  }
};
</script>

子組件主動獲取父組件的數據和方法

  1. this.$parent.數據

  2. this.$parent.方法

    //父組件
<template>
  <div class="div">
    <v-header ref="header"></v-header>   //定義一個ref
    <br />
    <hr />
    <h2>我是首頁-{{msg}}</h2>
    <br />
    <button @click="getSon()">點擊調用子組件的值</button>
  </div>
</template>
<script>
import Header from "./Header.vue";
import Axios from "axios";
export default {
  data() {
    return {
      msg: "我是home組件",
      title: "父組件傳值給子組件1"
    };
  },
  methods: {
    getSon() {
      // alert(this.$refs.header.msg);
      this.$refs.header.run();
    },
    personFf(){
      alert("我是父組件中的方法!");
    }
  },
  mounted() {},
  components: {
    "v-header": Header
  }
};
</script>
<style scoped>
</style>

//子組件
<template>
  <div id="div1">
    <h3>我是頭部組件---{{msg}}</h3>
    <button @click="run('我是子組件傳過來的值')">點擊組件的方法</button>
    <br />
    <button @click="getPerson()">點擊觸發父組件的數據和方法</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "我是header組件"
    };
  },
  methods: {
    getPerson() {
    //   alert(this.$parent.title);   //獲取數據
      this.$parent.personFf();    //獲取方法
    },
    run(message){
        alert("子組件:"+message);
    }
  },
};
</script>

vue中非父子組件傳值(兄弟組件):

  1. 新建一個.js 引入Vue 然後實例化 Vue 最後暴露這個實例

  2. 在要廣播的地方引入剛纔定義的實例

  3. 通過VueEmit.$emit( ‘名稱’ , 數據) 廣播數據

  4. 在接收數據的地方通過$on接收廣播的數據

    VueEmit.$on('名稱'),Function(){
    
}

    /*創建一個js文件 用於以下步驟:*/
//引入Vue實例
import Vue from 'vue';
//實例化Vue
var VueEvent = new Vue();
//暴露這個實例
export default VueEvent;

    <template>
  <div class="div">
    <h2>我是首頁-{{msg}}</h2>
    <button @click="getNews()">點擊給news兄弟廣播數據</button>
    <br />
  </div>
</template>
<script>
import VueEvent from "../model/VueEvent.js"; //引入定義的實例
import Axios from "axios";
export default {
  data() {
    return {
      msg: "我是home組件的信息"
    };
  },
  methods: {
    getNews() {
      VueEvent.$emit("to-news", this.msg); //廣播數據
    }
  },
  mounted() {
    //監聽news  廣播的數據
    VueEvent.$on("to-home", function(data) {
      console.log(data);
    });
  }
};
</script>
<style scoped>
</style>

/*News組件*/
<template>
  <div id="div1">
    <h3>我是新聞組件---{{msg}}</h3>
    <button @click="getHome()">點擊給Home組件廣播數據</button>
  </div>
</template>
<script>
import VueEvent from "../model/VueEvent.js";  //引入定義的實例
export default {
  data() {
    return {
      msg: "我是header組件"
    };
  },
  methods: {
    getHome() {
      VueEvent.$emit("to-home", this.msg);   //廣播數據
    }
  },
  mounted() {
    VueEvent.$on("to-news", function(data) {    //監聽數據 
      console.log(data);
    });
  }
};
</script>

vue路由:

vue-router官網

  1. 安裝: npm install vue-router --save

  2. 在引用(main.js):

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  3. 配置路由:

    • 創建組件 引入組件

    • 定義路由

      const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', redirect: '/home'} //默認跳轉路由
]

    • 實例化VueRouter

      const router = new VueRouter({
  routes // short for `routes: routes`
})

    • 創建並掛載根實例

      const app = new Vue({
  router
}).$mount('#app')

    • 在根組件的模板中將 放在 App.vue 中

//Home.vue
<template>
 <div class="div">
   <h2>我是首頁-{{msg}}</h2>
   <br />
 </div>
</template>
<script>
import Axios from "axios";
export default {
 data() {
   return {
     msg: "我是home組件的信息"
   };
 }
};
</script>
<style scoped>
</style>

//News.vue
<template>
 <div id="div1">
   <h3>我是新聞組件---{{msg}}</h3>
 </div>
</template>
<script>
export default {
 data() {
   return {
     msg: "我是header組件"
   };
 },
 
};
</script>

//App.vue
<template>
 <div id="app">
   <router-link to="/home">首頁</router-link>
   <router-link to="/news">新聞</router-link>
   <hr />
   //使用
   <router-view></router-view>
 </div>
</template>

<script>
import Home from "./components/Home.vue";
import News from "./components/News.vue";
export default {
 data() {
   return {
     msg: "你好vue"
   };
 },
};
</script>
<style scoped>
</style>

//main.js
import Vue from 'vue'
import App from './App.vue'
//引用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//創建組件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'

//配置路由
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: '/home' } //默認跳轉到home組件
]

//實例化VueRoutes
const router = new VueRouter({
  routes
})

//掛載路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

路由的寫法2:

//App.vue
<template>
  <div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/news">新聞</router-link>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  data() {
    return {
      msg: "你好vue"
    };
  },
};
</script>
<style scoped>
</style>


// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import News from '@/components/News'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Hmoe',
      component: Home
    },
    {
      path: '/news',
      name: 'News',
      component: News
    },
    {   //默認跳轉路由
      path: '*',
      redirect: '/home'
    }
  ]
})

//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

vue動態路由:

  1. 配置動態路由

    {
      path: '/content/:pid', /*動態配置路由*/
      name: 'Content',
      component: Content
    },

  2. 頁面傳值

    <ul>
      <li v-for="(item,key) in list" :key="item.key">
        <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
      </li>
</ul>

  3. 在對應的頁面獲取傳來的值

    mounted() {
    console.log(this.$route.params);
  },

動態路由之 get傳值:

//Home.vue
    <ul>
      <li v-for="(item,key) in list" :key="item.key">
        <router-link :to="'/pcontent?aid='+key">{{key}}--{{item}}</router-link> //get傳值
      </li>
    </ul>

//Pcontent.vue
  mounted() {
    console.log(this.$route.query);
  },
      
//index.js
   	{
      path: '/pcontent',
      name: 'Pcontent',
      component: Pcontent
    },

vue程序導航路由(編程式導航):

除了<router-link>用於創建聲明性導航的錨標記之外，我們還可以使用路由器的實例方法以編程方式進行此操作。

1:跳轉方式

  1. 第一種跳轉方式(字符串):

    this.$router.push("news");

  2. 第二種跳轉方式(對象):

    this.$router.push({ path: "/content?aid=499" });

  3. 第三種跳轉方式(命名的路由,params 可以傳值):

    this.$router.push({ name: "Content", params: { aid: "498" } });
//indes.js 寫法
   {
      path: '/content?aid=:aid', /*動態配置路由*/
      name: 'Content',
      component: Content
    },
 //Content.vue 獲取值得方法
  var aid = this.$route.params.aid;

  4. 第四種跳轉方式(帶查詢參數 http://localhost:8080/#/content?aid=459 )

    this.$router.push({ path: "content", query: { aid: "459" } });
//index.js 寫法
   {
      path: '/content',
      name: 'Content',
      component: Content
    },
//Content.vue 獲取值得方法
 var aid = this.$route.query.aid;

2:History模式

哈希模式 的默認模式vue-router是-使用URL 哈希模擬 完整的URL，以便在URL更改時不會重新加載頁面。

要擺脫哈希值，我們可以使用路由器的History模式，該模式利用history.pushStateAPI實現URL導航而無需重新加載頁面：

export default = new Router({
  mode: 'history',
  routes: [
      
  ]
})

箭頭函數 和 function 的區別:

  1. 在function中，this指向的是調用該函數的對象
  2. 在箭頭函數中，this永遠指向定義函數的環境
  3. 箭頭函數不可以當構造函數,由於箭頭函數沒有自己的this，所以當然也就不能用call()、apply()、bind()這些方法去改變this的指向
  4. function存在變量提升，可以定義在調用語句後,箭頭函數以字面量形式賦值，是不存在變量提升的

**箭頭函數: **ES6新語法;箭頭函數表達式的語法比函數表達式更簡潔，並且沒有自己的this，arguments，super或 new.target。這些函數表達式更適用於那些本來需要匿名函數的地方，並且它們不能用作構造函數;

在聯繫vue的時候用到axios, 但是發現axios 請求之後的回調函數裏this並不指向當前vue實例 ;

// 如下代碼
loginSubmit() {
    //此時回調函數 內部的this並非指向當前的vue實例
      UserLoginAction(this.loginMessage).then(function(response) {
        if (response.data == true) {
          this.$Message.success("登錄成功!");
          this.$router.push({ path: "/home" });
        } else {
          this.$Message.error("登錄失敗!");
        }
      });
    }

//更改後的代碼
loginSubmit() {
      //在使用function 的時候 需要用外部函數定義的變量存儲的this，也就是當前vue的實例,  不然回調函數的內部的this並非指向當前的vue實例
      var _this = this;
      UserLoginAction(this.loginMessage).then(function(response) {
        if (response.data == true) {
          _this.$Message.success("登錄成功!");
          _this.$router.push({ path: "/home" });
        } else {
          _this.$Message.error("登錄失敗!");
        }
      });
    }

//建議使用ES6 新語法
loginSubmit() {	
	UserLoginAction(this.loginMessage).then(response => {
        if (response.data == true) {
          this.$Message.success("登錄成功!");
          this.$router.push({ path: "/home" });
        } else {
          this.$Message.error("登錄失敗!");
        }
      });
	}
//箭頭函數相當於匿名函數，並且簡化了函數定義。看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。此時this在箭頭函數中已經按照詞法作用域綁定了。很明顯，使用箭頭函數之後，箭頭函數指向的函數內部的this已經綁定了外部的vue實例了.

路由的嵌套

  1. 配置路由

  2. 父路由裏面配置子路由顯示的地方

    //router/index.js
  {
      path: '/user',
      name: "User",
      component: User,
      children:[
        {
          path: 'useradd',
          name: "Useradd",
          component:UserAdd
        },
        {
          path: 'userlist',
          name: "UserList",
          component:UserList
        }
      ]
    },

  3. 在父組件中加

代碼:

user.vue

<template>
  <div id="home">
    <div class="user">
      <div class="left">
        <ul>
            <li id="lis">
             <router-link to="/user/useradd"> 增加用戶</router-link>
            </li>
            <li id="lis">
              <router-link to="/user/userlist">用戶列表</router-link>
            </li>
        </ul>
      </div>
      <div class="right">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是一個user組件"
    };
  }
};
</script>

<style scoped>
.user {
  display: flex;
}
.left {
  width: 200px;
  min-height: 400px;
  border-right: 1px solid #eee;
  
}
#lis{
    line-height: 4;
}
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import CeShi from '@/components/CeShi'
import User from '@/components/User'
import UserList from '@/components/User/UserList'
import UserAdd from '@/components/User/UserAdd'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/ceshi',
      name: "CeShi",
      component: CeShi
    },
    {
      path: '/user',
      name: "User",
      component: User,
      children:[
        {
          path: 'useradd',
          name: "Useradd",
          component:UserAdd
        },
        {
          path: 'userlist',
          name: "UserList",
          component:UserList
        }
      ]
    },
    {
      path: '*',
      redirect: '/login'
    },
  ]
})

App.vue

User/userAdd.vue

User/userList.vue

<template>
  <div id="app">
    <router-link to="/ceshi"> 測試 </router-link>
    <router-link to="/helloworld"> 列表 </router-link>
    <router-link to="/user"> 用戶 </router-link>
    <hr>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>


<template>
  <div id="useradd">
        添加用戶
  </div>
</template>

<template>
  <div id="userlist">
        用戶列表
  </div>
</template>

Element-UI的使用

官網地址: https://element.eleme.cn/#/zh-CN

npm 安裝 : npm i element-ui --save

引入element-ui的css和插件

//mian.js下
import ElemeentUI from 'element-ui' //導入element-UI組件庫
import 'element-ui/lib/theme-chalk/index.css' //導入element-UI樣式

Vue.use(ElemeentUI)

配置file_loader(可選 不報錯就不用配置)

//webpack.config.js中配置(因爲無法識別element-UI的字體類型組件,但是現在不需要)
	{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
//並且 在package.json 中還需要引入模塊
 "devDependencies": {
     ...
     "file-loader": "^1.1.4",  //npm install file-loader --save
     ...
 }

vuex

**定義:**Vuex是一個專爲Vue.js 應用程序開發的狀態管理模式. 它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化. Vuex也集成到Vue的官方調試工具 devtools extension ,提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能.

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式

​ 1. vuex 解決了組件之間同一狀態的共享問題 (解決了不同組件之間的數據共享)

​ 2.組件裏面數據的持久化

​ 3.小項目不建議使用

​ 4. 不同組件的數據共享 以及數據持久化

vuex的使用:

  1. src目錄下面新建一個vuex的文件夾

  2. vuex文件夾裏面新建一個store.js

  3. 安裝vuex

    1. npm install vuex --save

  4. 在剛纔創建的store.js 中引入vue 並且 use vuex

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

/**1.state 在vuex中用來存儲市局 (定義數據)*/
var state = {
    count: 1
}

/**2.mutations裏面放的是方法,方法主要用於改變state裏面的數據 (定義方法)*/
var mutations = {
    inCount() {
        ++state.count;
    },
    outCount() {
        --state.count;
    }
}

//vuex 實例化 Vuex.store (暴露)
const store = new Vuex.Store({
    state,
    mutations
})

export default store

    組件中使用 Vuex

    1. 引入 store

      import store from "../vuex/store.js";

    2. 註冊

      export default {
  data() {
    return {};
  },
  store,
  methods: {
    incCount() {
      //改變vuex 中store.js中的count
      this.$store.commit("inCount"); /**觸發state裏面的方法修改數據 */
    }
  }
};

    3. 獲取state裏面的數據

      {{this.$store.state.count}}

    4. 觸發 mutations 改變 state裏面的數據

      this.$store.commit("inCount"); /**觸發state裏面的方法修改數據 */

      代碼:

      //HomeVuex.vue
<template>
  <div id="home">
    首頁組件
    <br />
    <hr />
    {{this.$store.state.count}}
    <hr />
    <button @click="incCount()">點擊增加+</button>
  </div>
</template>
<script>
//1.引入 store

import store from "../vuex/store.js";

//2.註冊
export default {
  data() {
    return {};
  },
  store,
  methods: {
    incCount() {
      //改變vuex 中store.js中的count
      this.$store.commit("inCount"); /**觸發state裏面的方法修改數據 */
    }
  }
};
</script>

//NewsVuex.vue
<template>
  <div id="new">
    新聞組件
    <hr />
    {{this.$store.state.count}}
    <hr />
    <button @click="incCount()">點擊減少-</button>
  </div>
</template>
<script>
//1.引入 store

import store from "../vuex/store.js";

//2.註冊
export default {
  data() {
    return {};
  },
  store,
  methods: {
    incCount() {
      //改變vuex 中store.js中的count
      this.$store.commit("outCount"); /**觸發state裏面的方法修改數據 */
    }
  }
};
</script>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

Vue加載OpenLayer入門教程（超簡單）

Vue加載OpenLayer很簡單，很簡單，很簡單第一步：創建vue項目第二步 加載openlayer 很簡單，很簡單，很簡單 學會了vue，開始測試mapbox的搭配，學會了mapbox，有整了一下openlayer的導入，剛開

来日可期啊 2020-07-08 12:37:34

element-ui中的el-table-column加v-if不生效，表頭錯亂

 項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"

杨哥杨哥万万岁 2020-07-08 12:30:46

vue中index.html文件爲什麼可以使用模板語法

今天無意間看到在項目的index.html文件中，使用了ejs的語法（後來知道是lodash），就非常費解，之前在node項目中，需要指定使用ejs模板引擎，在中間件中rander到前臺頁面。我理解的大概就是這個原理 查看了官方的解釋

杨哥杨哥万万岁 2020-07-08 12:30:46

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

Html Webpack Plugin: ReferenceError: process is not defined

修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>

真·skysys 2020-07-08 11:54:32

electron-vue項目引入element-ui

參考： https://www.jianshu.com/p/1defe83929f3 npm install element-ui main.js import ElementUI from 'element-ui' impor

真·skysys 2020-07-08 11:54:31

後端 Java 程序員眼中的 Vue——（一）創建及運行

現在 Vue 用的越來越多，工作上有時前後端都要搞，作爲後端程序員接手 Vue 該如何做呢，下面來記錄一下基礎的東西，並創建一個 Vue 項目 談 Vue 不能避開的 3 個東西 Node.js npm vue-cli No

厕所博士 2020-07-08 11:50:38

Axios--基礎知識

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

Element-ui

Element-ui一、什麼是Element-ui 一、什麼是Element-ui element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度

狂风 2020-07-08 11:49:25

vue.js 裏面，什麼是虛擬DOM?

Vuejs 將DOM 抽象成一個以JavaScript 對象爲節點的虛擬DOM樹,以VNode節點模擬真實的DOM，可以對這顆抽象樹進行創建節點,刪除節點以及修改節點的操作, 經過diff算法得出一些需要修改的最小單位,再更新視圖,大大提

阿冰介 2020-07-08 11:48:15

vue 是怎麼實現數據響應的

簡述：Vuejs 的響應式依賴於Object.defineProprtry,通過監聽對象屬性 的setter/getter 的變化,通過getter 進行依賴收集,而setter相當於觀察者,數據產生變化的時候通知「訂閱者」更新視圖

阿冰介 2020-07-08 11:48:15

基於activiti5.22、SpringBoot2開發的流程解決方案，源碼分享

AgileBPM 敏捷工作流開發平臺 業務對象: 由實體（表）組成，支持任意數據結構（關聯關係），可以跨庫來組織業務對象（支持分佈式事務）。而且難以置信的支持N層。 業務表單: 表單完美的支撐了業務對象的展示，並支持豐富的前端組件和字段級

一直孤独的程序猿 2020-07-08 11:39:18

開發這樣一個複雜的表單你需要用多久

> 表單在中後臺開發的時，是最多也是最另人頭疼的，多級聯動，繁雜的驗證，動態解析等可算是苦不堪言。所以出現了無數的表單解決方案，像Uform, formily, NoForm等等一大堆用來解決中後臺開發表單，可想而知，解決複雜的表單開發是

迷路的蝙蝠 2020-07-08 11:35:02

vue的slot（slot具名插槽。slot非具名插槽，slot的作用域，）

vue的slot 1、什麼是slot slot是插槽，插即是可以插入，槽就是坑，即是可以再代碼中插入 如果子組件模板中不包含插口，那麼父組件的內容將會被丟棄。當子組件模板中有一個麼有屬性的插槽時，父組件傳入的整個內容片段，將插入到

ljljlj1993 2020-07-08 11:14:40