5.前端基础-Vue

最新推荐文章于 2024-07-04 14:11:39 发布

xjhqre

最新推荐文章于 2024-07-04 14:11:39 发布

阅读量1k

点赞数 1

分类专栏：谷粒商城笔记文章标签：前端

本文链接：https://blog.csdn.net/xjhqre/article/details/124319852

版权

谷粒商城笔记专栏收录该内容

23 篇文章 5 订阅

订阅专栏

1 安装Vue

1、初始化项目：npm init -y

2、安装vue：npm install vue

坑：安装时报错：npm ERR! Refusing to install package with name “vue” under a package

**原因：**项目名和vue相同造成

**解决方法：**修改 package.json 里的 name，改成不是 vue 就行。然后再执行 npm install vue

2 vue声明式渲染

1、新建index.html

坑，现在下载的是vue3版本。Vue3的需要引入的包和语法都发生了改变，还是选择导入cdn把

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h1>{{name}}, 非常帅</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app", // 管控上面的div
            data: {
                name: "张三"
            }
        });
    </script>


</body>

</html>

3 双向绑定

<div id="app">
    <input type="text" v-model="num"> <!-- 和下面vue里的num进行绑定 -->
    <h1>{{name}}, 非常帅，有 {{num}} 个人为他点赞</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app", // 管控上面的div
        data: {
            name: "张三",
            num: 1
        }
    });
</script>

4 单击事件

使用 v-on:click

<div id="app">
    <input type="text" v-model="num"> <!-- 和下面vue里的num进行绑定 -->
    <button v-on:click="num++">点赞</button>
    <h1>{{name}}, 非常帅，有 {{num}} 个人为他点赞</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app", // 管控上面的div
        data: {
            name: "张三",
            num: 1
        }
    });
</script>

5 函数声明和调用

使用 methods 声明多个函数

<div id="app">
    <input type="text" v-model="num"> <!-- 和下面vue里的num进行绑定 -->
    <button v-on:click="num++">点赞</button>
    <button v-on:click="cancle">点赞</button>
    <h1>{{name}}, 非常帅，有 {{num}} 个人为他点赞</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app", // 管控上面的div
        data: {
            name: "张三",
            num: 1
        },
        methods:{
            cancle(){
                this.num--;
            }
        }
    });
</script>

6 安装插件

1、在vscode 安装 Vue 3 Snippets，Vue3的语法提示

2、浏览器安装 Vue.js devtools，插件商店有

7 vue指令

7.1 插值表达式

1、花括号
格式：{{表达式}}

说明：

该表达式支持Js语法，可以调用js.内置函数（必须有返回值)
表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用如:let a =1+1;
可以直接获取vue 实例中定义的数据或函数

2、插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

7.2 v-text、v-html

<div id="app">
    {{msg}} {{1+1}} {{hello()}}<br />
    <span v-html="msg"></span>
    <br />
    <span v-text="msg"></span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    new Vue({
    el: "#app",
    data: {
        msg: "<h1>Hello</h1>",
        link: "http://www.baidu.com"
    },
    methods: {
        hello() {
            return "World"
        }
    }
})
</script>

7.3 v-bind

单向绑定

<!-- 给html标签的属性绑定 -->
<div id="app">

    <a v-bind:href="link">gogogo</a>

    <!-- class,style  {class名：加上？}-->
    <!-- 当isActive和hasError为true时，会在class里加上active和text-danger -->
    <span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            link: "http://www.baidu.com",
            isActive: true,
            hasError: true,
            color1: 'red',
            size: '36px'
        }
    })
</script>

7.4 v-model

双向绑定

<!-- 表单项，自定义组件 -->
<div id="app">

    精通的语言：
    <input type="checkbox" v-model="language" value="Java"> java<br />
    <input type="checkbox" v-model="language" value="PHP"> PHP<br />
    <input type="checkbox" v-model="language" value="Python"> Python<br />
    选中了 {{language.join(",")}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            language: []
        }
    })
</script>

7.5 v-on

@是v-on的缩写

<div id="app">
                
    <!--事件中直接写js片段-->
    <button v-on:click="num++">点赞</button>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button @click="cancle">取消</button>
    <!--  -->
    <h1>有{{num}}个赞</h1>

</div>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            cancle() {
                this.num--;
            }
        }
    })
</script>

7.5.1 事件修饰符

在事件处理程序中调用‘event.preventDefault()或‘event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是:方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop：阻止事件冒泡到父元素’
.preveht：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行)
.once：只执行一次

<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
    大div
    <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
        小div <br />
        <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
    </div>
</div>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    new Vue({
    methods: {
        cancle() {
            this.num--;
        },
        hello() {
            alert("点击了")
        }
    }
})
</script>

7.5.2 按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。vue允许为’v-on’在监听键盘事件时添加按键修饰符:

全部按键的别名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

7.5.3 按组合键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift

<div id="app">
                
    <!-- 按键修饰符，@click.ctrl是按住ctrl后点击 -->
    <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

</div>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            cancle() {
                this.num--;
            }
        }
    })
</script>

7.6 v-for

遍历格式：

显示user信息：v-for="item in items"
获取数组下标：v-for="(item,index) in items"
遍历对象：
1. v-for="value in object"
2. v-for="(value,key) in object"
3. v-for="(value,key,index) in object"
遍历的时候都加上:key来区分不同数据，提高vue渲染效率

<div id="app">
    <ul>
        <!-- :是v-bind的缩写，:key用来表示主键 -->
        <!-- 先遍历在判断if -->
        <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">

            当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>

            对象信息：
            <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}};</span>

        </li>

    </ul>

    <ul>
        <li v-for="(num,index) in nums" :key="index">{{index}} --> {{num}}</li>
    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>         
    let app = new Vue({
        el: "#app",
        data: {
            users: [{ name: '柳岩', gender: '女', age: 21 },
                    { name: '张三', gender: '男', age: 18 },
                    { name: '范冰冰', gender: '女', age: 24 },
                    { name: '刘亦菲', gender: '女', age: 18 },
                    { name: '古力娜扎', gender: '女', age: 25 }],
            nums: [1, 2, 3, 4, 4]
        },
    })
</script>

7.7 v-if、v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

v-show，当得到结果为true时，所在的元素才会被显示。

<div id="app">
    <button v-on:click="show = !show">点我呀</button>
    <!-- 1、使用v-if显示 -->
    <h1 v-if="show">if=看到我....</h1>
    <!-- 2、使用v-show显示 -->
    <h1 v-show="show">show=看到我</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })
</script>

区别：

v-if 在隐藏时直接删除代码

v-show 则是添加display: node样式

7.8 v-else、v-else-if

<div id="app">
    <button v-on:click="random=Math.random()">点我呀</button>
    <span>{{random}}</span>

    <h1 v-if="random>=0.75">
        看到我啦？！ &gt;= 0.75
    </h1>

    <h1 v-else-if="random>=0.5">
        看到我啦？！ &gt;= 0.5
    </h1>

    <h1 v-else-if="random>=0.2">
        看到我啦？！ &gt;= 0.2
    </h1>

    <h1 v-else>
        看到我啦？！ &lt; 0.2
    </h1>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>         
    let app = new Vue({
        el: "#app",
        data: { random: 1 }
    })     
</script>

8 计算属性和监听器

<div id="app">
    <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
    <ul>
        <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
        <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
        <li>总价：{{totalPrice}}</li>
        {{msg}}
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    //watch可以让我们监控一个值的变化。从而做出相应的反应。
    new Vue({
        el: "#app",
        data: {
            xyjPrice: 99.98,
            shzPrice: 98.00,
            xyjNum: 1,
            shzNum: 1,
            msg: ""
        },
        computed: {
            totalPrice() {
                return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
            }
        },
        watch: {
            xyjNum(newVal, oldVal) {
                if (newVal >= 3) {
                    this.msg = "库存超出限制";
                    this.xyjNum = 3
                } else {
                    this.msg = "";
                }
            }
        },
    })
</script>

9 过滤器

<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
<div id="app">
    <ul>
        <li v-for="user in userList">
            {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
            {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
        </li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    // 全局过滤器
    Vue.filter("gFilter", function (val) {
        if (val == 1) {
            return "男~~~";
        } else {
            return "女~~~";
        }
    })

    let vm = new Vue({
        el: "#app",
        data: {
            userList: [
                { id: 1, name: 'jacky', gender: 1 },
                { id: 2, name: 'peter', gender: 0 }
            ]
        },
        filters: {
             filters 定义局部过滤器，只可以在当前vue实例中使用
            genderFilter(val) {
                if (val == 1) {
                    return "男";
                } else {
                    return "女";
                }
            }
        }
    })
</script>

10 组件

组件其实也是一个 vue实例，因此它在定义时也会接收: data、methods、生命周期函数等

不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。但是组件渲染需要html模板，所以增加了template 属性，值就是HTML模板

全局组件定义完毕，任何vue,实例都可以直接在HML中通过组件名称来使用组件了data必须是一个函数，不再是一个对象。

<div id="app">
    <button v-on:click="count++">我被点击了 {{count}} 次</button>

    <counter></counter>
    <counter></counter>
    <counter></counter>
    <counter></counter>
    <counter></counter>

    <button-counter></button-counter>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    //1、全局声明注册一个组件
    Vue.component("counter", {
        template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
        data() {
            return {
                count: 1
            }
        }
    });

    //2、局部声明一个组件
    const buttonCounter = {
        template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
        data() {
            return {
                count: 1
            }
        }
    };

    new Vue({
        el: "#app",
        data: {
            count: 1
        },
        components: {
            'button-counter': buttonCounter
        }
    })
</script>

11 生命周期

每个 Vue实例在被创建时都要经过一系列的初始化过程∶创建实例，装载模板，渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当vue实例处于不同的生命周期时，对应的函数就会被触发调用。
生命周期:你不需要立马弄明白所有的东西。

<div id="app">
    <span id="num">{{num}}</span>
    <button @click="num++">赞！</button>
    <h2>{{name}}，有{{num}}个人点赞</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            name: "张三",
            num: 100
        },
        methods: {
            show() {
                return this.name;
            },
            add() {
                this.num++;
            }
        },
        beforeCreate() {
            console.log("=========beforeCreate=============");
            console.log("数据模型未加载：" + this.name, this.num);
            console.log("方法未加载：" + this.show());
            console.log("html模板未加载：" + document.getElementById("num"));
        },
        created: function () {
            console.log("=========created=============");
            console.log("数据模型已加载：" + this.name, this.num);
            console.log("方法已加载：" + this.show());
            console.log("html模板已加载：" + document.getElementById("num"));
            console.log("html模板未渲染：" + document.getElementById("num").innerText);
        },
        beforeMount() {
            console.log("=========beforeMount=============");
            console.log("html模板未渲染：" + document.getElementById("num").innerText);
        },
        mounted() {
            console.log("=========mounted=============");
            console.log("html模板已渲染：" + document.getElementById("num").innerText);
        },
        beforeUpdate() {
            console.log("=========beforeUpdate=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html模板未更新：" + document.getElementById("num").innerText);
        },
        updated() {
            console.log("=========updated=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html模板已更新：" + document.getElementById("num").innerText);
        }
    });
</script>

12 Vue模块化开发

12.1 全局安装webpack

npm install webpack -g

12.2 全局安装vue脚手架

npm install -g @vue/cli-init

坑：cmd报错找不到vue

解决方法：

把包含vue.cmd的目录添加到系统环境变量里

我的目录是D:\Program Files (x86)\nodejs\node_cache\node_modules\@vue\cli-init\node_modules\.bin

12.3 初始化vue项目

创建一个vue-demo文件夹，在文件夹的目录下启动cmd输入

vue init webpack appname

vue脚手架使用webpack模板初始化一个appname项目

项目选择：

项目名称
项目描述
作者
Runtime recommended for most users
install vue-router? yes
user eslint to lint your code? no
set up unit tests? no
setuptests with Nightwatch? no
Should we run 'npm install for you after the project has been created?(recommended)(Use arrow keys)? yes, use NPM

启动项目

cd vue-demo：进入项目目录
npm run dev：启动项目
访问http://localhost:8080/

12.4 启动vue项目

项目的 package.json 中有scripts，代表我们能运行的命令

npm start = npm run dev：启动项目

12.5 编写hello组件

1、使用vscode打开项目

2、在components中新建Hello.vue

<template>
  <div>
    <h1>你好，Hello，{{name}}</h1>

    <el-radio v-model="radio" label="1">备选项1</el-radio>
    <el-radio v-model="radio" label="2">备选项2</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三",
      radio: "2"
    };
  }
};
</script>

<style >
</style>

3、在router目录下的index.js里添加路由规则

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello' // 导入我们的组件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 编写组件的路由规则
      {
        path: '/hello',
        name: "Hello",
        component: Hello
      }
  ]
})

4、在App.vue里添加路由链接

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    // ###############################
    <router-link to="/hello">去Hello</router-link>
    <router-link to="/">去首页</router-link>
    // ###############################
    <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: 60px;
}
</style>

5、启动服务查看效果

13 整合ElementUI

13.1 安装

npm i element-ui -S

13.2 快速入门

1、在main.js文件中导入，并使用

import ElementUI  from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

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'
import ElementUI  from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

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

2、之后便可使用ElementUI的组件代码，以单选框为例，添加进Hello.vue中

<template>
  <div>
    <h1>你好，Hello，{{name}}</h1>

    <el-radio v-model="radio" label="1">备选项1</el-radio>
    <el-radio v-model="radio" label="2">备选项2</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三",
      radio: "2"
    };
  }
};
</script>

<style >
</style>

3、运行项目查看效果 npm run dev

13.3 Container 布局容器

13.3.1 修改App.vue

使用将模板复制到App.vue里

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>导航一</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><i class="el-icon-setting"></i>导航三</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

http://localhost:8080/#/效果显示：

13.3.2 设置vue代码模板

vue代码模板：

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
    },
    "http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
    }
}

13.4 自定义App.vue功能

13.4.1 修改App.vue

调整el-menu的router参数：使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

修改el-menu-item的 index

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']" :router="true">
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>导航一</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="/table">用户列表</el-menu-item>
            <el-menu-item index="/">Hello</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <router-view></router-view>
        <!--  -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

13.4.2 添加MyTable.vue文件

用vue模板生成

<!--  -->
<template>
  <div class="">
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="140"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

13.4.3 添加路由规则

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello' // 导入我们的组件
import MyTable from '@/components/MyTable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 编写组件的路由规则
    {
      path: '/hello',
      name: "Hello",
      component: Hello
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

13.4.4 测试

启动服务测试

点击左侧导航栏跳转到不同页面

xjhqre

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.前端基础-Vue

文章目录1 安装Vue2 vue声明式渲染3 双向绑定4 单击事件5 函数声明和调用6 安装插件7 vue指令7.1 插值表达式7.2 v-text、v-html7.3 v-bind7.4 v-model7.5 v-on7.5.1 事件修饰符7.5.2 按键修饰符7.5.3 按组合键7.6 v-for7.7 v-if、v-show7.8 v-else、v-else-if8 计算属性和监听器9 过滤器10 组件11 生命周期12 Vue模块化开发12.1 全局安装webpack12.2 全局安装vue脚手架1
复制链接

扫一扫