zoukankan html css js c++ java

【简单了解VUE的一些特性】

VUE学习 ——05.17

vue.js

回顾前端的一些概念

逻辑，判断，循环

事件，浏览器事件，DOM事件（操作节点，

视图，html，css，（参考bootstrap可视化布局系统，可以自动生成然后查看代码，laiUI只对个人免费）

通信：ajax

VUE，国人开发，渐进式JS框架，只关注视图层（html，css，js）

网络通信：axios

页面跳转：vue-router

vue-UI：ice，elementUI等

注意，正规开发CSS一般不会直接使用，通常采用CSS预处理器生成CSS来使用

例如，SASS，LESS（推荐）

ES系列现在通常为ES5，ES6，

webpack：一种前端的打包方式

JS框架：

jquery，Angular，React，vue，axio

而vue结合了Angular和React的一些特点，其特点包括虚拟Dom，组件特性，支持mvvm，还有模块特性（mvc）。

NPM：类似maven，可以自动下载依赖包

vue-element-admin：使用vue，element等技术

MVVM：异步通信为主（model，view，viewmodel）

第一个vue项目

虽然vue是前端的框架，前端的开发软件多是submit（简洁）

用idea加入插件后就可以开发VUE了

MVVM：

vm沟通view和model，通过vm可以不刷新就更新view。

但是MVVM的思想是让view独立于model，实现低耦合，也就是说数据是vm内的data属性提供的，数据变化（model）变化不会影响标签；同样，view（dom标签）变化也不会影响数据的变化。

因为view（比如<h 2>{{message}}</ h 2>）,message由js里的data的message提供，所以这就是数据绑定，同样的，因为绑定，所以操作message就可以改变view中的dom节点，而不是直接操作dom，这就是虚拟dom

在MVVM中，Vue.js就是ViewModel（mv）的实现者

VUE的一些基本语法

el为元素，data为数据

可以插件导入也可以使用在线的cdn min版

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

v标签：

v-bind :绑定元素

v-if 和v-else ，还有v-else-if

语法格式举例：

<h1 v-if="type==='A'">A</h1>

注意：===表示类型和数据均相等，==只表示数据相等

在这里调用是通过new对象vm，然后vm.xxx实现的

v-for：循环标签 v-for="item in items"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基础语法</title>
</head>
<body>

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

</div>
<div id ="app">
    {{message}}
</div>



<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
    var vm1 = new Vue({
        el:"#app",
        data: {
            message:"xx",
        }
    });

    var vm = new Vue({
       el: "#app1",
        data: {
           message: "hello",
           type:'A',
           items: [
                {message:'感动猫'},
                {message: '挨打猫'},
                {message:'印花布'},
           ]
        }

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

关于VUE事件绑定

在js中的data后可以添加methods块，里面包括function函数；

以最常见的鼠标事件为例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue事件绑定</title>
</head>
<body>

<div id ="app">
    <button v-on:click="hi">on click</button>
</div>



<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
    var vm1 = new Vue({
        el:"#app",
        data: {
            message:"xx",
        },
        methods: {
            hi: function () {
                alert("你好，旅行者");

            }
        }
    });

</script>
</body>
</html>

VUE双向绑定：

双向指的是view-model绑定

比如输入文本数据后让另一个视图也随之变化：

<div>
输入的文本：<input type="text" v-model="message"> {{message}}
</div>
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message:"bilibili"
        },
    });
</script>

同理，可以显示我们选择的单选框属性或者下拉菜单里的某项。

使用v-model后其优先级会高于value和checked（默认值）等。

VUE组件

所谓vue组件，就是自定义的合法标签，是可重复使用的模板

例如：

我们要自定义一个标签miku

在js标签内添加

Vue.component("jo",{
props: ['item'],
template: '<li>{{}}</li>'

});
var vm = new Vue({
el: "#app",
data:{
item:["讲究猫","神社猫","打拳猫"]

}
});

props是用来传递data参数的，我刚刚拼写错误，props没有生效，页面运行后只会显示三个黑点点，即空的item列表

完整版如下;

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
</head>
<body>

<div id ="app">
    <miku v-for="item in items" v-bind:mi="item"></miku>
</div>



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

    Vue.component("miku",{
        props: ['mi'],
        template: '<li>{{mi}}</li>'

    });
    var vm = new Vue({
        el: "#app",
        data:{
            items:["讲究猫","神社猫","打拳猫"]

        }
    });

</script>
</body>
</html>

AXIOS通信

空耳：（阿西奥斯）

注意：axios是基于es6来编写的

使用理由： vue关注视图层，所以vue.js并不包括ajax的通信功能，为了解决这个问题，作者开发了vue-resource（但是这个已经停止维护了），并且也不建议使用jquery.ajax，原因是jquery的思想会导致过多dom操作（太频繁），所以现在推荐使用Axios。

例子：

准备好一个数据源：data.json

{
  "name": "蔡虚鲲",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "罗德岛大街",
    "city": "北京",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}

html页面

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线CDN-->
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我一下又不会死</a>

    

</div>

<script>
    var vm = new Vue({
        el: "#app",
        //data()和data: 不同
        data() {
            return {
                info: {
                    name:null,
                    url:null,   //设置初始值

                },
                
            }
        },
        mounted() {
            //钩子函数 （链式编程） ES6的新特性
            axios.get("data.json").then(response => (this.info=response.data)
            );//get()内如果数据源不在当前路径下，要加上路径或者../xx
        }
    });
</script>
</body>
</html>

目前来看，axios读取json数据并利用vm绑定显示，不需要操作dom节点。

计算属性

computed

computed是VUE的一个属性，和data，methods这些是同级别。

形式上和method的格式类似，但是在标签（也可以说是dom节点）中调用的时候不需要加括号，例如< p> {{currentTime}}</ p>,（这里因为格式我故意打了空格）

计算属性的作用就是将不经常变化的计算结果进行缓存，节省浏览器的资源开销。

也就是说，computed修饰的属性时不会主动刷新，除非message数据更新，才会发生变化。

slot（插槽）重要

为什么要用插槽：

当我在view上想把数据显示出来，一般是放在开始标签与结束标签之间，对吧，比如：

<h 1>我是h1</h 1>，当然我们也可以把文字显示在文本框和按钮等组件上，但这不太符合我们的设计规范，所以我们可以借助VUE的slot实现这个规范。

demo1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽初长成</title>
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>


<div id="app1">     <!--不使用插槽的测试 -->
    <ul>
        <li>说话不讲究的猫</li>
        <li>印花布</li>
        <li>很嗲的黑猫</li>
    </ul>
</div>

<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {         //此处定义了两个插槽，用来插入<ul>
        template: '<div>
                <slot name="todo-title"></slot>
                <ul>
                <slot name="todo-items"></slot>
                </ul>
                <div>'              //用了斜杠 / 可以起到换行效果，而不用'<div>'+ '<h1>'这样打上单引号和加号
    });
    Vue.component("todo-title", {
        //属性
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "感动猫系列",
            //列表
            todoItems: ['说话不讲究的猫', '印花布', '防波堤猫', '很嗲的黑猫']
        }
    });
    var vm2 = new Vue({//不使用插槽的测试
       el:"#app2"
    });


</script>
</body>
</html>

另外v-bind:xxx="...."可以缩写为:xxx="...."

v-on是事件绑定，v-on:click可以简写为@click

感觉缩写辨识度不高，不容易排错，不建议使用/doge

自定义事件内容分发

组件里如何调用VUE 中的方法呢，组件的方法如何操作VUE中的data数据？

需要用到自定义事件，使用this.$emit('自定义事件名',参数)

另外emit的自定义事件名最好用a-b命名方式，而非驼峰式；v-on也不要出现大写符号；

view视图内某视图组件通过v-on将按钮和组件内的remove方法绑定，然后通过emit设置自定义事件名为remove-test，通过这个事件名调用 VUE实例内的removeItem方法，此方法内将实现删除操作。

demo1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app"><!--View -->
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items"
                    v-for="(item,i) in todoItems"
                    v-bind:item="item" v-bind:index="i"
                    v-on:remove-test="removeItem(i)">
        </todo-items>
    </todo>
</div>
<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {
        template: '<div>
                <slot name="todo-title"></slot>
                <ul>
                <slot name="todo-items"></slot>
                </ul>
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        template: '<li>{{index}}-{{item}}<button style="margin: 5px" @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit('事件',参数) 自定义事件分发（远程调用方法）
                this.$emit('remove-test', index)
            }
        },
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "感动猫系列",
            //列表
            todoItems: ['说话不讲究的猫', '印花布', '防波堤猫', '很嗲的黑猫']
        },
        methods: {
            removeItem: function (index) {
                // 一次删除一个元素
                this.todoItems.splice(index, 1)  //splice是用于 删除/替换/添加 数组内某个元素的，1表示删除当前下标的
                console.log("删除了" + this.todoItems[index] + "OK")
            }
        },
    });
</script>
</body>
</html>

实际vue开发不会这样一个个操作标签，会利用vue-cli脚手架进行操作。

VUE-cli 学习（重要）

需要安装node.js

win64位地址如下：

https://cdn.npm.taobao.org/dist/node/v16.3.0/node-v16.3.0-x64.msi

基本一路next即可，node会自行配置环境变量

安装后可以利用node -v和npm -v查看版本号，确认是否安装成功。

npm是node.js下的包管理器

下一步呢，为了提高npm的下载速度，我们需要安装淘宝镜像加速器(cnpm)

npm install cnpm -g# -g为全局安装，这样全局都可以使用

或者

npm install --registry=https://registry.npm.taobao.org

安装完毕后，开始安装vue-cli

使用命令：cnpm install vue-cli -g

查看是否安装成功：vue list

值得一提的是webpack模板，这是为了给ES5浏览器应用上ES6代码规范的一种兼容手段，（降版本），本质上是一种打包模拟器

确定一个路径作为项目路径，比如e:vue-demo

进入文件夹下，指令新建基于webpack模板的VUE项目：

vue init webpack myvue　　　　　　#myvue是你的项目名

如图：

进入项目目录：　（在某指定目录下在地址栏中输入cmd也可以进入所在位置，不需要cd指令层层递进）

cd myvue

安装此vue项目所需要的依赖环境

npm install

可以用idea直接打开此项目；

直接运行项目：npm run dev

停止项目：ctrl+c

关于webpack

就目前而言，webpack 是一种模块加载器兼打包工具，把ES6规范的代码资源打包编译成ES5规范的资源（当前浏览器大多不支持ES6，所以需要ES5）

安装 webpack

npm install webpack -g

npm install webpack-cli -g

以一个空项目为例，我们在自建路径modules下新建hello.js

//modules是我自定义的模块路径， 用来梳理exports和require等流程，我以hello.js为暴露接口，main.js作为js主入口

exports.sayHi = function () {
  document.write("<h1>hello world</h1>")
}
exports.sayHi2 = function () {
  document.write("<h1>hello world</h1>")
}

//exports暴露一个方法：saiHi，然后在入口main.js中接收对象并命名为hello，通过对象 hello调用satHi方法：hello.sayHi
//值得一提的是，在一个js中可以暴露很多方法，但是main.js中接收的对象只有一个即可调用，感觉类似后端思想，一个类对象可以调用其中的很多方法。

然后再新建一个main.js作为主入口

let hello=require("./hello");
hello.sayHi()

下一步，在主目录下新建一个webpack.config.js作为打包配置

//需要通过module将js文件打包导出运行
module.exports = {
  entry: './modules/main.js',     //入口，请求暴露的js
  output: {
    filename: "./js/bundle.js"
  }
};

然后在idea控制台输入webpack即可打包，打包生成位置如代码所示，在js路径下；

最后主目录新建一个test.html作为配置载体，用来输出显示

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/bundle.js"></script>
</head>
<body>
</body>
</html>

html页面运行如图所示：

总的来说，webpack的思想就是：前端专攻JS模块即可，js文件写好然后打包，在配置html中引入打出的包

关于vue-router

它是vue官方的路由组件，可以搞定vue框架内单页面应用的跳转问题；

至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。

参考链接：https://www.jianshu.com/p/4c5c99abb864

在当前项目目录下输入命令来安装vue-router插件：（比如我偷懒，利用上面的demo例子 E:vue-demomyvue 下）

npm install vue-router --save-dev

层次图如下：

VUE结构下的项目组件化特征很明显，view网页可以被分为好几个部分，就像一个个拼好的大零件组成一个完整的擎天柱，而不是一个个小零件同时拼凑，组件化后的view层次会更分明。

运行后如图：

elementUI与Vue应用demo

第一步：进入相关demo路径，创建新工程：

vue init webpack myvue02

如图：

选no是为了加强印象，省事可选Yes；

第二步：进入工程目录并安装各个需要的组件：
# cd myvue02
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

运行时发现报错：

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
node:internal/modules/cjs/loader:944
throw err;
^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- E:vue-demomyvue02 ode_moduleswebpack-dev-serverinwebpack-dev-server.js

如图：

看报错信息，好像是webpack4后分出来一个包，叫webpack-cli，

npm install webpack-cli -g　　　　　　#安装webpack-cli

安装后发现版本号是4.7.2，记录一下，

然后继续npm run dev ，还是一样的错，上网搜了搜，差不多确定是版本兼容问题........

审视一下，现在我的各个包版本：

node:16.3.0

"vue": "^2.5.2"

"webpack": "^5.38.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-dev-server": "^3.5.1",

然后我卸掉原来的webpack-dev-server按了如下版本

npm install webpack-dev-server@3.11.2 -g

但是并不能运行，最后我干脆新建了个项目，按流程执行，居然就行了= 。=

不说了，日常恍惚操作，上面的流程如下：先vue init webpack myvue03 新建项目myvue03

新建项目：

然后安装elementui，npm i element-ui -S

以及npm install;

安装sass加载器　　npm install sass-loader node-sass --save-dev

运行 rnpm run dev

（所以说前端技术版本更新太快，恍恍惚惚的坑也就变多了）

初始化测试完毕，可以关掉命令行窗口了，打开idea

然后需要新建一些路径，懒得打字了，需要编辑的代码位置如图所示：

index.js

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main
    },
    //首页
    {
      path: '/login',
      component: Login
    },
  ]


})

main.js

import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router";
//扫描路由配置
import router from "./router"
//导入elementUI
import ElementUI from "element-ui"
//导入element css
import 'element-ui/lib/theme-chalk/index.css'
//使用
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI规定这样使用
})

App.vue

<template>
  <div id="app">
    <!--展示视图-->
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'App',
  }
</script>

<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;
     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>

main.vue

<template>
  <el-select v-model="value" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "main",
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

其余默认即可。

一些指令：也许有人会用上

npm uninstall webpack-dev-server -g 卸载全局

npm uninstall webpack-dev-server -D 卸载局部(本地)

安装指定版本（全局或局部安装）： webpack-dev-server@x.x.x -g

https://blog.csdn.net/sd19871122/article/details/108743334

如何更改npm版本：

npm -v 查看版本号

npm install -g npm@xx.xx.xx（据说直接安装就可以，但是我jo的还是先卸载旧的比较好....sudo npm uninstall npm -g，如果提示sudo不存在那就去掉sudo）

nmp历代版本查看，链接如下：

https://www.npmjs.com/package/npm?activeTab=versions

下一章，路由嵌套

路由嵌套

路由嵌套相当于有多个子路由相互嵌套，页面中有一些视图位置是固定的，但也有一些内容位置，要根据我们的选择来显示，所以我们可以通过路由嵌套然后点击不同选项出现不同显示。比如侧边栏通过路由嵌套并跳转，可以在中央view部分作出不同的显示。

通过router-link在视图中渲染对应的模板，路由嵌套本质还是路由router，通过路径渲染对应组件

views下新建路径user：

然后需要两个测试用vue：

Profiles.vue

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>

List.vue

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>