Vue开发者社区

Vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
  <div id="div">
    { {user_name} }
</body>
// 两种引入方式，任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./vue.js"></script>
<script>
  var app = new Vue({
    el: "#div", // 设置要操作的元素
    // 要替换的额数据
    data: {
      user_name: "我是一个div"
</script>

var vm = new Vue({
  // 选项
});

<body>
  <div id="div">
    { {user_name} }
</body>
<script src="./vue.js"></script>
<script>
  var app = new Vue({
    el: "#div", // 设置要操作的元素
    // 要替换的额数据
    data: {
      user_name: "我是一个div"
  // 打印Vue实例对象
  console.log(app);
</script>

var app = new Vue({
  el: "#div", // 设置要操作的元素
  // 要替换的额数据
  data: {
    user_name: "我是一个div",
    user: 222222
console.log(app.user_name);

<span>Message: { { ms g }}</span>

<body>
  <div id="div">
    文本插值 { {html_str} }
</body>
<script>
  var app = new Vue({
    el: "#div",
    data: {
      html_str: "<h2>Vue<h2>"
</script>

### 2.2 使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js
都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句；
(表达式是运算，有结果；语句就是代码，可以没有结果)
  <div id="div">
    { { u n > 3 ? '大' : '小'}} { { fu n() }}
</body>
<script>
  var app = new Vue({
    el: "#div",
    data: {
      un: 2,
      fun: () => {
        return 1 + 2;
</script>

<body>
  <div id="div">
    <p v-if="seen">现在你看到我了</p>
</body>
<script>
  var app = new Vue({
    el: "#div",
    data: {
      seen: false
</script>

<body>
  <div id="div" { {class}}>
    <p v-text="seen"></p>
    <p v-html="str_html"></p>
</body>
<script>
  var app = new Vue({
    el: "#div",
    data: {
      seen: "<h1>Vue</h1>",
      str_html: "<h1>Vue</h1>",
      class: "dd"
</script>

<img id="“app”" v-bind:src="src" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      src: "1.jpg"
</script>

<a id="app" v-bind:href="'del.php?id=' + id">删除</a>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      id: 11
</script>

<div id="app" v-bind:style="[color, fontSize]">abc</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      color: {
        color: "red"
      fontSize: {
        "font-size": "18px"
</script>

<div id="app">
  <img v-bind:src="imageSrc" />
  <!-- 缩写 -->
  <img :src="imageSrc" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      imageSrc: "1.jpg"
</script>

<div id="div">
  <input type="text" :value="input_val" />
<script>
  var app = new Vue({
    el: "#div",
    data: {
      input_val: "hello world "
</script>

<div id="div">
  <input type="text" v-model="input_val" />
<script>
  var app = new Vue({
    el: "#div",
    data: {
      input_val: "hello world "
</script>

<div id="div">
  <textarea v-model="inp_val"></textarea>
  <div>{ { inp_va l }}</div>
<script>
  var app = new Vue({
    el: "#div",
    data: {
      inp_val: ""
</script>

<div id="div">
  吃饭：<input type="checkbox" value="eat" v-model="checklist" /><br />
  睡觉：<input type="checkbox" value="sleep" v-model="checklist" /><br />
  打豆豆：<input type="checkbox" value="ddd" v-model="checklist" /><br />
  { { checklis t }}
<script>
  var vm = new Vue({
    el: "#div",
    data: {
      checklist: ""
      // checklist: []
</script>

<div id="app">
  男<input type="radio" name="sex" value="男" v-model="sex" /> 女<input
    type="radio"
    name="sex"
    value="女"
    v-model="sex"
  { {sex} }
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      sex: ""
</script>

<div id="div">
  <input type="text" v-model.lazy="input_val" />
  { {input_val} }
<script>
  var app = new Vue({
    el: "#div",
    data: {
      input_val: "hello world "
</script>

<div id="app">
  <input type="button" value="按钮" v-on:click="cli" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      cli: function() {
        alert("123");
</script>

<div id="app">
  <!-- 使用事件绑定的简写形式 -->
  <input type="button" value="按钮" @click="cli" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    // 将事件处理程序写入methods对象
    methods: {
      cli: function() {
        alert("123");
</script>

<div id="app">
  <!-- 直接调用传参即可 -->
  <input type="button" value="按钮" @click="cli(1,3)" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      // 接受参数
      cli: function(a, b) {
        alert(a + b);
</script>

methods: {
    // 接受参数
    cli: function (a,b,ev) {
        alert(a+b);
        console.log(ev);
}

<div id="app">
  <a href="http://www.qq.com" id="a">腾百万</a>
<script>
  document.getElementById("a").onclick = ev => {
    // 组织浏览器的默认行为
    ev.preventDefault();
</script>

<div id="app">
  <a href="http://www.qq.com" @click.prevent="cli">腾百万</a>
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    // 将事件处理程序写入methods对象
    methods: {
      cli: function() {
        alert("123");
</script>

<div id="app">
  <a href="http://www.qq.com" @click.once="cli($event)">腾百万</a>
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    // 将事件处理程序写入methods对象
    methods: {
      cli: function(ev) {
        ev.preventDefault();
        alert("123");
</script>

<div id="app">
  <input type="text" @keyup.enter="keyup" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      keyup: () => {
        console.log("111");
</script>

<div id="app">
  <input type="button" value="按钮" @click.shift="cli" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      cli: () => {
        console.log("111");
</script>

<div id="app">
  <input type="button" value="按钮" @click.middle="cli" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      cli: () => {
        console.log("111");
</script>

<div id="app">
  <p v-show="is_show">Vue</p>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      is_show: false
    methods: {}
</script>

<div id="app">
  <input type="button" value="按钮" @click="isshow" />
  <p v-show="is_show">Vue</p>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      is_show: false
    methods: {
      isshow: function() {
        this.is_show = !this.is_show;
</script>

<div id="app">
  <div v-if="type === 'A'">
  <div v-else-if="type === 'B'">
  <div v-else-if="type === 'C'">
  <div v-else>
    Not A/B/C
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      type: "F"
</script>

<div id="app">
    <li v-for="(val,key) in arr">{ {val}}--- { {key}}< /li></li>
    <li v-for="(val,key) in obj">
      { {val}}--- { {key}}< /li> // in 也可以用 of 来替换 如： （val,key）of
      obj,两者没有区别
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      arr: ["a", "b", "c"],
      obj: { id: 1, name: "李四" }
</script>
//v-for 不只可以传入两个参数 ，可以传三个，顺序作用分别：(value 当前遍历的值,
键名name, 索引index)

<div id="app">
  <p>{ {obj.i d}}</p>
<script src="./vue.js"></script>
<script>
  setTimeout(() => {
    var vm = new Vue({
      el: "#app",
      data: {
        arr: ["a", "b", "c"],
        obj: { id: 1, name: "李四" }
  }, 2000);
</script>

<style>
  [v-cloak] {
    display: none;
</style>
<div id="app">
  <p v-cloak>{ {obj.i d}}</p>
<script src="./vue.js"></script>
<script>
  setTimeout(() => {
    var vm = new Vue({
      el: "#app",
      data: {
        obj: { id: 1, name: "李四" }
  }, 2000);
</script>

<div id="app">
  <p v-once>{ {msg}}< /p></p>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "kkk"
</script>

1.使用数组自带的添加、删除等等方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
2.改变引用\替换数组
（1）使用一些会返回一个新数组的方法
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
这样的方法有：filter()、concat() 和 slice()等
（2）直接重置赋值,在原有的基础上添加、删除等
如：   原数组attr = [1,2,3,4]
      attr = [1,2,3,4]
      这样也会改变引用
3.使用set\$set方法

1.改变引用\重载对象
和数组同理，在这使用对象独有的 Object.assign 和jquery的$.extend
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
上面这种方式和直接obj.a = v一样，视图不会更新，要想发威作用必须以下面的方式
vm.userProfile = Object.assign({},vm.userProfile,{age:27,favoriteColor:'Vue Green'})
assign源对象不能直接是vue的数据，并且还要对vue指定的数据进行重置赋值
2.使用set/$set方法

Vue.set(object 要添加等操作的数据, propertyName 键名, value 值)
Vue.$set 是vue的实例方法也是全局方法，使用方式和set一样
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)

<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>
<!-- 这样做是有必要的，因为 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能无效且被放置到外面 -->
<table>
  <tr is="my-row"></tr>
</table>

const list_data = [
  { id: 1, title: "吃饭", stat: true },
  { id: 2, title: "睡觉", stat: false },
  { id: 3, title: "打豆豆", stat: true }
new Vue({
  el: "#todoapp",
  data: {
    // list_data:list_data,
    list_data // es6属性简写
});

<ul class="todo-list">
  <li v-for="(val,key) in list_data">
    <div class="view">
      <input class="toggle" type="checkbox" v-model="val.stat" />
      <label>{ {val.titl e}}</label>
      <button class="destroy"></button>
    <input class="edit" value="Rule the web" />
</ul>

<section v-if="list_data.length" class="main">
</section>
<footer v-if="list_data.length" class="footer">
</footer>

<div v-if="list_data.length">
  <section class="main">
  </section>
  <footer class="footer">
  </footer>
</div>

<template v-if="list_data.length">
  <section class="main">
  </section>
  <footer class="footer">
  </footer>
</template>

<input @keyup.enter="addTodo" class="new-todo" placeholder="请输入" autofocus />

new Vue({
  el: "#todoapp",
  data: {
    // list_data:list_data,
    list_data // es6属性简写
  //添加事件处理器
  methods: {
    // addTodo:function(){}
    // 简写形式
    addTodo() {
      console.log(123);
});

methods: {
    // 添加任务
    // addTodo:function(){}
    // 简写形式
    addTodo(ev) {
        // 获取当前触发事件的元素
        var inputs = ev.target;
        // 获取value值，去除空白后判断，如果为空，则不添加任务
        if (inputs.value.trim() == '') {
            return;
        // 组装任务数据
        var todo_data = {
            id: this.list_data.length + 1 + 1,
            title: inputs.value,
            stat: false
        // 将数据添加进数组
        this.list_data.push(todo_data);
        // 清空文本框内容
        inputs.value = '';
}

<input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox" />

toggleAll(ev){
   // 获取点击的元素
    var inputs = ev.target;
    // console.log(inputs.checked);
    // 循环所有数据为状态重新赋值
    // 因为每个元素的选中状态都是使用 v-model 的双向数据绑定，
    // 因此 数据发生改变，状态即改变，状态改变，数据也会改变
    for(let i=0;i<this.list_data.length;i++){
        this.list_data[i].stat = inputs.checked;
}

<li v-for="(val,key) in list_data" v-bind:class="{completed:val.stat}"></li>

<button @click="removeTodo(key)" class="destroy"></button>

removeTodo(key){
    this.list_data.splice(key,1);
},

<button @click="removeAllDone" class="clear-completed">Clear completed</button>

removeAllDone(){
    for(let i=0;i<list_data.length;i++){
        if(list_data[i].stat == true){
            this.list_data.splice(i,1);
}

var arr = [1, 4, 6, 2, 78, 23, 7, 3, 8];
// 原始写法
// var new_arr = arr.filter(function(v){
//     // if(v>8){
//     //     return true;
//     // }
//     return v>8;
// })
// 箭头函数写法
// var new_arr = arr.filter((v)=>{
//     return v>8;
// })
// 精简写法
var new_arr = arr.filter(v => v > 8);
console.log(new_arr);

removeAllDone(){
    // 原始循环判断用法
    // for(let i=0;i<list_data.length;i++){
    //     if(list_data[i].stat == true){
    //         this.list_data.splice(i,1);
    //     }
    // 上面是循环删除符合条件的数据
    // 下面是保留不符合条件的数据
    // 原始标准库对象方法
    // this.list_data = this.list_data.filter(function(v){
    //     if(v.stat == false){
    //         return true;
    //     }
    // })
    // 箭头函数方法
    // this.list_data = this.list_data.filter(function(v){
    //     return !v.stat;
    // })
    // 精简方法
    this.list_data = this.list_data.filter((v)=>!v.stat);
},

<div id="div">
  <input type="text" v-model="xing" />
  <input type="text" v-model="ming" />
  { {xing + ming}}
<script>
  var app = new Vue({
    el: "#div",
    data: {
      xing: "",
      ming: ""
</script>

<div id="div">
  <input type="text" v-model="xing" />
  <input type="text" v-model="ming" />
  { { fullnam e() }}
  <!-- 一百次调用，观察时间结果-->
  { { fullnam e() }}
<script>
  var app = new Vue({
    el: "#div",
    data: {
      xing: "",
      ming: ""
    methods: {
      fullname() {
        return this.xing + this.ming + Date.now();
</script>

<div id="div">
  <input type="text" v-model="xing" />
  <input type="text" v-model="ming" />
  { {fulln} }
  <!-- 一百次调用 -->
  { {fulln} }
<script>
  var app = new Vue({
    el: "#div",
    data: {
      xing: "",
      ming: ""
    computed: {
      fulln() {
        return this.xing + this.ming + Date.now();
</script>

<span class="todo-count"><strong>{ {getNu}}< /strong> item left</span>

computed: {
    // 未完成任务个数
    getNu() {
        return (this.list_data.filter((v) => !v.stat)).length;
}

<div id="div">
  <input type="text" v-model="xing" />
  <input type="text" v-model="ming" />
  { { fullnam e }}
<script>
  var app = new Vue({
    el: "#div",
    data: {
      xing: "",
      ming: "",
      fullname: ""
    // 设置侦听器
    watch: {
      // 侦听器中的方法名和要真挺的数据属性名必须一致
      // xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
      xing: function(newVal, old_val) {
        this.fullname = newVal + this.ming;
      ming: function(newVal, oldVal) {
        this.fullname = this.xing + newVal;
</script>

<div id="div">
  <input type="text" v-model="xing" />
  <input type="text" v-model="ming" />
  { { fullnam e }}
<script src="./jq.js"></script>
<script>
  var app = new Vue({
    el: "#div",
    data: {
      xing: "",
      ming: "",
      fullname: ""
    // 设置侦听器
    watch: {
      // 侦听器中的方法名和要真挺的数据属性名必须一致
      // xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
      xing: function(newVal, old_val) {
        // this.fullname = newVal+this.ming;
        var t = this;
        // 在侦听器中执行异步网络请求
        $.get("./xx.php", d => {
          t.fullname = d;
</script>

<div id="app">
  <input type="button" @click="click" value="按钮" /> <br />
  <p ref="pv">123</p>
<script>
  var app = new Vue({
    el: "#app",
    methods: {
      click: function() {
        // 使用原生JS获取dom数据
        // var p = document.getElementsByTagName('p')[0].innerHTML;
        // console.log(p);
        // 使用vue ref 属性获取dom数据
        var d = this.$refs.pv.innerHTML;
        console.log(d);
  console.log(app.$refs);
</script>

var app = new Vue({
  el: "#app",
  data: { msg: "UP" },
  //定义过滤器
  filters: {
    // 过滤器的名称及方法
    myFilters: function(val) {
      return val.toLowerCase();
});

<div id="app">
  <input type="text" v-model="msg" /> <br />
  { {msg|myFilter s|get3}}
<script>
  var app = new Vue({
    el: "#app",
    data: {
      msg: ""
    //定义过滤器
    filters: {
      // 过滤器的名称及方法
      myFilters: function(val) {
        return val.toLowerCase();
      get3: function(val) {
        // 遇到数字替换为 0
        // var reg = /\d/g;
        // return val.replace(reg,0);
        return val.replace("苍井空", "***");
</script>

<div id="app">
  <input type="text" v-model="msg" /> <br />
  { {msg|myFilter s}}
<!-- 定义两个DOM节点 -->
<div id="app2">
  <input type="text" v-model="msg" /> <br />
  { {msg|myFilter s|get3}}
<script>
  Vue.filter("myFilters", function(val) {
    return val.toLowerCase();
  // 定义两个全局过滤器
  Vue.filter("get3", function(val) {
    return val.replace("苍井空", "***");
  // 两个Vue 实例
  var app = new Vue({
    el: "#app",
    data: {
      msg: ""
  var app2 = new Vue({
    el: "#app2",
    data: {
      msg: ""
</script>

<div id="app">
    <p v-setcolor>自定义指令的使用</p>
<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('setcolor', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.style.color = 'red';
    var app = new Vue({
        el: '#app',
</script>

<div id="app">
  <p v-setcolor>自定义指令的使用</p>
<script>
  var app = new Vue({
    el: "#app",
    // 注册 局部(私有)指令
    directives: {
      // 定义指令名称
      setcolor: {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function(el) {
          // 聚焦元素
          el.style.color = "red";
</script>

<input
  @keyup.enter="addTodo"
  v-getfocus
  class="new-todo"
  placeholder="请输入"
/>

// 注册 局部(私有)指令
directives: {
    // 定义指令名称
    getfocus: {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
},

<div id="app">
  <p v-setcolor="colors">自定义指令的使用</p>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      colors: "yellow"
    // 注册 局部(私有)指令
    directives: {
      // 定义指令名称
      setcolor: {
        // 自定义指令可以接受第二个参数
        inserted: function(el, val) {
          // 第二个参数中包含了指令名称、挂载名称及数据键值
          console.log(val);
          // 聚焦元素
          el.style.color = val.value;
</script>

<div id="app">
  <button @click="go">显示/隐藏</button>
  <p v-show="is">pppppp1111</p>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: true
    methods: {
      go() {
        this.isShow = !this.isShow;
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s;
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  .man-enter-active,
  .man-leave-active {
    transition: opacity 4s;
  .man-enter,
  .man-leave-to {
    opacity: 0;
</style>
<div id="app">
  <button @click="go">显示/隐藏</button>
  <transition name="fade">
    <p v-show="isShow">pppppp1111</p>
  </transition>
  <transition name="man">
    <p v-show="isShow">pppppp222</p>
  </transition>
  <transition-group name="fade" tag="ul">
    <li v-for="(v,k) in list" :key="v">
      { {v} }
      <a href="javascript:void(0)" @click="del(k)">删除</a>
  </transition-group>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: true,
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    methods: {
      go() {
        this.isShow = !this.isShow;
      del(index) {
        this.list.splice(index, 1);
</script>
注意：transition只对单个有效，而transition-group可以对一组有效，两者使用方式基本一样，后者有tag，这个属性作用主要是当页面完成后，替换transition标签，可以是任何DOM元素
可以配合第三方vue2-animate包使用
npm install vue2-animate
此包只需在transition标签的name加上要应用的效果即可(以上示例)
也可使用原始的animate官方包 ，效果更多，但需自行修改class名称
下载：从下面效果展示链接下载
以下是原animate使用示例
<transition
  name:fade
  enter-active-class="animated swing"
  leave-active-class="animated shake"
</transition>
<!--使用注意：在修改类内必须加animate 后面接着要使用的动画类即可-->

//在transition标签中，可以设置一个appear指令，这个指令可以实现打开网页\初次进入时触发动画
//基本使用：
<transition appear ></transition>
//也可使用自定义动画效果或第三方库，通过修改class实现
<transition appear  appear-active-class='animated swing' ></transition>
//appear也可修改类名

<transition <!-- 进入 -->
  v-on:before-enter="beforeEnter" v-on:enter="enter"
  v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"
  <!-- 离开 -->
  v-on:before-leave="beforeLeave" v-on:leave="leave"
  v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" >
  <!-- ... -->
</transition>
// ... methods: { // -------- // 进入中 // -------- beforeEnter: function (el) {
// ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el,
done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled:
function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave:
function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的
leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ...
}, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
@before-enter   动画执行前
@enter        执行动画
@after        动画执行中
@enter        执行完毕
//离开/进入 各有一套
-->

<!--
Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
    <p v-if="show">
  </transition>
<script>
  new Vue({
    el: "#example-4",
    data: {
      show: false
    methods: {
      beforeEnter: function(el) {
        el.style.opacity = 0;
        el.style.transformOrigin = "left";
      enter: function(el, done) {
        Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
        Velocity(el, { fontSize: "1em" }, { complete: done }); //complete 作用：通知动画结束
      leave: function(el, done) {
        Velocity(
          { translateX: "15px", rotateZ: "50deg" },
          { duration: 600 }
        Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
        Velocity(
            rotateZ: "45deg",
            translateY: "30px",
            translateX: "30px",
            opacity: 0
          { complete: done }
</script>

<!--多个元素-->
<transition mode='out-in'> <!--如果不设置mode 那么开始离开动画将同时执行，有时效果会不那么好，
  参数可以参考以上，这里用的是先离开后进入 -->
    <button v-if='show === 'div1' ' key='1'>  <!--相同标签名必须设置key区分，否则应用全部-->
        name:1
    </button>
    <button v-if='show === 'div2' ' key='2'>
        name:2
    </button>
</transition>
<button @click='toggle'>
        toggle
    </button>
new Vue({
el:'#app',
data:{
show:'div1'
methods:{
toggle()
        this.show = this.show === 'div1' ? 'div2' : 'div1'
<!--上面的例子利用动态key简写-->
<transition :key='show' mode='out-in'>
    { {ShowMassage} }
</transition>
<button @click='toggle'>
    toggle
</button>
new Vue({
el:'#app',
data:{
show:'div1'
computed:{
    ShowMassage()
         switch (this.show) {
          case 'div1': return 'div1'
          case 'div2': return 'div2'
methods:{
toggle()
        this.show = this.show === 'div1' ? 'div2' : 'div1'
<!--在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：-->
<transition>
  <button v-bind:key="isEditing">
    { { isEditin g ? 'Save' : 'Edit' }}
  </button>
</transition>
<!--多个组件-->
<!--不需要使用 key 特性。相反，我们只需要使用动态组件-->
<transition  mode="out-in">
  <component :is="view"></component>
</transition>
<button @click='toggle'>
    toggle
</button>
new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
methods:{
toggle()
this.view = this.view === 'v-a' ? 'v-b' :'v-a'
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    'v-b': {
      template: '<div>Component B</div>'
})

{
  "tb1": [
      "id": 1,
      "title": "标题1",
      "author": "描述信息1"
      "id": 2,
      "title": "标题2",
      "author": "描述信息2"
  "tb2": [
      "id": 1,
      "body": "some comment",
      "postId": 1
  "tb3": {
    "name": "typicode"
}

$ json-server --watch data.json
  \{^_^}/ hi!
  Loading data.json
  Resources
  http://localhost:3000/tb1
  http://localhost:3000/tb2
  http://localhost:3000/tb3
  http://localhost:3000
  Type s + enter at any time to create a snapshot of the database
  Watching...

<script src="./axios.js"></script>
<script>
  // 获取全部数据
  axios.get("http://localhost:3000/list_data").then(data => {
    console.log(data);
  // 获取一条数据
  axios.get("http://localhost:3000/list_data/2").then(data => {
    console.log(data);
  // 添加一条数据
  axios
    .post("http://localhost:3000/list_data", { stat: false, title: "喝水" })
    .then(d => {
      console.log(d);
    .catch(error => console.log(error));
  // 删除一条数据
  axios
    .delete("http://localhost:3000/list_data/4")
    .then(d => {
      console.log(d);
    .catch(error => console.log(error));
  // 修改一条数据
  axios
    .put("http://localhost:3000/list_data/6", { title: "hhhhhh" })
    .then(d => {
      console.log(d);
    .catch(error => console.log(error));
</script>

{
  "list_data": [
      "id": 1,
      "title": "吃饭",
      "stat": true
      "id": 2,
      "title": "睡觉",
      "stat": false
      "id": 3,
      "title": "打豆豆",
      "stat": true
}

el: '#todoapp',
data: {
    // list_data:list_data,
    list_data:[]// es6属性简写
// 当vue实例获取到 el:'#todoapp' 自动调用执行 mounted 方法
mounted:function(){
    let url = 'http://localhost:3000/list_data';
    axios.get(url).then((backdata)=>{
        // console.log(backdata.data);
        this.list_data = backdata.data;
},

……
methods: {
    // 添加任务事件处理器
    // addTodo:function(){}
    // 简写形式
    addTodo(ev) {
        // 获取当前触发事件的元素
        var inputs = ev.target;
        // 获取value值，去除空白后判断，如果为空，则不添加任务
        if (inputs.value.trim() == '') {
            return;
        // 组装任务数据
        var todo_data = {
            // 通过服务器添加数据时，不需要id值
            // id: this.list_data.length + 1 + 1,
            title: inputs.value,
            stat: false
        let url = 'http://localhost:3000/list_data';
        // 将数据提交保存到服务器
        axios.post(url,todo_data).then((back_data)=>{
            let {data,status} = back_data;
            if(status == 201){
                // console.log(this.list_data);
                // 数据保存成功后，将数据添加到任务列表展示
                this.list_data.push(data);
        // 清空文本框
        inputs.value = '';

<button @click="removeTodo(key,val.id)" class="destroy"></button>

// 删除操作
removeTodo(key,id) {
    let url = 'http://localhost:3000/list_data/'+id;
    axios.delete(url).then((back_data)=>{
        // 结构对象
        let {data,status} = back_data;
        // console.log(back_data);
        if(status == 200){
            this.list_data.splice(key, 1);
},

<li
  v-for="(val,key) in list_data"
  @click="todoDone(key,val.id)"
  v-bind:class="{completed:val.stat}"
></li>

// 完成任务 事件处理器(新添加，原案例中没有)
todoDone(key,id){
    let url = 'http://localhost:3000/list_data/'+id;
    // 组装数据准备修改服务器数据
    setdata = {};
    // 注意：事件优先于浏览器渲染执行，获取当前状态
    var chestat = this.list_data[key].stat;
    // 状态取反
    setdata.stat = !chestat;
    setdata.title = this.list_data[key].title;
    // console.log(setdata);
    axios.put(url,setdata).then((backdata)=>{
        var {data,status} = backdata;
        // 如果服务器修改失败,则重新渲染DOM节点样式，改回原始状态
        // 服务器返回状态有误
        if(status != 200){
            this.list_data[key].stat = chestat;
        // 如果异步执行失败失败,则重新渲染DOM节点样式，改回原始状态
    }).catch((err)=>{
        if(err){
            this.list_data[key].stat = chestat;
},

//1.
<div id="app">
  <!-- 使用组件 -->
  <!-- 将组件名直接当做标签名在html代码中使用即可 -->
  <mytemp></mytemp>
  <!-- 组件可以进行任意次数的复用 -->
  <mytemp></mytemp>
<template id="app2">
  <h2>我是一个组件</h2>
</template>
<script>
  // 定义一个名为 mytemp 的新组件
  Vue.component("mytemp", {
    // template属性的值，作为组件的内容
    // vue 会把这个值替换到html中并会被浏览器渲染
    template: "<h2>我是一个组件</h2>" //template 值也可以是  #app2 像vue实例的el一样
  var app = new Vue({
    el: "#app"
</script>

<div id="app">
  <!-- 使用组件 -->
  <!-- 将组件名直接当做标签名在html代码中使用即可 -->
  <mytemp></mytemp>
<div id="app2">
  <!-- 不可用 -->
  <mytemp></mytemp>
<script>
  var app = new Vue({
    el: "#app",
    // app 的私有组件，其他实例对象不可用
    components: {
      mytemp: {
        template: "<h2>我是一个组件</h2>"
  var app2 = new Vue({
    el: "#app2"
</script>

<div id="app">
  <!-- 使用组件 -->
  <!-- 将组件名直接当做标签名在html代码中使用即可 -->
  <my-temp></my-temp>
  <!-- 单标签方式使用 -->
  <my-temp />
<div id="app2">
  <!-- 不可用 -->
  <mytemp></mytemp>
<script>
  var app = new Vue({
    el: "#app",
    // app 的私有组件，其他实例对象不可用
    components: {
      // 驼峰法命名
      myTemp: {
        // 必须有唯一的根标签，多标签报错
        template: "<div><h2>我是一个组件</h2><h3>df</h3></div>"
  var app2 = new Vue({
    el: "#app2"
</script>

* {
  margin: 0;
  padding: 0;
.top {
  width: 100%;
  height: 80px;
  background-color: #ccc;
.left {
  margin-top: 20px;
  width: 800px;
  height: 600px;
  background-color: #ccc;
  float: left;
.right {
  margin-top: 20px;
  width: 400px;
  height: 600px;
  background-color: #ccc;
  float: right;
}

<div id="app">
  <div class="top">我是顶</div>
  <div class="left">我是左</div>
  <div class="right">我是右</div>
</div>

<div id="app">
  <tops></tops>
  <lefts></lefts>
  <rights></rights>
<script>
  var app = new Vue({
    el: "#app",
    components: {
      tops: {
        template: '<div class="top">我是顶</div>'
      lefts: {
        template: '<div class="left">我是左</div>'
      rights: {
        template: '<div class="right">我是右</div>'
</script>

<div id="app">
  <my-temp></my-temp>
<script>
  var app = new Vue({
    el: "#app",
    components: {
      myTemp: {
        // 一个组件的 data 选项必须是一个函数
        data: function() {
          // 将 数据 装入 对象 返回
          return { msg: "我是data选项" };
        // 其他选项的使用不受影响
        methods: {
          cli() {
            alert(123);
        template: "<div @click='cli'>{ {msg}}< /div>"
</script>

<div id="app">
  { {msg} }
<script>
  var app = new Vue({
    el: "#app",
    data: { msg: "数据" },
    template: "<h2>组件</h2>"
</script>

<div id="app">
  { {msg} }
<script>
  var app = new Vue({
    el: "#app",
    data: { msg: "数据" },
    template: "<h2>组件{ {msg}}< /h2>"
</script>

<div id="app">
  <mytemp></mytemp>
<script>
  var app = new Vue({
    el: "#app",
    data: { msg: "数据" },
    components: {
      mytemp: {
        template: "<h2>data:{ {msg}}< /h2>"
</script>

<div id="app">
  <mytemp cc="我是cc"></mytemp>
<script>
  var app = new Vue({
    el: "#app",
    data: { msg: "数据" },
    components: {
      mytemp: {
        template: "<h2>data:{ {cc}}< /h2>",
        props: ["cc"]
</script>

<div id="app">
  <mytemp v-bind:cc="msg" v-bind:kk="msg2"></mytemp>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      msg: "数据",
      msg2: "数据二"
    components: {
      mytemp: {
        template: "<h2>data:{ {cc}} <br>{ {kk}}< /h2>",
        props: ["cc", "kk"]
</script>

//Prop 类型
//到这里，我们只看到了以字符串数组形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
//但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
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
  }

 <!-- 父组件 -->
    <div id="app">
      <h1>我是父组件！</h1>
      <child ref="msg"></child>
    <!-- 子组件 -->
    <template id="app2">
        <h1>我是子组件一！</h1>
    </template>
    <script>
      let app = new Vue({
        el: "#app",
        components: {
          Child: {
            template: "#app2",
            data() {
              return {
                msg: "子组件的信息"
            methods: {
              getmsg() {
                return this.msg;
        mounted: function() {
        //   console.log(this.$refs.msg); 子组件的属性和方法都可以在$refs中拿到
          this.msg = this.$refs.msg.getmsg();
          console.log("父组件："+this.msg+'已经被我拿到了');
    </script>

<div id="app" >
        //3.在父组件中绑定传过来的自定义事件，然后使用这个自定义事件绑定自己的函数，即可实现子传父
        <mytemp @childevents="Sendparent"> </mytemp>
        //<mytemp @childevents="msg = $event"> </mytemp> 也可以不用函数，使用$event来获取发来的值
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "数据"
        components: {
          mytemp: {
               //1.在子组件模板中，定义一个触发事件，触发的函数必须是子组件自己拥有的函数
            template: ' <input type="button" value="提交" @click="send" />',
            data() {
              return {
                chilAttr: "child"
            methods: {
              send() {
                //2.使用$emit实现子传父
                this.$emit("childevents", this.chilAttr);
                //向父元素发送自定义事件    两个参数：1 自定义事件名   2 传参
        methods: {
          Sendparent(child) {
              this.msg = child;
    </script>
//注意： 自定义事件的命名不能为驼峰，否则会出错。

<div id="app">
  <child content="hello"></child>
  <child content="world"></child>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  //子组件
  let child = {
    props: {
      content: String
    data: function() {
      return {
        childCt: this.content
    template: "<button @click='add'>{ {childCt}}< /button>",
    methods: {
      add() {
        // $root 可以访问到根组件
        this.$root.Bus.$emit("change", this.childCt);
    mounted() {
      let that = this;
      this.$root.Bus.$on("change", res => {
        that.childCt = res;
  //根组件
  new Vue({
    el: "#app",
    data: {
      Bus: new Vue()
    components: {
      child
</script>

/*
插槽的基本使用： 默认 <slot></slot>
              具名插槽 <slot name='?'></slot>
默认的插槽由于没有名字，所以当嵌套标签时，默认会替换全部
而具名插槽就是来解决这个问题的，使用方式： slot = '对应的name' 即可替换对应的slot，从而解决上述问题
注意：但没有传入标签时，会使用默认的规定好的嵌套标签
 <div id="app">
      <child>
        <span slot='header'>头</span>
        <span slot='center'>body</span>
        <span slot='footer'>脚</span>
      </child>
      <child>
        <p>1</p>    //默认  不会产生影响  因为没有名字
      </child>
      <child>
        <span>new</span>
      </child>
    <template id="child">
        <slot name='header'>Default</slot>
        <slot name='center'>Default</slot>
        <slot name='footer'>Default</slot>
    </template>
    <script>
      let app = new Vue({
        el: "#app",
        components: {
          child: {
            template: "#child"
    </script>
//2.6.0版本更新后以上语法已经废弃，新语法：
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <div id='app'>
                <child>
                    <template v-slot:header>
                    <div>title</div>
                    </template>
                    <template v-slot:body>
                    <div>body</div>
                    </template>
                    <template v-slot:footer>
                    <div>footer</div>
                    </template>
                </child>
            <template id="container">
                  <header>
                    <slot name="header"></slot>
                  </header>
                    <slot name="body"></slot>
                  </main>
                  <footer>
                    <slot name="footer"></slot>
                  </footer>
            </template>
            <script>
                  let app = new Vue({
                    el: "#app",
                    components: {
                      child: {
                        template: "#container"
             </script>
//注意 v-slot 只能添加在一个 <template> 上

<div id="app">
      <child v-show="isShow"></child>
    <script>
      let app = new Vue({
        el: "div",
        components: {
          child: {
            template: `<div>
                  <span>child</span>
                  </div>`,
            data() {
              return {
                isShow: false
        data: {
          isShow: true
    </script>
//在组件作用域中，每个组件都有自己的作用域，上述的isShow 默认选择了vue实例的isShow，而不是子组件自己的isShow

/*作用域插槽的基本使用：1.在插槽或具名插槽中绑定要传输的数据
                    2. 在父级作用域中（应用的地方），加上template标签并添加 v-slot指令，接着赋值任意的名称，最后就可以使用刚刚自定义的名称来访问传过来的数据了
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <child ref='child1'>
            <template #title='s'> // v-slot:title = 's'
              <span v-show='s.data' @click='toggle(s.data)'>child</span>
            </template>
      </child>
   <script>
      let app = new Vue({
        el: "div",
        components: {
          child: {
            template: `<div>
                            <slot :data='isShow' name ='title' >
                            </slot>
                        </div>`,
            data() {
              return {
                isShow: true
        data: {
          isShow: false,
          res:null
        methods:{
            toggle(s)
                  console.log(this.$children,this.$refs.child1);
                  //$children $refs 都可以获取子组件数据
                  this.$refs.child1.isShow = !this.$children[0].isShow
    </script>
//此语法只能在2.6.0版本以上使用

//使用内置组件 component，并指定 :is 指令，:is指令指向要切换的标签
<component is:'toggle'></component>

//只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once
  >This will never change: { {msg}}< /span>
  <!-- 有子元素 -->
  <div v-once>
    <h1>comment</h1>
    <p>{ {msg}}< /p></p>
  <!-- 组件 -->
  <my-component v-once :comment="msg"></my-component>
  <!-- `v-for` 指令-->
    <li v-for="i in list" v-once>{ {i}}< /li></li>
  //试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉
  v-once
  或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。</span
>

new Vue({
  data: {
  created: function() {
    // `this` 指向 vm 实例
    console.log("a is: " + this.a);
// => "a is: 1"

<div id="app">
  { { ms g }}
  <input type="text" ref="txt" v-model="msg" />
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "hello vue",
      dataList: []
    // 在vue对象初始化过程中执行
    beforeCreate() {
      console.log("beforeCreate");
      console.log(this.msg); // undefined
    // 在vue对象初始化完成后执行
    created() {
      console.log("created");
      console.log(this.msg); //hello vue
    // ……
</script>

<!-- 引入路由 -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
    <li><a href="#/login">登录</a></li>
    <li><a href="#/register">注册</a></li>
  <!-- 路由中设置的组件会替换router-view标签 -->
  <router-view></router-view>
<script>
  // 1:定义路由组件
  var login = {
    template: "<h2>我是登录页面</h2>"
  var register = {
    template: "<h2>注册有好礼</h2>"
  // 2:获取路由对象
  var router = new VueRouter({
    // 定义路由规则
    routes: [
      // {请求的路径,componet是模板}
      { path: "/register", component: register },
      { path: "/login", component: login }
  var app = new Vue({
    el: "#app",
    // ES6 属性简写
    // 3:将router对象传入Vue
    router
</script>

<div id="app">
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/register">注册</router-link></li>
    <!-- <li><a href="#/login">登录</a></li>
        <li><a href="#/register">注册</a></li> -->
    <!-- router-link 会被解析为a标签 -->
            不同的是，router-link在解析为a标签后，
            会自动为点击的 a 标签添加class属性
  <!-- 路由中设置的组件会替换router-view标签 -->
  <router-view></router-view>
</div>

<style>
  .router-link-active {
    color: red;
</style>

To get started:
  cd myapps
  npm run dev   // 使用命令启动项目
  -----
  Your application is running here: http://localhost:8080
  打开浏览器，访问 http://localhost:8080
  看到浏览器的欢迎界面，表示项目运行成功

├── build                webpack打包相关配置文件目录
├── config                webpack打包相关配置文件目录
├── node_modules         第三方包
├── src                    项目源码(主战场)
│   ├── assets             存储静态资源，例如 css、img、fonts
│   ├── components         存储所有公共组件
│   ├── router             路由
│   ├── App.vue             单页面应用程序的根组件
│   └── main.js             程序入口，负责把根组件替换到根节点
├── static                可以放一些静态资源
│   └── .gitkeep         git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc             配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig         给编辑器看的
├── .eslintignore          给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js         给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore             给git使用的，用来配置忽略上传的文件
├── index.html             单页面应用程序的单页
├── package.json         项目说明，用来保存依赖项等信息
├── package-lock.json      锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js          给postcss用的，postcss类似于 less、sass 预处理器
└── README.md             项目说明文档

// 入口文件
// 以es6模块的方式引入 vue APP router 三个模块;
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 },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: "<App/>"
});

import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
// Vue 中插件引入语法
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router);
// ES6模块导出语法
export default new Router({
  routes: [
    // 定义一个路由规则
      path: "/", // 请求路径
      name: "HelloWorld", // 路由名称标识
      component: HelloWorld //请求此路由时，使用的组件
});

export default {
  // 模块名字
  name: "HelloWorld",
  // 组件中 data 数据必须是一个有返回值的方法
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
};

(main.js->template: '<App/>')替换 (index.html->div#app);
(index.html-><App/>) --> (components: { App })
( components: { App }) --> (import App from './App' -> src/App.vue)
(App.vue -> <router-view/> -> 路由组件) --> (main.js-> router)
========此项决定了页面展示那个组件内容 ========
({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')
(src/components/HelloWorld.vue) --> <router-view/>

import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
// 引入(导入) 组件
import MyRouter from "@/components/MyRouter";
Vue.use(Router);
// ES6模块导出语法
export default new Router({
  routes: [
    { path: "/", name: "HelloWorld", component: HelloWorld },
    // 添加自己的路由及组件
      path: "/myrouter",
      name: "MyRouter",
      component: MyRouter
});

<template>
  <div class="mypage">
    { {mydatas} }
</template>
<script>
  // 模块化导出
  export default {
    data() {
      return { mydatas: "lksadjflks" };
</script>
<style>
  .mypage {
    width: 200px;
    height: 50px;
    background: pink;
</style>

const store = new Vuex.Store({
  // ...
  strict: true
});

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== "production"
});

//安装
npm install vuex
import Vuex from "vuex"
//也可以在vue-cli中单独添加一个文件类似vue-router一样，命名为store(脚手架环境)
import Vue from "vue"
import Vuex form 'vuex'
Vue.use(Vuex)
//基本使用/介绍
//跟router一样，要new一个vuex
let store = new Vuex.Store({
//1.strict是否开启严格模式，
    strice：true，
//2.state 存放数据的属性 vuex核心
    state：{
      ...data
//3.改变state时必须经过的属性
    muations:{
        ...function(state,...参数)
/*4.Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。*/
    actions:{
        ...function(state || {commit},参数)
//5.类似vue的计算computed，主要处理一些需要计算、总和的操作
    getters:{
        ...function(state){
            return state.?+state.?
//6.类似路由组件，可以分成很多个模块引入加载
    modules:{
        ...vuex模块

//使用之前必须从vuex里引入这些方法：import {mapState, mapActions, mapGetters} from 'vuex';
computed:{
    ...mapState([vuex里面的state]),
    ...mapGetters([vuex里面的getters])
methods:{
    ...mapActions([vuex里面的actions])
    ...mapMutations([vuex里面的mutations])
//也可以传入一个对象，用于命别名
    ...mapActions({
      a:'fun'
    })

import Vue from "vue";
import Vuex from "vuex";
import ModA from "./mod_a";
import ModB from "./mod_b";
Vue.use(Vuex);
//vuex3-声明store对象
export default new Vuex.Store({
  strict: process.env.NODE_ENV != "production", //严格模式：防止直接修改state
  state: {
    //核心：数据
    a: 12,
    b: 5,
    users: []
  mutations: {
    addA(state, n) {
      state.a += n;
    addB(state, n) {
      state.b += n;
    setOnline(state, id) {
      state.users.forEach(user => {
        if (user.id == id) {
          user.online = true;
    setUsers(state, users) {
      state.users = users;
  actions: {
    addA({ commit }, n) {
      commit("addA", n);
    addB({ commit }, n) {
      commit("addB", n);
    setOnline({ commit }, id) {
      commit("setOnline", id);
    async readUsers({ commit }) {
      let res = await fetch("http://localhost:8081/user.txt");
      let users = await res.json();
      commit("setUsers", users);
  getters: {
    count(state) {
      return state.a + state.b;
    onlineUsers(state) {
      return state.users.filter(user => user.online);
  modules: {
    mod_a: ModA,
    mod_b: ModB
});

<template>
    <div>a: { {a}}< /div>
    <div>b: { {b}}< /div>
    <div>count: { {count}}< /div>
    <input type="button" value="a+5" @click="addA(5)" />
    <input type="button" value="b+3" @click="addB(3)" />
    str: { {$stor e.state.str}}<br>
    a_str: { {str_a}} <br>
    b_str: { {str_b}} <br>
    <input type="button" value="设置A" @click="set_a('aaa')">
    <input type="button" value="设置B" @click="set_b('bbb')">
    <input type="button" value="张三出现" @click="setOnline(5)" />
      <li v-for="user in onlineUsers">
        名字：{ {user.nam e}}
        年龄：{ {user.ag e}}
</template>
<script>
import Table from '@/components/common/Table';
import Cmp1 from '@/components/Cmp1';
import {mapState, mapActions, mapGetters} from 'vuex';
export default {
  name: 'Index',
  data () {
    return {
      fields: [
        {name: 'ID', text: 'ID'},
        {name: 'name', text: '姓名'},
        {name: 'age', text: '年龄'},
      datas: [
        {ID: 1, name: 'blue', age: 18},
        {ID: 2, name: '张三', age: 25},
        {ID: 4, name: 'tom', age: 8},
  async created(){
    await this.readUsers();
    //this.setStr('sdfasdfsdg');
  methods: {
    del(id){
      this.datas=this.datas.filter(data=>data.ID!=id);
    ...mapActions(['addA', 'addB', 'setOnline', 'readUsers']),
    //...mapActions(['setStr'])
    ...mapActions({
      set_a: 'mod_a.setStr',
      set_b: 'mod_b.setStr'
    // set_a(){
    //   this.$store.dispatch('mod_a.setStr', 'aaa');
    // },
    // set_b(){
    //   this.$store.dispatch('mod_b.setStr', 'bbb');
  components: {
    Table, Cmp1
  computed: {
    ...mapState(['a', 'b']),
    ...mapState({
      str_a: state=>state.mod_a.str,
      str_b: state=>state.mod_b.str,
    ...mapGetters(['count', 'onlineUsers'])
</script>
<style scoped>
</style>

import Vue from "vue";
import Router from "vue-router";
import Login from "@/components/login/login";
Vue.use(Router);
export default new Router({
  routes: [
      path: "/login",
      name: "Login",
      component: Login
});

<template>
  <div>{ {msg}}< /div>
</template>
<script>
  export default{
    data(){
      return {msg:'我是登录页面'}
</script>
<style>
</style>

import Vue from "vue";
import App from "./App";
import router from "./router";
// 引入 ElementUI
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 将 ElementUI 注册为 vue的全局组件
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

<template>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</template>

html,
body {
  height: 100%;
body {
  margin: 0;
  padding: 0;
}

// 代码略...
// 引入我们的公共样式
import "./assets/css/style.css";
// 代码略...

<style>
#app {
  height: 100%;
</style>

<template>
  <div class="login-wrap">
    <el-form
      ref="form"
      :label-position="labelPosition"
      :model="form"
      label-width="80px"
      class="login-from"
      <h2>用户登录</h2>
      <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label-position="top" label="密码">
        <el-input v-model="form.pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="login-btn"
          >登录</el-button
      </el-form-item>
    </el-form>
</template>
<script>
  export default {
    data() {
      return {
        labelPosition: "top",
        form: {
          name: "",
          pwd: ""
    methods: {
      onSubmit() {}
</script>

<style>
.login-wrap {
  background-color: #324152;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
.login-wrap .login-from {
  background-color: #fff;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
.login-wrap .login-from .login-btn {
  width: 100%;
</style>

// 引入axios
import Axios from "axios";
// 自定义插件对象
var myaxios = {};
myaxios.install = function(vue) {
  // 设置axios请求的URL，此后axios发送的请求全部执行本地址
  var axios_obj = Axios.create({
    baseURL: "http://localhost:8888/api/private/v1/"
  // 将设置好的axios对象赋值给Vue实例的原型
  // 之后可以在Vue中直接只用 this.$myHttp 使用axios发送请求
  vue.prototype.$myHttp = axios_obj;
// 将插件以 模块 方式导出
export default myaxios;

// 导入 myaxios 模块
import myaxios from "@/assets/js/myaxios.js";
Vue.use(myaxios); // 注册使用 axios 插件

export default {
  data() {
    return {
      labelPosition: "top",
      form: {
        username: "",
        password: ""
  methods: {
    // 修改组件中绑定的按钮名称为 onLogin
    onLogin() {
      // 使用axios 发送post 请求，传入data中的form数据
      this.$myHttp.post("login", this.form).then(backdata => {
        // 异步执行成功后
        console.log(backdata);
};

onLogin(){
    // 使用axios 发送post 请求，传入data中的form数据
    this.$myHttp.post('login',this.form)
        .then(backdata=>{ // 异步执行成功后
        //console.log(backdata.data);
        // 结构赋值，获取返回的数据
        var {data,meta}  = backdata.data;
        // 判断数据状态
        if(meta.status == 200){
            alert('登录成功');
            // 使用vue-router编程式导航跳转到home
            this.$router.push('home');
//注意：push会产生历史记录，因此可以返回，当一些操作不想让撤回时可以使用replace，同时也不会产生历史记录

var { data, meta } = backdata.data;
// 判断数据状态
if (meta.status == 200) {
  this.$message({
    message: "恭喜你，登录成功",
    type: "success"
  // 使用vue-router编程式导航跳转到home
  this.$router.push("home");
} else {
  this.$message.error("错了哦");
}

data() {
    return {
      labelPosition: "top",
      form: {
        username: "",
        password: ""
      // 与 el-form 中的 :rules="rules"  对应
      rules: {
        //与 el-form-item 中的 prop="username" 对应
        username: [
          // 验证规则  是否必须        提示信息            触发时机
          { required: true, message: "请输入用户名", trigger: "blur" }
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }

onLogin() {
    // 因为要获取form表单的节点对象，
    // 所以 el-form 中要加入 ref="ruleForm"
    this.$refs.ruleForm.validate(valid => {
        // elementUI 会将 validate 方法加入到节点对象，
        // 在提交是，如果表单的验证未通过，会将错误信息传入回调函数
        if (!valid) {
            // 如果有表单错误信息，则无反应
            this.$message.error("输入有误");
            return;
        // 使用axios 发送post 请求，传入data中的form数据
        this.$myHttp.post("login", this.form).then(backdata => {
            // 结构赋值，获取返回的数据
            var { data, meta } = backdata.data;
            // 判断数据状态
            if (meta.status == 200) {
                this.$message({
                    message: "恭喜你，登录成功",
                    type: "success"
                // 使用vue-router编程式导航跳转到home
                this.$router.push("home");
            } else {
                this.$message.error("错了哦");

// 使用vue-router编程式导航跳转到home
this.$router.push({ name: "home" });

import Home from '@/components/home/home'
    path:'/',
    name:'home',
    component:Home

<template>
  <div>{ {msg}}< /div>
</template>
<script>
export default {
  data(){
    return{
      msg:'we'
</script>

<template>
  <el-container class="height100">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

.height100 {
  height: 100%;
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

<el-header>
  <el-row>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <img src="/static/logo.png" alt="" />
    </el-col>
    <el-col :span="12"
      ><div class="grid-content bg-purple-light">电商后台管理系统</div></el-col
    <el-col :span="6"
      ><div class="grid-content bg-purple">
        <el-button type="warning">退出</el-button>
      </div></el-col
  </el-row>
</el-header>
…… // 标题文本样式 .bg-purple-light { font-size: 25px; color: white; }

<el-container>
  <el-aside width="200px">
        el-menu 侧边导航栏组件
            unique-opened="true" 只保持一个导航开启
            router="true" 开启导航路由
        el-submenu 导航栏的顶级项
        template 导航栏中需要展示的内容
            span 文字
        el-menu-item-group 次级导航组 内容与导航的组标识 可直接删除
        el-menu-item  导航栏选项
          index属性 控制收起展开+路由标识:
              在el-menu中加入router=“true”属性;
              index="1-1" 点击时路由跳转到1-1 ;
    <el-menu
      :unique-opened="true"
      :router="true"
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="1-1">
          <i class="el-icon-menu"></i>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="2-1">
          <i class="el-icon-menu"></i>
        </el-menu-item>
        <el-menu-item index="2-2">
          <i class="el-icon-menu"></i>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
  <el-main>Main</el-main>
</el-container>

.el-menu {
  width: 200px;
  height: 100%;
.el-submenu {
  text-align: left;
}

<el-main>
  <!-- 路由组件 -->
  <router-view></router-view>
</el-main>

<template>
  <p>我是首页内容</p>
</template>
<script>
  export default {};
</script>
<style></style>

{
    path:'/index',
    name:'index',
    component:Index

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
  <router-view></router-view>
<script>
  // 1:定义路由组件
  var login = {
    template: `
                <h2>我是登录页面</h2>
                <li><router-link to="/zi">子路由</router-link></li>
                <!--路由组件中继续使用路由组件-->
                <router-view></router-view>
  var zi = {
    template: "<h4>我是嵌套路由的组件</h4>"
  // 2:获取路由对象
  var router = new VueRouter({
    // 定义路由规则
    routes: [
        name: "login",
        path: "/login",
        component: login,
        // 路由中的 children 属性，定义嵌套路由(子路由)
        children: [{ name: "zi", path: "/zi", component: zi }]
  var app = new Vue({
    el: "#app",
    router
</script>

(main.js->template: '<App/>')替换 (index.html->div#app);
(index.html-><App/>) --> (components: { App })
( components: { App }) --> (import App from './App' -> src/App.vue)
(App.vue -> <router-view/> -> 路由组件) --> (main.js-> router)
========此项决定了页面展示那个组件内容 ========
({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')
(src/components/HelloWorld.vue) --> <router-view/>

routes: [
    path: "/login",
    name: "Login",
    component: Login
    path: "/",
    name: "home",
    component: Home,
    // 添加子路由
    children: [{ path: "index", name: "index", component: Index }]
];

if (meta.status == 200) {
  this.$message({
    message: "恭喜你，登录成功",
    type: "success"
  // 使用vue-router编程式导航跳转到home->index
  this.$router.push({ name: "index" });
}

if (meta.status == 200) {
  this.$message({
    message: "恭喜你，登录成功",
    type: "success"
  // 登录成功后，将token信息保存到 localStorage
  window.localStorage.setItem("token", data.token);
  // 使用vue-router编程式导航跳转到home->index
  this.$router.push({ name: "index" });
}

export default {
  // 使用生命周期的钩子函数，判断token
  mounted() {
    // 获取token
    var token = window.localStorage.getItem("token");
    if (!token) {
      // 错误提示
      this.$message.error("请登录");
      // 跳转到登录页面
      this.$router.push({ name: "Login" });
  data() {
    return {
      msg: "we"
};

<el-col :span="6"
  ><div class="grid-content bg-purple">
    <el-button @click="loginOut" type="warning">退出</el-button>
  </div></el-col
>

methods:{
    loginOut(){
        // 清楚token
        window.localStorage.removeItem('token')
        // 退出提示
        this.$message({
            message: "您已经退出，继续操作请重新登录",
            type: "success"
        // 页面路由跳转
        this.$router.push({ name: "Login" });

<el-menu-item index="users">
  <i class="el-icon-menu"></i>
</el-menu-item>

import Users from '@/components/users/users'
children:[
    {path:'index',name:'index',component:Index},
    {path:'users',name:'users',component:Users}

<template>
  <div>展示用户列表表格</div>
</template>
<script>
  export default {};
</script>
<style></style>

<template>
    <!-- 面包鞋 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
</template>

……
</el-card>
<el-row>
  <el-col :span="6" class="sou">
    <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
  </el-col>
  <el-col :span="1" class="sou">
      <el-button type="success" plain>添加用户</el-button>
    </el-col>
</el-row>
<script>
export default {
  data(){
    // 不想看到报错
    return{input5:''}
</script>
<style>
.sou{
  line-height:30px
</style>

<!-- 表格 自定义索引 -->
<el-table
    :data="tableData"
    style="width: 100% ;">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      input5:'',
      tableData: [
          date: "2016-05-03",
          name: "王小虎"
</script>
<style>
.sou {
  line-height: 30px;
.el-main{
  line-height:30px;
</style>

data() {
    return {
        input5:'',// 不想看到报错
        // 设置页码及条数
        pagenum:1,
        pagesize:5,
        tableData: []
// 利用钩子函数，获取数据
mounted() {
    // 获取token
    let token = window.localStorage.getItem('token');
    // 通过配置选项发送请求
    // 携带token
    this.$myHttp({
        // 设置链接地址 es6新语法
        url:`users?pagenum=${this.pagenum}&pagesize=${this.pagesize}`,
        method:'get',
        // 配置token
        headers: {'Authorization': token}
    }).then(res=>{
        // 修改数据  展示页面
        this.tableData = res.data.data.users;

<el-table-column label="操作" width="210">
  <template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" plain></el-button>
    <el-button
      type="primary"
      icon="el-icon-check"
      size="mini"
      plain
    ></el-button>
    <el-button
      type="primary"
      icon="el-icon-delete"
      size="mini"
      plain
    ></el-button>
  </template>
</el-table-column>

<el-table-column label="用户状态" width="210">
  <template slot-scope="scope">
    <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>
  </template>
</el-table-column>

<el-table-column label="用户状态" width="210">
  <template slot-scope="scope">
    <!-- 利用scope 中的值，争取显示用户状态 -->
    <el-switch
      v-model="scope.row.mg_state"
      active-color="#13ce66"
      inactive-color="#ff4949"
    ></el-switch>
    <!-- 测试事件，查看 scope 数据 -->
    <el-button type="primary" size="mini" @click="showScope(scope)"
      >显示scope</el-button
  </template>
</el-table-column>

methods:{
    // 测试 方法 显示scope
    showScope(scope){
      console.log(scope);


  <!-- 分页 -->
      current-page  当前页码数
      page-sizes  显示条数选项
      page-size 当前每页条数
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</template>
<script>
data() {
    return {
      input5:'',// 不想看到报错
      pagenum:1, //设置页码
      pagesize:2, // 设置页条数
      total:0,  //显示总条数
      tableData: []
         // 获取总条数 修改数据展示
        this.total = res.data.data.total;

<script>
export default {
  data() {
    return {
      input5: "", // 不想看到报错
      pagenum: 1, //设置页码
      pagesize: 2, // 设置页条数
      total: 0, //显示总条数
      tableData: []
  methods: {
    // 获取用户数据
    getUserData() {
      // 获取token
      let token = window.localStorage.getItem("token");
      // 通过配置选项发送请求
      // 携带token
      this.$myHttp({
        // 设置链接地址 es6新语法
        url: `users?pagenum=${this.pagenum}&pagesize=${this.pagesize}`,
        method: "get",
        // 配置token
        headers: { Authorization: token }
      }).then(res => {
        // 修改数据  展示页面
        this.tableData = res.data.data.users;
        // 获取总条数 修改数据展示
        this.total = res.data.data.total;
    // 点击页码触发
    handleCurrentChange(pages) {
        // console.log(pages);
        // 修改data数据，重新发送请求
        this.pagenum = pages;
        this.getUserData();
    // 改变显示条数时触发
    handleSizeChange(numbers){
      this.pagesize = numbers;
      this.getUserData();
  // 利用钩子函数，获取数据
  mounted() {
    this.getUserData();
</script>

<el-input placeholder="请输入内容" v-model="search" class="input-with-select">
  <el-button
    slot="append"
    @click="searchUsers"
    icon="el-icon-search"
  ></el-button>
</el-input>
<script>
  data() {
      return {
        search: "", // 搜索关键字
        // 请求地址中加入关键字
        url: `users?pagenum=${this.pagenum}&pagesize=${this.pagesize}&query=${this.search}`,
        // 点击搜索事件
        searchUsers(){
            this.getUserData();
</script>

<!-- 利用scope 中的值，争取显示用户状态 -->
<!-- 组件自带change事件 -->
<el-switch
  v-model="scope.row.mg_state"
  @change="change(scope)"
  active-color="#13ce66"
  inactive-color="#ff4949"
></el-switch>

// Switch 开关 组件自带事件
change(scope){
    // 接受本条全部信息
    // console.log(scope)
    let id = scope.row.id; // 获取id
    var state = scope.row.mg_state; // 获取修改后的状态
    // 请求接口
    this.$myHttp.put(`users/${id}/state/${state}`)
        .then(res=>{
        // 修改失败，将状态改为原始值
        if(!res.data.data){
            this.tableData[scope.$index].mg_state = !state;
            this.$message.error("修改失败");

// Switch 开关 组件自带事件
change(scope){
    // 接受本条全部信息
    // console.log(scope)
    let id = scope.row.id; // 获取id
    var state = scope.row.mg_state; // 获取修改后的状态
    // 请求接口
    // 需要使用配置参数请求，设置token
    this.$myHttp({
        url:`users/${id}/state/${state}`,
        method:'put',
        headers: { Authorization: window.localStorage.getItem("token") }
        .then(res=>{
        // 修改失败，将状态改为原始值
        if(!res.data.data){
            this.tableData[scope.$index].mg_state = !state;
            this.$message.error("修改失败");

// 组件中绑定点击按钮
<el-button type="primary" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)" plain></el-button>
// 删除用户
deleteUser(id) {
    //   this.$myHttp({
    //     url: `users/${id}`,
    //     method: "delete",
    //     headers: { Authorization: window.localStorage.getItem("token") }
    //   }).then(res => {
    //     this.getUserData();
    //     this.$message({
    //       message: "删除成功",
    //       type: "success"
    //     });
    //   });
    this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
        .then(() => {
        this.$myHttp({
            url: `users/${id}`,
            method: "delete",
            headers: { Authorization: window.localStorage.getItem("token") }
        }).then(res => {
            this.getUserData();
            this.$message({
                message: "删除成功",
                type: "success"
        .catch(() => {
        this.$message({
            type: "info",
            message: "已取消删除"

<el-col :span="1" class="sou">
  <!-- 绑定按钮点击事件 直接将 dialogFormVisible值设置为true显示窗口  -->
  <el-button type="success" @click="dialogFormVisible = true" >添加用户</el-button>
    :visible.sync属性 控制窗口显示隐藏
  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消或确定修改dialogFormVisible=false关闭窗口 -->
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </el-dialog>
  </el-col>
</el-row>

<el-col :span="1" class="sou">
  <!-- 绑定按钮点击事件 直接将 dialogFormVisible值设置为true显示窗口  -->
  <el-button type="success" @click="dialogFormVisible = true"
    >添加用户</el-button
    :visible.sync属性 控制窗口显示隐藏
  <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="姓名" label-width="90px">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="90px">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" label-width="90px">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" label-width="90px">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消或确定修改dialogFormVisible=false关闭窗口 -->
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <!-- 修改点击事件，在数据入库成功后关闭窗口 -->
      <el-button type="primary" @click="addUser">确 定</el-button>
  </el-dialog>
</el-col>

data() {
    return {
      dialogFormVisible: false,
      form: {
        username: '',
        password:'',
        email:'',
        mobile:''
methods 方法
 // 添加用户
    addUser(){
      this.$myHttp({
        url:'users',
        method:'post',
        // post数据提交
        data:this.form,
        headers: { Authorization: window.localStorage.getItem("token") }
      }).then(res=>{
          let {data} = res;
          if(data.meta.status == 201){
              // 将数据更新到页面
              this.tableData.push(data.data);
              this.$message({message: "添加用户成功",type: "success"});
              // 关闭窗口
              this.dialogFormVisible = false

<template slot-scope="scope">
  <el-button
    type="primary"
    icon="el-icon-edit"
    size="mini"
    @click="editUserShow(scope.row)"
    plain
  ></el-button>
  <el-button type="primary" icon="el-icon-check" size="mini" plain></el-button>
  <el-button
    type="primary"
    icon="el-icon-delete"
    size="mini"
    @click="deleteUser(scope.row.id)"
    plain
  ></el-button>
</template>

<!-- 修改用户弹窗 -->
<el-dialog title="添加用户" :visible.sync="editUser">
  <el-form :model="edit">
    <el-form-item label="姓名" label-width="90px">
      <el-input disabled v-model="edit.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" label-width="90px">
      <el-input v-model="edit.email"></el-input>
    </el-form-item>
    <el-form-item label="电话" label-width="90px">
      <el-input v-model="edit.mobile"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <!-- 点击取消或确定修改dialogFormVisible=false关闭窗口 -->
    <el-button @click="editUser = false">取 消</el-button>
    <el-button type="primary" @click="editUserPut">确 定</el-button>
</el-dialog>

// 弹窗并显示用户数据 用于修改表单
editUserShow(users){
    this.editUser = true; // 弹窗
    this.edit = users; // 直接使用表单数据
// 修改用户信息 入库
editUserPut(){
    var id = this.edit.id;
    var email = this.edit.email;
    var mobile = this.edit.mobile;
    this.$myHttp({
        url: `users/${id}`,
        method: "put",
        data:{email,mobile},
        headers: { Authorization: window.localStorage.getItem("token") }
    }).then(res=>{
        // console.log(res);
        if(res.data.meta.status == 200){
            this.editUser = false; // 关闭窗口
            this.getUserData(); // 重新获取数据
            this.$message({message: "修改用户成功",type: "success"});

<!-- 分配角色弹窗 -->
<el-dialog title="分配角色" :visible.sync="showRole">
  <el-form :model="role">
    <el-form-item label="当前用户" label-width="90px">
      <el-input disabled v-model="role.username"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="roleId" placeholder="请选择活动区域">
        <el-option
          v-for="item in roleList"
          :key="item.key"
          :label="item.roleName"
          :value="item.id"
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    { {roleId} }
    <!-- 点击取消或确定修改dialogFormVisible=false关闭窗口 -->
    <el-button @click="showRole = false">取 消</el-button>
    <el-button type="primary" @click="roleUserPut">确 定</el-button>
</el-dialog>

import Rights from '@/components/rights/rights'
{path:'rights',name:'rights',component:Rights}

<template>
    <el-table
      height="850"
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="authName" label="权限名称" width="120">
      </el-table-column>
      <el-table-column property="path" label="路径" width="120">
      </el-table-column>
      <el-table-column property="一级" label="层级"> </el-table-column>
    </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: []
    mounted() {
      this.getlist();
    methods: {
      getlist() {
        this.$myHttp({
          url: "rights/list",
          method: "get",
          headers: { Authorization: window.localStorage.getItem("token") }
        }).then(backs => {
          // console.log(backs);
          this.tableData = backs.data.data;
</script>
<style>
  .el-main {
    line-height: 30px;
</style>

<el-table-column property="level" label="层级">
  <template slot-scope="scope">
    <span v-if="scope.row.level==='0'">一级</span>
    <span v-else-if="scope.row.level==='1'">二级</span>
    <span v-if="scope.row.level==='2'">三级</span>
  </template>
</el-table-column>

import Roles from '@/components/roles/roles'
{path:'roles',name:'roles',component:Roles},

<template>
  <el-table :data="tableData5" style="width: 100%">
    <!-- 折叠内容 -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{ { prop s.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{ { prop s.row.shop }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <!-- 表头及折叠按钮 -->
    <el-table-column label="角色名称" prop="id"> </el-table-column>
    <el-table-column label="角色描述" prop="name"> </el-table-column>
    <el-table-column label="操作" prop="desc"> </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData5: [
            id: "12987122",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333"
            id: "12987123",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333"
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  .el-main {
    line-height: 20px;
</style>

<!-- 表头及折叠按钮 -->
<el-table-column label="角色名称" prop="roleName"> </el-table-column>
<el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
<el-table-column label="操作" prop="desc">
  <template slot-scope="scope">
    <el-button
      type="primary"
      icon="el-icon-edit"
      size="mini"
      circle
    ></el-button>
    <el-button
      type="success"
      icon="el-icon-check"
      size="mini"
      circle
    ></el-button>
  </template>
</el-table-column>

  data() {
    return {
      roleList: []
  mounted() {
    this.getrolelist();
  methods: {
    getrolelist() {
      this.$myHttp({
        url: "roles",
        method: "get"
      }).then(back => {
        this.roleList = back.data.data;

<!-- 折叠内容 -->
<el-table-column type="expand">
  <template slot-scope="props">
    <el-tag closable>可移除</el-tag>
  </template>
</el-table-column>

<!-- 折叠内容 -->
<el-table-column type="expand">
  <template slot-scope="scope">
    { {scope.ro w.children}}
    <!-- <el-tag closable>{ {scope.ro w.children}} </el-tag> -->
  </template>
</el-table-column>

<!-- 折叠内容 -->
<el-table-column type="expand">
  <template slot-scope="scope">
    <!-- Layout 布局 -->
    <el-row>
      <!-- 一级区域 -->
      <el-col :span="6">
        <!-- 一级内容展示 -->
        <el-tag closable>{ {scope.ro w.children[1].authName}} </el-tag> >
      </el-col>
      <el-col :span="18">
        <!-- 二级区域 -->
        <el-row>
          <el-col :span="6">
            <!-- 二级内容 -->
            <el-tag closable type="success"
              >{ {scope.ro w.children[0].children[0].authName}}
            </el-tag>
          </el-col>
          <el-col :span="18">
            <!-- 三级内容 -->
            <el-tag closable type="warning"
              >{ {scope.ro
              w.children[1].children[0].children[0].authName}}</el-tag
            <el-tag closable type="warning"
              >{ {scope.ro
              w.children[1].children[0].children[1].authName}}</el-tag
            <el-tag closable type="warning"
              >{ {scope.ro
              w.children[1].children[0].children[2].authName}}</el-tag
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </template>
</el-table-column>

  <!-- 折叠内容 -->
    <el-table-column type="expand">
      <template slot-scope="scope">
        <!-- Layout 布局 -->
        <el-row class="rowmargin" v-for="item1 in scope.row.children" :key="item1.id">
          <!-- 一级区域 -->
          <el-col :span="6">
            <!-- 一级内容展示 -->
            <el-tag closable>{ {item1.authNam e}} </el-tag> >
          </el-col>
          <el-col :span="18">
            <!-- 二级区域 -->
            <el-row  v-for="item2 in item1.children" :key="item2.id">
              <el-col :span="6">
                  <!-- 二级内容 -->
                  <el-tag closable type="success">{ {item2.authNam e}} </el-tag> >
              </el-col>
              <el-col :span="18">
                  <!-- 三级内容 -->
                  <el-tag v-for="item3 in item2.children" :key="item3.id" closable type="warning">{ {item3.authNam e}} </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 判断没有权限 -->
        <el-row v-if="scope.row.children.length==0">
          <template><el-tag type="danger">木有权限</el-tag></template>
        </el-row>
      </template>
    </el-table-column>
.el-tag{
  margin-top: 10px;
  margin-right:5px;
<style>

<!-- 三级内容 -->
<el-tag
  @close="closeTag(item2,key3)"
  v-for="(item3,key3) in item2.children"
  :key="item3.id"
  closable
  type="warning"
  >{ {item3.authNam e}}
</el-tag>

// 删除角色权限
closeTag(item,key){
    // 数组引用传递，直接删除即可
    // console.log(item,key)
    item.children.splice(key,1);

<el-col :span="18">
  <!-- 三级内容 -->
  <el-tag
    @close="closeTag(item2,key3,scope.row.id,item3.id)"
    v-for="(item3,key3) in item2.children"
    :key="item3.id"
    closable
    type="warning"
    >{ {item3.authNam e}}
  </el-tag>
</el-col>

// 删除角色权限
closeTag(item,key,roleId,rightId){
    // item 要删除元素所在父级数组
    // key 要删除元素所在父级数组下标
    item.children.splice(key,1);
    // roleid 角色ID，rightId权限ID
    // console.log(roleId,rightId);
    this.$myHttp({
        url:`roles/${roleId}/rights/${rightId}`,
        method:'delete'
    }).then(back=>{
        let {meta}  = back.data;
        // console.log(meta);
        if(meta.status == 200){
            this.$message({message:meta.msg,type:'success'});

<template slot-scope="scope">
  <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
  <el-button
    type="success"
    icon="el-icon-check"
    size="mini"
    @click="rightsShow"
    circle
  ></el-button>
</template>

<!-- 修改角色授权面板 -->
<el-dialog title="修改角色权限" :visible.sync="isrightsShow">
  <div slot="footer" class="dialog-footer">
    <el-tree
      show-checkbox="true"
      :data="rightsList"
      :props="defaultProps"
    ></el-tree>
    <!-- 点击取消或确定修改dialogFormVisible=false关闭窗口 -->
    <el-button @click="isrightsShow = false">取 消</el-button>
    <el-button type="primary" @click="rightsPut">确 定</el-button>
</el-dialog>

return {
    // 所有权限列表
    rightsList:[],
    // 设置展示内容
    defaultProps: {
        children: 'children',
        label: 'authName'

// 展示修改角色权限面板
rightsShow() {
    // 获取所有角色权限
    this.$myHttp({
        url:'rights/tree',
        method:'get'
    }).then(back=>{
        let {data,meta} = back.data;
        this.rightsList= data;
    this.isrightsShow = true;

<template slot-scope="scope">
  <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
  <el-button
    @click="rightsShow(scope.row)"
    type="success"
    icon="el-icon-check"
    size="mini"
    circle
  ></el-button>
</template>

<!-- 修改角色授权面板 -->
<el-dialog title="修改角色权限" :visible.sync="isrightsShow">
  <div slot="footer" class="dialog-footer">
          default-expand-all 默认展开所有节点
          node-key="id" 将id设置为节点的唯一主键
          :default-checked-keys=[] 被选中主键的数组
          :props="defaultProps" 设置显示的内容            
          show-checkbox 节点可被选中
    <el-tree
      default-expand-all
      node-key="id"
      :default-checked-keys="defaultChecked"
      show-checkbox
      :data="rightsList"
      :props="defaultProps"
    ></el-tree>
    <!-- 点击取消或确定修改dialogFormVisible=false关闭窗口 -->
    <el-button @click="isrightsShow = false">取 消</el-button>
    <el-button type="primary" @click="rightsPut">确 定</el-button>
</el-dialog>

data() {
    return {
      // 所有权限列表
      rightsList: [],
      // 设置展示内容
      defaultProps: {
        children: "children",
        label: "authName"
      // 默认选中的节点数组
      defaultChecked: [],
      // 控制角色权限面板
      isrightsShow: false,
      // 所有角色数据列表
      roleList: []
// 展示修改角色权限面板
      rightsShow(row) {
          // 获取所有角色权限
          this.$myHttp({
              url: "rights/tree",
              method: "get"
          }).then(back => {
              let { data, meta } = back.data;
              // 显示所有权限
              this.rightsList = data;
          // 遍历row,获取当前角色选中的所有权限，写入数组
          this.defaultChecked = [];
          // 在遍历赋值前，先清空数据，以免受其他数据影响
          var rr = row.children;
          rr.forEach(item1 => {
              item1.children.forEach(item2=>{
                  item2.children.forEach(item3=>{
                      // 只获取第三季选中即可
                      this.defaultChecked.push(item3.id);
          console.log(this.defaultChecked);
          // 控制显示窗口
          this.isrightsShow = true;

    // 提交修改角色权限
    rightsPut() {
      // 在树形控件 中添加 ref="tree" 的属性，在此使用
      // elUI 中提供两个方法getCheckedKeys、getHalfCheckedKeys
      // 获取已选中的节点key
      var arr1 = this.$refs.tree.getCheckedKeys();
      var arr2 = this.$refs.tree.getHalfCheckedKeys();
      // concat() 合并两个数组的元素
      // join() 将数组的值以逗号隔开转为字符串
      var checkedKeys = arr1.concat(arr2).join();
      this.$myHttp({
        // 点击打开窗口是，保存角色id,在此获取使用
        url:`roles/${this.roleId}/rights`,
        method:'post',
        data:{rids:checkedKeys}
      }).then(back=>{
        let {data,meta} = back.data;
        if(meta.status == 200){
          this.isrightsShow = false; // 关闭窗口
          this.getrolelist(); // 刷新数据
          this.$message({message:meta.msg,type:'success'}); // 提示成功

<el-menu unique-opened :router="true" class="el-menu-vertical-demo">
  <el-submenu
    v-for="item in menusList"
    :key="item.id"
    :index="item.id.toString()"
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>{ {item.authNam e}} { {item.i d}}</span>
    </template>
    <el-menu-item
      v-for="item2 in item.children"
      :key="item2.id"
      :index="item2.path"
      <i class="el-icon-menu"></i>
      { {item2.authNam e}} { {item2.pat h}}
    </el-menu-item>
  </el-submenu>
</el-menu>
<script>
  export default {
    // 使用生命周期的钩子函数，判断token
    mounted() {
      // 获取token
      var token = window.localStorage.getItem("token");
      if (!token) {
        // 错误提示
        this.$message.error("请登录");
        // 跳转到登录页面
        this.$router.push({ name: "Login" });
      } else {
        // 登录后，获取左侧菜单权限
        this.$myHttp({
          url: "menus",
          method: "get"
        }).then(back => {
          let { data, meta } = back.data;
          if (meta.status == 200) {
            console.log(data);
            this.menusList = data;
    data() {
      return {
        menusList: [],
        msg: "we"
    methods: {
      loginOut() {
        window.localStorage.removeItem("token");
        this.$message({
          message: "您已经退出，继续操作请重新登录",
          type: "success"
        this.$router.push({ name: "Login" });
</script>

var router = new Router({……})
// 配置路由的导航守卫
router.beforeEach((to, from, next) => {
  // 如果访问登录的路由地址，放过
  if (to.name === 'Login') {
    next();
  } else {
    // 如果请求的不是登录页面，验证token
    // 1. 获取本地存储中的token
    const token = localStorage.getItem('token');
    if (!token) {
      // 2. 如果没有token，跳转到登录
      next({
        name: 'Login'
    } else {
      // 3. 如果有token，继续往下执行
      next();
export default router;

const Login = () => import("@/components/login/login");
const Home = () => import("@/components/home/home");
const UserList = () => import("@/components/userlist/user-list");
const RoleList = () => import("@/components/rolelist/role-list");
const RightsList = () => import("@/components/rightslist/rights-list");
const GoodsList = () => import("@/components/goodslist/goods-list");
const GoodsCategories = () =>
  import("@/components/goodscategories/goods-categories");
const GoodsAdd = () => import("@/components/goodsadd/goods-add");
const Report = () => import("@/components/report/report");
const Order = () => import("@/components/orders/orders");

Vue

Vue

第 0 章 Vue 介绍

0.0 开发工程发展历史

0.1 Vue 介绍

0.2 Vue 初体验

0.3 学习 Vue

第 1 章 Vue 实例对象

第 2 章 模板语法-插值

2.1 文本

第 3 章 模板语法-指令

3.1 v-text / v-html 文本

3.2 v-bind 属性绑定

3.3 v-model 双向数据绑定

3.4 v-on 绑定事件监听

3.4.1 基本使用

3.4.2 事件修饰符

3.4.3 按键修饰符

3.4.4 系统修饰符

3.4.5 鼠标修饰符

3.4.6 为什么在 HTML 中监听事件?

3.5 v-show 显示隐藏

3.6 v-if / v-else / v-else-if 条件判断

3.7 v-for 循环

3.8 v-cloak

3.9 v-once

补充：数组更新检测/对象更新检测

数组监测

对象监测

set/$set 方法的使用

补充：is

第 4 章 TodoList 案例

4.1 项目初始化

4.2 数据遍历

4.3 展示无数据状态

4.3 添加任务

4.4 任务的全选与反选

4.5 完成任务

4.6 删除任务

4.7 删除已完成的任务

第 5 章 MVVM 设计思想

第 6 章 其他知识点汇总

6.1 计算属性与侦听器

6.1.1 计算属性

6.1.2 利用计算属性获取未完成任务个数

6.1.3 使用侦听器

6.2 使用 ref 操作 DOM

6.3 过滤器的使用

6.3.1 私有(局部)过滤器

6.3.2 全局过滤器

6.4 自定义指令

6.4.1 全局自定义指令

6.4.2 私有(局部)自定义指令

6.4.3 利用自定义指令使 TodoList 获取焦点

6.4.4 为自定义指令传值

6.5 过度及动画

初次渲染动画

使用 js 钩子来动画

Velocity.js + js 钩子

多个元素/组件过渡

第 7 章 json-server 与 axios

7.1 json-server 使用

7.2 axios

第 8 章 重构 TodoList 案例

8.1 启动 API 接口及数据

8.2 获取全部任务

8.3 添加任务

8.4 删除任务

8.5 完成任务

8.6 案例中的 Bug

第 9 章 组件

9.1 认识组件

9.2 基本使用

9.3 使用注意

9.4 组件的使用

9.5 组件中的数据及方法

9.6 vue 实例也是组件

父子组件通信*

通过 Prop 向子组件传递数据

检索 prop 数据类型