浅识Vue

xixihaha_coder

已于 2022-02-27 17:57:42 修改

阅读量158

点赞数 1

分类专栏： Vue 文章标签： vue

于 2021-10-23 22:10:00 首次发布

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/120927171

版权

Vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

Vue

本笔记由 b站狂神说java 视频获取

Angular: Google 收购的前端框架，由一群Java程序员开发，其特点是将后台的 MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)

React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念**【虚拟DOM】**用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习—门【SX】语言;

Vue :一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点;

第一个vue程序

MVVM的实现者

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

<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<!--  导入vue  -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        //Model ：数据
        data:{
            message: "hello,vue!"
        }
    });

</script>

</body>
</html>

可以直接F12直接修改 vm.message=“修改后的数据” 直接呈现在页面上

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

Vue基本语法

V-Bind

<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>
<!--  导入vue  -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        //Model ：数据
        data:{
            message: "hello,vue!"
        }
    });

</script>
</body>

v-if

<body>
<div id="app">
 <h1 v-if="flag">Yes</h1>
    <h1 v-else>No</h1>
</div>
<!--  导入vue  -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            flag :true
        }
    });

</script>

</body>

v-for

<body>
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<!--  导入vue  -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            items :[
                {message : "狂神说java"},
                {message : "狂神说前端"}

            ]
        }
    });

</script>

</body>

vue绑定事件

v-on

<body>
<div id="app">
  <button v-on:click="sayHi">click</button>
</div>
<!--  导入vue  -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            message : "狂神说java"
        },
        methods : { //方法必须定义在vue的Method对象中，v-on事件
            sayHi :function () {
                alert(this.message);
            }
        }
    });

</script>

</body>

vue双向绑定

v-model

<body>
<div id="app">
<!--输入的文本： <input type="text" v-model="message">  {{message}}-->
<!--    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> {{message}}-->

    <!--   <input type="radio" name="sex" value="男" v-model="checked"> 男
       <input type="radio" name="sex" value="女" v-model="checked"> 女
       <p>
       选中了谁 : {{checked}}
      </p>   -->

下拉框 ：
    <select v-model="selected">
        <option disabled  value="">--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
<span>选中的是 ： {{selected}}</span>
   </div>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            // message : "123"
            // checked:''
            selected : ''
        }

    });

</script>

</body>

Vue组件讲解

component

<body>
<div id="app">
    <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    //定义一个vue组件component
    Vue.component("qinjiang",{
        props: ['qin'],
        template: '<li> {{qin}} </li>'
    });

    var vm=new Vue({
        el: "#app",
        data: {
            items: ["java","linux","前端"]
        }

    });

</script>

</body>

Axios异步通信

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="vue" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">点我</a>
</div>
<!--  导入vue  js   -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el: "#vue",
        //data 属性
        data(){
            return{
                //请求的返回参数必须和json字符串一样
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数
            axios.get('data.json').then(response=>(console.log(response.data)));
        }
    });

</script>

</body>
</html>

计算属性

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

<body>
<div id="app">
<p>currentTime1: {{currentTime1()}}</p>
<p>currentTime2: {{currentTime2}}</p>
   </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            message:"hello vue!"
        },
        methods :{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed :{ //计算属性：method computed方法名不能重名，重名之后，调用method的方法
            currentTime2:function () {
                this.message;
                return Date.now();
            }
        }
    });

</script>

</body>
</html>

结论:

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

插槽slot

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

<body>
<div id="app">
<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items"v-for="item in todoItems" :item="item"></todo-items>
</todo>
   </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<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'],
        template: '<li>{{item}}</li>'
    });
    var vm=new Vue({
        el: "#app",
        data: {
            title:"课程",
            todoItems:["java","linux","jquery"]
        }

    });

</script>

</body>
</html>

第一个vue-cli项目

node -v

npm -v

npm install cnpm -g
安装的位置 c:user/administrator/appData/Roaming/npm 隐藏文件打开

安装vue-cli
cnpm install vue-cli -g

vue list

vue  init webpack myvue

cd myvue 
npm install
npm rum dev

webpack学习使用

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

测试安装成功
webpack -v
webpack-cli -v

使用webpack

1.创建项目

2.创建一个名为modules的目录，用于放置JS模块等资源文件

3.在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

//暴露一个方法：sayHi
export.sayHi=function(){
  document.write("<div>hello webpack </div>");  
};

4.在modules下创建一个名为main.js 的入口文件，用于打包时设置entry 属性

//require导入一个模块,就可以调用这个模块中的方法了
var hello = require( "./hello");
hello.sayHi();

5.在项目目录下创建webpack.config.js配置文件，使用webpack 命令打包

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

6.在项目目录下创建HTML页面，如 index.html，导入 WebPack打包后的JS文件

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

7.在IDEA控制台中直接执行webpack;如果失败的话,就使用管理员权限运行即可!

8.运行HTML看效果

vue-router路由

#安装
npm install vue-router --save-dev

测试

1、先删除没有用的东西

2、components目录下存放我们自己编写的组件

3、定义一个content.vue的组件

<template>
    <div>
<h1>内容页</h1>
    </div>
</template>
   
<script>
    export default {
    name : "Content"
}
</script>

4.安装路由，在src目录下,新建一个文件夹:router ，专门存放路由

在这里插入图片描述

5.在main.js中配置路由

在这里插入图片描述

6.在App.vue中使用路由

在这里插入图片描述

vue+elementUI

1.cmd

vue init webpack hello-vue  
一路no

#进入工程目录
cd hello-vue
#安装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

#有错就修复

3.idea open

在这里插入图片描述

4.创建首页视图，在views目录下创建一个名为Main.vue 的视图组件;

在这里插入图片描述

创建登录页视图在views目录下创建一个名为Login.vue的视图组件，其中el-*的元素为ElementUI组件;

elementUI链接地址 https://element.eleme.cn/#/zh-CN/component/drawer
代码是拷贝的

5.index.js

在这里插入图片描述

6.main.js

在这里插入图片描述

7.记得把sass的版本8.0.0 降低为 7.3.1 npm install 或 cnpm install

8.app.vue

在这里插入图片描述

9.npm run dev

10.访问

嵌套路由

在这里插入图片描述

参数传递及重定向

在这里插入图片描述

404与路由钩子

在这里插入图片描述

修改路由配置，代码如下

在这里插入图片描述

404

创建一个名为NotFound.vue的视图组件，代码如下

在这里插入图片描述

修改路由配置，代码如下
在这里插入图片描述

这样就可以了~

路由钩子

在这里插入图片描述

本笔记知识较浅，要在专门学习~

xixihaha_coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅识Vue

Vue本笔记由 b站狂神说java 视频获取Angular: Google 收购的前端框架，由一群Java程序员开发，其特点是将后台的 MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念**【虚拟DOM】**用于减少真
复制链接

扫一扫