Vue 知识体系

小趴菜不能喝

已于 2022-09-26 13:46:13 修改

阅读量425

点赞数

分类专栏：前端星球文章标签： vue.js javascript 前端

于 2022-09-26 13:42:40 首次发布

本文链接：https://blog.csdn.net/m0_65775063/article/details/127051823

版权

前端星球专栏收录该内容

10 篇文章 2 订阅

订阅专栏

第一个Vue程序（入门）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发版本，未压缩 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- vue简介 响应式，简化了Dom操作 -->
    <!-- 第一个vue程序 -->

    <div id="app">
      {{message}}//
    </div>
    <script>
      var app = new Vue(
        {
          el: "#app", //告诉去管理id为app的元素（挂载点）.app 标签选择器el:"div"
            //建议使用id选择器，作用就是设置Vue元素挂载
          data: {
            message: "hello Vue!",
          },
        } //data里的数据是要使用的真实数据对象
      );
    </script>
  </body>
</html>

data的数据是要使用的真实数据对象（可以是复杂类型对象数组等），所有要使用到的数据全部都放在这里

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发版本，未压缩 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- vue简介 响应式，简化了Dom操作 -->
    <!-- 第一个vue程序 -->

    <div id="app">
      {{message}}
       <h2>{{school.name}} {{school.mobile}}</h2> <!-- 获取对象 -->
       <ul>
           <li>{{array[0]}}</li>
           <li>{{array[1]}}</li>
           <li>{{array[2]}}</li>
       </ul>
    </div>
    <script>
      var app = new Vue(
        {
          el: "#app", //告诉去管理id为app的元素
          data: {
            message: "Hello world",
            school:{
                name:"shilei",
                mobile: "123456"
            },//对象，
            array:["上海","成都","武汉"]//数组
          },
        } //data里的数据是要使用的真实数据
      );
    </script>
  </body>
</html>

基本语法格式

开发一个网站，不同于获取元素，操作他们，在vue之中，我们使用一系列以V开头的语法进行操作和使用（v打头的是写在标签里边的）

v-test（文本值）

 <div id="app">
     <!-- v-test 设置标签的文本值 -->
        <h2 v-text="message+'!'">背景</h2>//字符串拼接 这里的背景不会显示
        <h2>你好世界{{message}}+"!"背景</h2>这里的背景会被显示
     
    </div>
    <script>
      var app = new Vue(
        {
          el: "#app", //告诉去管理id为app的元素
          data: {
            message: "Hello world",
        } //data里的数据是要使用的真实数据
      );
    </script>

v-html

<div id="app">
     <!-- v-html 设置innerHTML -->
       <p v-html="content"></p>
       <p v-text="content"></p>
     <!-- 如果只是普通文本，显示没有任何的差异-->
      <p v-html="message"></p>
      <!-- 包含html的语句结构一样的话，就会显示超链接形式 -->
      <p v-text="message"></p>
    </div>
    <script>
      var app = new Vue(
        {
          el: "#app", 
          data: {
          message: "<a href='http://baidu.com'>1111</a>",
          content: "小强"
         
        } 
          } );
    </script>

v-on(为元素绑定事件)

常用事件（onclick (点击事件) ,monsesenter(鼠标移入事件) dblclick(双击事件) onsubmit(表单提交时间)）可以简写@click=“”

<div id="app">
    <input type="button" value="v-on按钮" v-on:click="doIt">
    <input type="button" Value="v-on简写" @click="doIt">
     <!-- 推荐使用简写模式，省略掉v-on -->
  </div>
  </div>
   
    <script>
      var app= new Vue({
        el:"#app",
        methods:{
          doIt :function(){
            alert("hello");
          }
        },
      })
      <!--使用Vue里边的data可以 methods定义函数可以，用别的命名规范跑不起来-->
    </script>
#操纵data里的数据直接用this点，不需要操作dom元素（使用的数据都在data里，this.不用dom）
<div id="app">
    <h2 @click="changeFood">{{food}}</h2>
</div>
   <!--  -->
    <script>
      var app= new Vue({
        el:"#app",
        data:{
          food:"xilanhua"
        },
        methods:{
          doIt :function(){
            alert("hello");
          },
          changeFood:function(){
            // console.log(this.food)
            this.food+="haochi"//拿到值用this点出来，不操作Dom元素
          }
        },
      })
    </script>

计数器实例

<body>

  <div id="app">
    <button @click="sub">-</button>
    <span >{{num}}</span>
    <button @click="add">+</button>
  </div>
   <!--  -->
    <script>
      var app= new Vue({
        el:"#app",
        data:{
         num:1
        },
        methods:{
          add :function(){
            if(this.num<10){
           this.num++;
           }else{
             alert("到头了，别加了");
           }
          },
          sub:function(){
            if(this.num>0){
            this.num--;
            }else{
              alert("最小了")
            }
          }
        },
      })
    </script>
  </body>

事件绑定的方法可以写成函数调用的形式，自定义参数，事件后面跟上.修饰符可以对事件进行限制，比如.enter可以限制触发的按键为回车

body>
    <div id="app">
      <input type="button" value="点击" @click="doit(666)">
      <input type="text"@keyup.enter="sayhi">

    </div>

    <script>
     var app=new Vue({
       el:"#app",
       data:{
         doit:function(p1){
           console.log("doit")
           console.log(p1)
         },
         sayhi:function(){
           alert("你好呀")
         }
       }
     });
    </script>
  </body>

v-show(根据表达式的真假，切换元素的显示和隐藏）

本质就是操作的display（display:none）

<body>

  <div id="app">
    <img v-show="isShow" src="https://img.alicdn.com/tfs/TB1lmcZy1L2gK0jSZFmXXc7iXXa-190-400.png" alt="">
    <img v-show="age>=18" src="" alt="">
    <!-- 可以是表达式 -->
    <button @click="changeShow">点击我改变状态</button>
    <button @click="addAge" >点我看图</button>
  </div>
   
    <script>
      var app= new Vue({
        el:"#app",
        data:{
         isShow:false,
         age:17
        },
        methods:{
          changeShow:function(){
            
            this.isShow=!this.isShow;
            //记得使用this
            },
            addAge:function(){
              this.age++;
            }
        }
      })
    </script>
  </body>

v-if(根据表达式的真假，切换元素的显示和隐藏（操作dom元素）)

 <body>

  <div id="app">
   <input type="button" value="切换显示" @click="toggleIsShow">
   <p v-if="isShow">邵晨阳</p>
   <p v-show="isShow">邵晨阳他爸</p>
   <!-- v-show操作显示的是display=none v-if移除显示 dom元素（影响效率）-->
  </div>
   <!--  -->
    <script>
      var app= new Vue({
        el:"#app",
        data:{
         isShow:false
        },
        methods:{
          toggleIsShow: function(){
            this.isShow=! this.isShow;
          }
        }
      })
    </script>
  </body>

v-bind(动态绑定属性的值)

<style>
    .active{
      border: 10px solid green;
    }
  </style>
  <body>

  <div id="app">
    <img v-bind:src="imgsrc" alt="">
    <!-- 简写版本 效果是一样的-->
    <br>
    <img :src="imgsrc" alt="" :title="imgtitle"
     :class="isActive?'active':''" @click="toggleActive">
     <!-- 设置类名的方式是常用的写法，但是这种写法过于繁琐 
      ：class：{active：isActive} 表示这个类名是否生效取决于isActive的值；
    -->
  </div>
   <!--  -->
    <script>
      var app= new Vue({
        el:"#app",
        data:{
          imgsrc:"https://img.alicdn.com/imgextra/i4/654230132/O1CN011CqUjkq0B61CxSU_!!654230132.jpg",
          imgtitle: "美女",
          isActive: false
        
        },
        methods:{
          toggleActive:function(){
            this.isActive=!this.isActive;
          }
        }

      });
    </script>
  </body>

v-for(根据数据生成列表)

数组经常和v-for结合使用，可以使用Vue其他的标签

（item，index ）in 数组

<body>

  <div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
      <li v-for="(item,index) in arr">
        {{index+1}}王者荣耀：{{item}}
      </li>
    </ul>
    <h2 v-for="item in abb" v-bind:title="item.name">
      {{item.name}}
    </h2>
  </div>
   <!--  -->
    <script>
      var app= new Vue({
        el:"#app",
        data:{
          arr:["北京","刘强东","邵磊"], 
          abb:[
          {name:"打王者"},
          {name:"吃鸡"}
          ]
        },
        methods:{
            add: function(){
              this.abb.push({name:"干啥呢"})
            },
            remove: function(){
                this.abb.shift();
                // 移除数组最左边的元素
            }
        }

      });
    </script>
  </body>

v-model(可以和表单的数据进行关联，这个指令可以获取和设置表单元素的值)

（双向数据绑定表单的值和data里的值进行双向绑定，更改其中一个，另一个也会随之更改）

 <body>
    <div id="app">
      <input type="button"value="修改message的值" @click="setM">
      <input type="text" v-model="message" @keyup.enter="getM" >
      <!-- 当更改文本框的值的时候，绑定的message也会跟着响应式的改变 -->
      <h2>{{message}}</h2>
    </div>

    <script>
     var app=new Vue({
       el:"#app",
       data:{
         message:"小强",
         
         },
         methods:{
          getM: function(){
          alert(this.message);
         },
         setM:function(){
           this.message="吃了没";
         }
         }
        //  函数超过2个定义到methods里，如果定义在data里 ，会出现不可名状的错误
         
     });
    </script>
  </body>

Vue组件

组件是Vue可复用的实例，就是一种模板

<body>
   <div id="app">
    <demo></demo>
   </div>
   <script>
    //  定义组件名为demo
    Vue.component("demo",{
      template: '<li>ddsf</li>'
    });
    // Vue实例
     var vue=new Vue({
        el:"#app"

     });
   </script>
  </body>

组件与实例传值交互

<body>
   <div id="app">
     <!-- 组件与实例之间的交互中间商 -->
    <demo v-for="item in items" v-bind:item="item"></demo>
   </div>
   <script>
    //  定义组件名为demo
    Vue.component("demo",{
      // 接收参数
      props:['item'],
      // 模板
      template: '<li>{{item}}</li>'
    });
    // Vue实例
     var vue=new Vue({
        el:"#app",
        data:{
          items:["java","linux","redis"]
        }
     });
   </script>
  </body>

axios（类似于ajax）

<script>
    // Vue实例
     var vue=new Vue({
        el:"#app",
        // 此data是函数
        data(){
          return{
            // 请求的返回参数必须和json字符串一样
           info:{
              name:null,
            }
          }
        },
       mounted(){
        //  钩子函数
        axios.get('data.json').then(respomse=>(console.log(response.data)));
       }
     });
   </script>

计算属性（缓存）

 <body>
   <div id="app">
    <p>{{cruuentime()}}</p>
    <p>{{cruuentime1}}</p>
   </div>
   <script>

    // Vue实例
     var vue=new Vue({
        el:"#app",
        data:{
          mes:"hello shilei"
        },
        methods:{
          cruuentime:function(){
            return Date.now();//返回当前时间戳
          },
          computed:{
            // 计算属性，methods:computed/方法名不能重名，
            cruuentime1:function(){
              return Date.now();
            }
          }
          
        }
     });
   </script>
  </body>

slot（插槽,官网案例）

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

甚至其它的组件：

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

如果 <navigation-link> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

Vue生命周期

Vue-cli程序

1.下载node.js //无脑安装即可    cmd 下node -v 查看版本 npm -v 查看版本
2.安装node.js淘宝镜像加速器（cnpm） -g就是全局安装
npm install cmpm -g
3.安装vue-cli
cnpm install vue-cli -g
查看可以创建哪些vue-cli
vue list

================================
4.创建程序
进入目录下 
vue init webpack myvue
会给我一些项目描述，提示，直接构建
如果有警告,按照指示修复就可以啦
--------
进入myvue安装依赖 
npm install
5.打包运行
可以通过idea Vscode 打开查看目录结构，
进入项目myvue 打包运行
npm run dev
停止 ctrl+c

Webpack

本质上，webpack是一个现代的javascript应用程序的静态模块打包器（moudle bundler）,当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或者多个bundle。

服务器端的node.js遵循CommonJS规范，该规范的核心思想就是允许模块通过require方法来同步加载所需的依赖的其他模块，它通过exports或者 module exports来导出需要暴露的接口

安装webpack模块化打包工具

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

测试安装成功

webpack -v
webpack-cli -v

webpack.config.js配置文件

entry：入口文件，指定webpack从哪个文件作为项目的入口
output：输出 指定webpack把处理完成的文件放置到指定路径
module：模块 用于处理各种类型的文件
plugins:插件，如热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

使用步骤

创建hello.js

//暴露方法
exports.sayHi=function(){
    document.write('<div>哥哥在学习</div>')
}
exports.sayHi1=function(){
    document.write('<div>哥哥在学习</div>')
}
exports.sayHi2=function(){
    document.write('<div>哥哥在学习</div>')
}

创建主入口main.js

let hello=require("./hello")//导入 就像类一样
hello.sayHi();
hello.sayHi1();
hello.sayHi2();
创建核心配置文件webpack-config.js

module.exports={
    entry: './modules/main.js',
    output:{
        filename:"./js/bundle.js" //打包生成的js文件
    }
};

创建主界面

//所以说在主界面直接引入打包之后的js就可以啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/bundle.js"></script>
</body>
</html>

Vue Router

Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的css class的链接
HTML5历史模式或者hash模式，在IE9中自动降级
自定义的滚动条行为

在项目之中控制台安装

npm install vue-router --save-dev

使用

//导入vuerouter
import VueRouter from 'vue-router'
//显式声明使用vuerouter
Vue.use(VueRouter);

//配置导出路由
exports default new Router({
    routes:[
   { //路由路径
    path:'/content',
    name:'content'
    //跳转的组件
    componet:content
   }
    ....//如果有其他路由，可以配置多个路径
  ]
})

//配置好上述配置文件，这里使用
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</router-link> to就相当于href
<router-view></router-view>

Vue+EmentUI

vue init webpack hello-vue
//进入工程目录
cd hello-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

在主界面main.js引用element-ui

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

import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(Element);
new Vue({
  el: '#app',
  router,
  render: h=>h(App)  //ElementUI
})