Vue基础知识总结

最新推荐文章于 2022-09-14 11:14:31 发布

拥有翅膀的猿

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量303

点赞数

分类专栏： Vue 学习总结文章标签： vue

本文链接：https://blog.csdn.net/zeng_0825/article/details/107798841

版权

学习总结同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

网络通信：axios ，前端通信框架。因为Vue的边界明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；也可以直接选用JQuery提供的Ajax进行通信。
跳转；vue-router
管理：vuex
vue:一种渐进式JavaScript框架，所谓渐进式就是逐步实现新特性，如实现模块化开发、路由、状态管理等新特性。综合了Angular（模块化）和React(虚拟DOM）的优点
NPM：项目综合管理工具，类似于后端的Maven
CSS预处理器
- SASS:基于Ruby，通过服务端处理，功能强大，解析效率高，但是学习Ruby难度也高。
- LESS：基于Node JS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但是实际开发足够。
Model:模型层，这里表示JavaScript对象
View：视图层，表示DOM(HTML操作的元素）
View Model：连接视图和数据的中间件，Vue.js就是MVVM中的View Model层的实现。
- 在MVVM模式中，是不允许数据和视图直接通信的，只能通过View Model来通信，而View Model就是定义了要给Observer观察者
View Model能观察到数据的变化，并对视图对应的内容实时更新
View Model能监听到视图的变化，并能够通知数据发生改变
SO，Vue.js就是一个MVVM的实现者，其核心就是实现了DOM监听与数据绑定

导入Vue.js
1. 百度搜索有很多 vue cdn

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

创建第一个vue程序

<body>
    <!-- 视图层 view -->
    <div id="app">
        {{meassge}}
    </div>
<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            meassge: "hello,Vue!"
        }
    });
</script>                
</body>

v-if
v-else-if
v-else

<body>
    <!-- 视图层 view -->
    <div id="app">
        <h1 v-if="ok"> yese</h1>
        <h1 v-else="ok===false" > no </h1>
    </div>
<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            ok: true
        }
    });
</script>                
</body>

v-for

<body>
    <!-- 视图层 view -->
    <div id="app">
        <li v-for="item in items" >
            {{item.name}}
        </li>
    </div>
<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            items: [
                {name: "zhangsan"},
                {name: "lisi"},
                {name: "wangwu"}
            ]
        }
    });
</script>                
</body>

v-on 事件绑定

<body>
    <!-- 视图层 view -->
    <div id="app">
      <button v-on:click="sayhi"></button>
    </div>
<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            message: "hello"
        }，
        methods: { //方法必须定义在vue的methods对象中
            sayhi: function(){
                console.log(this.message);
            }
        }
    });
</script>                
</body>

Vue双向绑定 v-model

<body>
<div id="app">
   输入的文本：<input type="text" v-model="message" >{{message}}
</div>

<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            messgae: "123"
        }
    });
</script>                
</body>

Vue组件

<body>
<div id="app">
    //组件：传递给组件中的值：props
  <xiaoge v-for="item in items" v-bind：bin="item"></xiaoge>
  
</div>

<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个Vue组件
    Vue.component("bin",{
        props:['bin'],  //接收参数
        template: '<li>{{bin}}</li>' 
    })
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            items: ["java" ,"linux" , "web"]
        },
       
    });
</script>                
</body>

axios网络通信
- 主要作用就是实现AJax
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持PromiseAPI【JS链式编程】
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持XSRF（跨站请求伪造）

//引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js></scrip>

//解决闪烁问题
<style>
    [v-clock]{
        display: none;
    }
</style>
<body>
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
      
      <a v-bind:href="info.url">点击</a>
</div>

<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
            items: ["java" ,"linux" , "web"]
        },
        mounted(){ //钩子函数,基于ES6新特性
            axios.get('data.json').then(response=>(this.info=response.data))
        }，
        data(){
            return{
                //请求的返回参数格式，必须和json字符串一样
                info:{
                    name: null,
                    url:null,
                    address:{
                        streed:null,
                        city:null
                    }
                }
            }
        }
       
    });
</script>                
</body>

计算属性，类似于缓存，内存中执行

<body>
<div id="app" >
   <p>{{currentTime1()}}</p>
   <p>{{currentTime2}}</p>
</div>

<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层管理 ： 数据
        data:{
           message: "hello wrold"
        },
        methods: {
            currentTime1: function() {
                return Date.now(); // 返回一个时间戳
            }
        },
        computed: {  //计算属性：
            currentTime2: function(){
                return Date.now(); //返回一个时间戳，存在内存中
            }
        }
        
    });
</script>                
</body>

内容分发 slot元素，插槽

<body>
<div id="app" >
      <todo-title slot="todo-title" v-bind:title="title"></todo-title>
      <todo-items slot="todo-items" v-for="(item,index) in todoItems" 
      v-bind="item" v-bind:index="index"
      v-on:remove="removeItems(index)"
      :key="index"></todo-items>
</div>

<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                        <solt 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>{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function(index){
                //绑定前端的自定义时间，名称、属性，
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title:"后端",
            todoItems: ['springBoot' , 'mysql' , 'springcloud']
        },
        mehtods:{
            removeItem:function(index){
                this.todoItems.splice(index,1);//根据下标，每次删除一个元素
            }
        }
    });
</script>                
</body>

PS：学会了以上的vue主要语法（v-for,v-ir,v-if-else,v-else,v-on,v-bind,methods,computed,compontent，axios)只是窥得Vue一个大概，了解其基本语法，实际Vue开发都要基于NodeJS，采用vue-cli脚手架开发，vue-router路由,vuex做状态管理，Vue UI界面美化，ElementUI

=======================

Vue-cli（预先定义好的目录结构及基础代码，类似于创建maven项目选择基础开发依赖）
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
环境：
- NodeJS：http://nodejs.cn/download/
- Git ： https://git-scm.com/downloads
- 镜像： https://npm.taobao.org/mirros/git-for-windows/
确认node.js安装成功
- cmd : node -v 查看是否能够正确打印版本号
- cmd : npm -v, 查看是否能够正确打印版本号
提升下载速度，使用国内淘宝镜像

npm install cnpm -g //全局安装
//如果没有下载淘宝镜像可以
npm install --registry=https://registry.npm.taobao.org

cnpm安装的位置
C:\Users\Administrator\AppData\Roaming\npm

1、安装vue-cli

cnpm install vue-cli -g
#测试是否安装成功
#查看可以基于哪些模块创建vue程序，通常选择webpack
vue list

2、初始化（创建）webpack项目，在需要创建项目的目录下

#vue init webpack youvueName
vue init webpack myvue

3、进入创建好的vue项目内

cd myvue
npm install  //安装依赖
npm run dev  //启动myvue项目，类似于Tomcat

4、执行 npm run dev 之后，命令窗口会给出默认地址

5、访问地址，如果见到该页面，则表示没问题了

6、使用IDEA打开，看到的项目目录结构

====================

webPack
- 是javascript应用程序的静态模块打包器，当webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
- 安装

npm install webpack -g  //打包工具
npm install webpack-cli -g  //客户端

测试安装成功

webpack -v
webpack-cli -v

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

=================================================

vue-router路由
- 是Vue.js官方的路由管理器。
  - 嵌套的路由/视图表
  - 模块化的、基于组件的路由配置
  - 路由参数、查询、通配符
  - 基于vue.js过渡系统的视图过渡效果
  - 细粒度的导航控制
  - 带有自动激活的CSSclass的链接
  - HTML5历史模式或hash模式，在IE9中自动降级
  - 自定义的滚动条行为
- 安装
  - 安装前可以先查看node_modules目录下是否已经包含vue-router

npm install vue-router --save-dev  //保存到开发环境配置中

使用

//在main.js中引用
import VueRouter from 'vue-router'
//显示声明使用
Vue.use(VueRouter);

================================

以上只是简单讲解了Vue的基础语法以及各式、组件的使用
讲解了使用Node.js+webPack快速创建一个vue工程
vue工程的主要结构以及router

更多的vue用法以及其它钩子函数，可以参考vue的API文档，至于Vue插件可以参考Element-UI。

拥有翅膀的猿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识总结

网络通信：axios ，前端通信框架。因为Vue的边界明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；也可以直接选用JQuery提供的Ajax进行通信。跳转；vue-router 管理：vuex vue:一种渐进式JavaScript框架，所谓渐进式就是逐步实现新特性，如实现模块化开发、路由、状态管理等新特性。综合了Angular（模块化）和React(虚拟DOM）的优点 NPM：项目综合管理工具，类似于后端的Maven CSS预处理器 SASS
复制链接

扫一扫

专栏目录