ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Vue 学习笔记（2021.11.9~11.10）

2021-11-10 21:02:03  阅读：191  来源： 互联网

标签：Vue 2021.11 component 11.10 vue new import massage


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>

原理：

image

组件绑定自定义事件：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

  • 后面的内容基本都是否：

    image

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

把目录结构弄成这样

image

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,2021.11,component,11.10,vue,new,import,massage
来源： https://www.cnblogs.com/xiaowei9s/p/15535623.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有