VUE-前端框架：搭配elementUI

最新推荐文章于 2023-07-25 11:25:10 发布

persistenthuang

最新推荐文章于 2023-07-25 11:25:10 发布

阅读量433

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43309907/article/details/107717729

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2222

文章目录

VUE

中文文档

作者：尤下溪
是一套构建用户界面的渐进式框架。
dom
axios：前端通信框架

Vue结构

mvvm：Model（模型层）+View（视图层）+ViewModel（连接视图和数据的中间件）

VUE基本语法

指令中带有前缀v-，表示他们是vue提供的特殊属性

判断（v-if，v-else）

<div id="app">
    <h1 v-if="ok==='A'">A</h1>
    <h1 v-else-if="ok==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<!--1. 导入vue.js:使用在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            ok: 'A'
        }
    });
</script>

循环（v-for）

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            items:[
                {message:'111'},
                {message:'222'}
            ]
        }
    });
</script>

绑定事件（method）

方法必须定义在Vue的method中
双向数据绑定：当数据发生变化的时候，视图也发生变化，数据也会跟着同步变化
数据双向绑定，一定都是对于UI框架来说的，非UI框架不会设计到数据双向绑定

<div id="app">
<!--事件绑定-->
    <p><button v-on:click="helloVue">点我</button></p>
<!--双向绑定-->
    <p>输入文本:<input type="text" v-model="message"/>{{message}}</p>
<!--下拉框-->
    <p><select v-model="selectd">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>{{selectd}}</p>
</div>

<!--1. 导入vue.js:使用在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let vue=new Vue({
        el:"#app",
        data:{
            message: "persistenthaung",
            selectd:""
        },
        methods: {
            helloVue:function (event) {
                alert(this.message);
            }
        }
    });
</script>

Vue组件（自定义标签）

<div id="app">
    <my-vue v-for="a in items" v-bind:a="a"></my-vue>
</div>

<!--1. 导入vue.js:使用在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    //自定义一个组件
    Vue.component("my-vue",{
        props:['a'],
        template:"<li>{{a}}</li>"
    });
    
    let vue=new Vue({
        el:"#app",
        data:{
            items:['aaa','bbb','ccc']
        },
    });
</script>

Axios异步通信

中文官网

一个开源的可以用在浏览器端口和Node JS的异步通信框架
作用：实现Ajax异步通信
导入在线CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

let vue=new Vue({
        el:"#app",
        data(){
            return{
                //JSON格式，请求的返回参数必须和json字符串一致
                info:{
                }
            }
        },
        //钩子函数，链式编程，ES6新特性
        method(){
            axios.get('../Json文件路径/data.json').then(response=>(this.info=data));
        }
    });

计算属性（computed）

计算出来的结果保存在属性中，内存中运行：虚拟Dom
将计算结果缓存起来
methods和computed里的东西不能重名
作用：将不经常变化的结果进行缓存，以节约我们的系统开销

<div id="app">
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    let vue=new Vue({
        el:"#app",
        methods:{
            currentTime1:function () {
                return Date.now();
            }
        },
        computed:{
            currentTime2:function () {
                return Date.now();
            }
        }
    });
</script>

插槽（slot）

元素作为承载分发内容的出口可以用于组合组件的场景中

<div id="app">
    <list>
        <list-title slot="list-title" v-bind:title="title"></list-title>
        <list-body slot="list-body" v-for="li in body" v-bind:body="li"></list-body>
    </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    Vue.component("list",{
        template:"<div>\n" +
                    "<slot name='list-title'></slot>\n" +
                        "<ul>\n" +
                            "<slot name='list-body'></slot>\n" +
                        "</ul>\n" +
                "</div>"
    });
    Vue.component("list-title",{
        props:['title'],
        template: "<p>{{title}}</p>"
    });
    Vue.component("list-body",{
        props:['body'],
        template: "<p>{{body}}</p>"
    });

    let vue=new Vue({
        el:"#app",
        data:{
            title:"数字",
            body:["1",'2','3','4']
        }
    });
</script>

自定义事件内容分发（this.$emit）

在这里插入图片描述

<div id="app">
    <list>
        <list-title slot="list-title" v-bind:title="title"></list-title>
        <list-body slot="list-body" v-for="(li,index) in body"
                   v-bind:body="li" v-bind:index="index"
                   v-on:remove="removeItem(index)" :key="index"></list-body>
    </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    Vue.component("list",{
        template:"<div>\n" +
                    "<slot name='list-title'></slot>\n" +
                        "<ul>\n" +
                            "<slot name='list-body'></slot>\n" +
                        "</ul>\n" +
                "</div>"
    });
    Vue.component("list-title",{
        props:['title'],
        template: "<p>{{title}}</p>"
    });
    Vue.component("list-body",{
        props:['body','index'],
        template: "<p>{{index}}.{{body}}<button v-on:click='remove'>delete</button></p>",
        //this.$emit自定义事件分发
        methods: {
            remove:function (index) {
                this.$emit('remove',index)
            }
        }
    });

    let vue=new Vue({
        el:"#app",
        data:{
            title:"数字",
            body:["1",'2','3','4']
        },
        methods:{
            removeItem:function (index) {
                this.body.splice(index,1);
            }
        }
    });
</script>

Vue-cli（脚手架）

Vue-cli官方提供一个脚手架，用于快速生成一个Vue项目模板
预先定义下的目录结构及基础代码

安装NodeJS

参考链接

下载安装官网下载地址
安装淘宝镜像加速：npm install cnpm -g（-g：全局安装）
安装目录：修改安装目录见上面的参考链接
安装Vue-cli：cnpm install vue-cli -g
查看安装了哪些模板：vue list

创建vue-cli应用程序

新建一个文件夹
dos下切换到文件目录
指向命令初始化：vue init webpack myvue
一路不按照依赖（n）
进入myvue安装依赖：npm install
如果报错，根据提示修复
运行：npm run dev
停止 Ctrl+C
安装打包工具：npm install webpack -g 和npm install webpack-cli -g
新建配置文件 webpack.config.js

module.exports={
  entry: "./main.js",
  output: {
    filename: "./js/bundle.js"
  }
};

项目文件夹下运行webpack打包

vue-router（路由）

当前项目目录下安装npm install vue-router --save-dev
导入roter import VueRouter from ‘vue-router’
显示声明使用Vue-roter Vue.use(VueRouter)

编写vue组件
配置路由：

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

import hello1 from "../components/hello1";
import hello2 from "../components/hello2";

//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/helloOne',
      name:'helloOne',
      //跳转组件
      component:hello1
    },
    {
      path: '/helloTwo',
      name: 'helloTwo',
      component: hello2
      //嵌套路由
      children:[
	      {
	      	path:''
	      	name:''
	      	component:''
	      }
      ]
    }
  ]
});

使用路由组件
注册：

import Vue from 'vue'
import App from './App'
import VueRouter from  './router'

Vue.config.productionTip = false
Vue.use(VueRouter)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router:VueRouter,
  components: { App },
  template: '<App/>'
})

路由重定向，和404

      //重定向
      {
      	path:'',
      	redirect:''
      }
       //跳转到错误页面
      {
      	path:'*',
      	component: 错误页面
      }

路由钩子

进入路由之前执行：beforeRouteEnter
进入路由之后执行：beforeRouteLeave


<script>
    export default {
        name: "login",
      //类似于过滤器
      beforeRouteEnter:(to,from,next)=>{
          console.log("进入路由之前");
        /**
         * next():跳转到下一个页面
         * next("/path"):改变路由跳转的方向
         * next(false):返回原来的页面
         * next((vm)=>{}):仅在beforeRouteEnter中有用，vm是组件实例
         */
        next((vm)=>{
          vm.getData(); //进入路由之前执行方法
        });
      },
      beforeRouteLeave:(to,from,next)=>{
          console.log("进入路由之后");
          next();
      },
      methods:{
          getData:function () {
            this.axios({
              methods: ';get',
              url:''
            }).then(response){
              console.log(response)
            };
          }
      }
    }
</script>