Vue 学习笔记（2021.11.9~11.10）

2024-01-30 16:09:34

Vue

只关注视图层：HTML+CSS+JS

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ice.work

前端UI框架

bootstrap

Ant-Design

ElementUI、iview、ice

AmazeUI

管理工具

npm：类似maven

一、Hello Vue

使用IDEA开发

新建HTML，加入cdn

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

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="hello">
    {{massage}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#hello",
        data : {
            massage:"hello vue!"
        }
    });
</script>
</body>
</html>

运行后在控制台可以使用：vm.massage="任何值"，测试，发现会实时变化，这就是双向绑定

二、基本语法

1. 判断语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="hello">
    <h1 v-if="massage==='A'">A</h1>
    <h1 v-else-if="massage==='B'">B</h1>
    <h1 v-else-if="massage==='C'">C</h1>
    <h1 v-else>Nothing</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#hello",
        data : {
            massage:"hello vue!"
        }
    });
</script>
</body>
</html>

2. 循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="hello">
  <ul>
    <li v-for="item in items">
      {{item.massage}}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el : "#hello",
    data : {
      items: [
        {massage:"item1"},
        {massage:"item2"},
        {massage:"item3"}
      ]
    }
  });
</script>
</body>
</html>

3. 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="hello">
  <ul>
    <li v-for="item in items">
      {{item.massage}}
    </li>
  </ul>
  <button v-on:click="sayHi">click Me</button>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el : "#hello",
    data : {
      items: [
        {massage:"item1"},
        {massage:"item2"},
        {massage:"item3"}
      ]
    },
    methods:{
      sayHi:function () {
        alert("hello vue！")
      }
    }
  });
</script>
</body>
</html>

三、双向绑定MVVM、组件

1. 什么是双向绑定？

视图变化<------>数据变化，两者互相同步影响

2. 实现双向绑定

使用v-model属性将DOM的value属性绑定到data中的对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bindmodel</title>
</head>
<body>
<div id="hello">
  请输入数据<input v-model="massage" placeholder="数据源在这" type="text">  {{massage}}
  <p>请输入性别{{gender}}</p>
  <p><input type="radio" name="sex" value="男" v-model="gender">男</p>
  <p><input type="radio" name="sex" value="女" v-model="gender">女</p>


  你的爱好
  <select v-model="hobby">
    <option value="" disabled>--请选择--</option>
    <option>钱</option>
    <option>游戏</option>
    <option>代码</option>
  </select>
  {{hobby}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el : "#hello",
    data : {
      massage:"",
      gender:'',
      hobby:''
    }
  });
</script>
</body>
</html>

3. 组件

说白了就是一个模板，可以让你自定义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <!--将其他对象的值绑定到属性中-->
    <xiaowei v-for="item in items" v-bind:hobby="item"></xiaowei>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //标签一定要在一个new了的Vue对象绑定的元素中才生效
    Vue.component("xiaowei",{
        //组件中可以自定义多个属性props
        props: ['hobby'],//现在xiaowei这个标签有了hobby这个属性
        template: '<li>{{hobby}}</li>',//模板中只能用声明了的属性
    });
    var vm = new Vue({
        el:"#test",
        data:{
            items: ['java','前端','linux']
        }
    });
</script>
</body>
</html>

四、网络通信

jQuery.ajax({})【不推荐】

axios【推荐】

1. 什么是Axios？

实现了Ajax的异步通信

从浏览器创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF

2. 用钩子函数插入ajax异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="test">
  <h1>{{info.name}}</h1>
  <h1>{{info.page}}</h1>
  <h1>{{info.address.city}}</h1>
  <a v-bind:href="info.url"></a>
  <a v-for="item in info.links" v-bind:href="item.url">{{item.name}}</a>
</div>


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

<script>


  var vm = new Vue({
    el: "#test",

    data(){
      return{
        info:{
          name:'xiaowei',
          url:null,
          page:null,
          address: {
            stress:null,
            city:null,
          },
          links:[
            {
              name:null,
              url:null
            },
            {
              name:null,
              url:null
            },
            {
              name:null,
              url:null
            }
          ]
        }
      }
    },
    mounted(){
      axios.get('../data.json').then(response=>(this.info=response.data))
    }
  });
</script>

</body>
</html>

学到这里我们应该知道，在Vue对象/模板中的所有属性绑定到HTML页面中有几种情况：

在直接作为文本取出时直接两个大括号即可，{{massage}}

但是需要绑定到标签的属性中的时候需要使用v-bind:properties。

在模板中只能使用自定义的属性，需要外部使用v-bind绑定

五、计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="hello">
  {{massage}}
  <p>{{nowTime()}}</p>
  <p>{{nowTimeC}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el : "#hello",
    data : {
      massage:"hello vue!"
    },
    methods: {
      nowTime: function () {
          return Date.now();
      }
    },
    computed: {
        nowTimeC: function () {
            this.massage;
            return Date.now();
        }
    }
  });
</script>
</body>
</html>

计算属性可以很方便的保存计算结果到缓存中。里面的值不刷新，则计算属性不发生变化

六、插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="hello">
    <main-my>
        <main-title slot="main-title" :title="ltitle"></main-title>
        <main-list slot="main-list" v-for="lesson in llist" :item="lesson" ></main-list>

    </main-my>


</div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("main-my",{
        template:'\
            <div>\
                <slot name="main-title"></slot>\
                <ul>\
                    <slot name="main-list"></slot>\
                </ul>\
            </div>\
            \
            '
    })
    Vue.component("main-title",{
        props:['title'],
        template: '\
        <h1>{{title}}</h1>\
        \
        '
    })
    Vue.component("main-list",{
        props:['item'],
        template: '\
        <li>{{item}}</li>\
        \
        '
    })
    var vm = new Vue({
        el : "#hello",
        data : {
            massage:"hello vue!",
            ltitle:"小韦学习",
            llist:['java','vue','linux']
        }

    });
</script>
</body>
</html>

七、自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="hello">
    <main-my>
        <main-title slot="main-title" :title="ltitle"></main-title>
        <main-list slot="main-list" v-for="(lesson,index) in llist" :item="lesson"
                    v-on:remove="removeItem(index)"
                    :index="index"></main-list>

    </main-my>


</div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("main-my",{
        template:'\
            <div>\
                <slot name="main-title"></slot>\
                <ul>\
                    <slot name="main-list"></slot>\
                </ul>\
            </div>\
            \
            '
    })
    Vue.component("main-title",{
        props:['title'],
        template: '\
        <h1>{{title}}</h1>\
        \
        '
    })
    Vue.component("main-list",{
        props:['item','index'],
        template: '\
        <li>{{item}} <button @click="remove">删除</button></li>\
        \
        ',
        methods: {
            remove:function (index) {
                //调用自定义事件
                console.log('删除了事件')
                this.$emit('remove',index);
            }
        }
    })
    var vm = new Vue({
        el : "#hello",
        data : {
            massage:"hello vue!",
            ltitle:"小韦学习",
            llist:['java','vue','linux']
        },
        methods:{
            removeItem:function (index) {
                console.log('删除了'+this.llist[index].toString())
                this.llist.splice(index, 1);
            }
        }

    });
</script>
</body>
</html>

原理：

组件绑定自定义事件：this.$emit

自定义事件绑定vue对象事件：v-on:removfunc:vue对象方法

八、第一个Vue-cli项目

通过 @vue/cli 实现的交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (
@vue/cli-service
)，该依赖：

可升级；

基于 webpack 构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

1. 安装Node.js

下载地址：https://nodejs.org/en/download/
无脑下一步
安装完成后打开命令行
- node -v 查看版本证明是否安装
- npm -v查看npm是否安装
配置淘宝镜像：
- 命令行输入
- ```
npm install cnpm -g
```
安装vue-cli
- 命令行输入
- ```
cnpm install vue-cli -g
```

2. 创建vue项目

命令行输入
```
vue init webpack myvue
```
后面的内容基本都是否：

3. 初始化并且运行

cd myvue
npm install
npm run dev

用idea打开myvue文件夹

在localhost:8080打开你的前端项目！

九、webpack安装使用

安装：

npm install webpack -g
npm install webpack -cli -g

测试安装成功

webpack -v
webpack -cli -v

模块化开发↓

暴露对象

//暴露变量
exports.sayHi = function(){
    document.write("<h1>你好</h1>")
}

接收对象

//拿到接口
var hi = require("./hello");
hi.sayHi();

打包↓

webpack.config.js

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: '.js/bundle.js'
    }
}

命令行:

webpack

使用

<script src="./dist/.js/bundle.js"></script>

十、vue-router路由

用来页面跳转

1. 安装

cnpm install vue-router --save-dev

2. 配置路由

新建一个router文件夹，里面放入index.js文件，作为路由的配置文件如下

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Content from '../components/Content'
import Main from '../components/Main'
import Wei from "../components/Wei"

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      // 路由路径
      path: '/content',
      name: 'content',
      // 跳转组件
      component: Content
    },
    {
      // 路由路径
      path: '/main',
      name: 'main',
      // 跳转组件
      component: Main
    },
    {
      // 路由路径
      path: '/xiaowei',
      name: 'xiaowei',
      // 跳转组件
      component: Wei
    }
  ]
})

3. 路由使用

在总入口的JavaScript文件中安装路由

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

Vue.config.productionTip = false

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

在组件中使用路由标签

router-link：链接

router-view：展示

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/xiaowei">人名</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</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>

十一、vue+ElementUI实战

node.js 版本12.*，不然sass用不了

1. 新建项目

新建文件夹
init vue项目
```
vue init webpack
```
安装路由
```
cnpm install vue-router --save-dev
```
安装element-ui
```
cnpm i element-ui -S
```
安装依赖
```
cnpm install
```

安装SASS加载器

cnpm install sass-loader node-sass --save-dev

启动测试
```
cnpm run dev
```

2. 打开项目

用idea

把目录结构弄成这样

3. 创建基本工程

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

十二、嵌套路由

router配置

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import List from "../views/user/List";
import Info from "../views/user/Info";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      children:[
        {path:'/user/list',component:List},
        {path:'/user/info',component:Info}
      ]
    },
    {
      path: '/login',
      component: Login

    }
  ]
});

嵌套的界面：

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/user/info">信息</router-link>
    <router-link to="/user/list">列表</router-link>
    <router-view></router-view>
  </div>


</template>

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

<style scoped>

</style>

十三、参数传递及重定向

参数传递

路由配置

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import List from "../views/user/List";
import Info from "../views/user/Info";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      children:[
        {path:'/user/list',component:List},
        {path:'/user/info/:id',name:'Par',component:Info,props:true}
      ]
    },
    {
      path: '/login',
      component: Login

    }
  ]
});

前端接收参数

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/user/list">列表</router-link>
    <router-link :to="{name:'Par',params:{id:1}}" >信息</router-link>
    <router-view></router-view>
  </div>


</template>

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

<style scoped>

</style>

组件通过配置自定义属性接收

<template>
  <div><h1>用户信息</h1>{{id}}</div>

</template>

<script>
export default {
  name: "Info",
  props:['id']
}
</script>

<style scoped>

</style>

重定向

{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

码农公寓

Vue