首页 > 其他分享 >vue学习笔记

vue学习笔记

时间：2024-03-27 13:55:06浏览次数：21  
标签：index Vue component 笔记 学习 webpack vue data

VUE

 

vue的7个属性，8个方法，以及7个指令。787原则

属性：

  1. el属性：指示vue编译器什么时候开始解析vue的语法
  2. data属性：将视图的数据抽象的放在data中
  3. template属性：用来设置模板，会替换页面元素，包括占位符
  4. methods属性：放置页面中的业务逻辑
  5. render属性：创建真正的Virtual Dom
  6. computed属性：计算属性
  7. watch属性:watch:function(new,old){} 监听data中数据的变化 两个参数。一个返回新值，一个返回旧值

指令：

  1. v-bind：绑定dom的某一个属性(简写（:xx="info"）)
  2. v-for:循环获取
  3. v-on:click:绑定事件(简写（@click(sayHi))
  4. v-model:(双向绑定):会忽略所有表单元素的select、checked、value属性，总是将vue的实例数据作为数据来源
  5. v-if:判断
  6. v-text:
  7. v-html:
  8. v-show:

 方法：

生命周期的八个钩子函数，可以在vue的各个阶段添加代码。

　　beforeCreate() 创建实例

　　created() 创建完成

　　beforeMount() 创建模板

　　mounted() 创建完成

　　beforeUpdate() 更新状态

　　updated() 更新完成

　　beforeDestory() 销毁 vue 实例

　　destoryed() 销毁完成

 

CDN

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

 

 

Soc：关注点分离原则

axios：网络通信

vue-router：页面跳转

 

UI框架

iview(iviewui.com)

Element UI:(https://element.eleme.io)

https://gitcode.net/mirrors/PanJiaChen/vue-element-admin?utm_source=csdn_github_accelerator github

https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard 在线预览

mpvu和WeUI（小程序）

Ant-Design：阿里巴巴出品，基于React的UI框架

ice-work:(https://v3.ice.work)

Bootstrap:Twitter推出一个用于前端开发的开源工具包

AmazeUI:一款HTML5跨屏前端框架

css预处理器

SASS：基于Ruby，通过服务器处理，功能强大，解析效率高，需学习Ruby语言，上手难度高于LESS

LESS:基于NodeJs，通过客户端处理，使用简单，功能比Sass简单，解析效率低于SASS，一般情况狗使用

 

webpack打包

一款渐进式JavaScript框架，实现模块化开发，路由，状态等新特性，综合了Angular（模块化）和Reat（虚拟DOM）的优点

 

前端MV*时代

MVC（同步通信为主）：Model View Controller

MVP（异步通信为主）：Model View Presenter

MVVM（异步通信为主）：Model View ViewModel

 

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" >
  <!--绑定vue的data下的message-->
  {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            message :"xiaoxing"
        }
    });
</script>
</body>
</html>

结果（双向绑定）

 

 v-bind(绑定span标签的title属性)

 v-if和v-else-if

 v-for

 

 v-on:click

 

演示

v-model(双向绑定)

 

 

 vue组件[ component](自定义标签)

Vue.component("xx",{
        //自定义一个模板
        template:'<li type="disc">xx</li>'
    });

绑定data中的数据

 v-for实现component自定义组件绑定数据（:key 有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误）

 vue闪烁问题解决

 

axios（vscode跨域访问需要安装live server）

cdn：<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<body>
        <div id="app">
        <xx :data="info"></xx>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script>
            Vue.component(
            "xx",    
            {
                props:['data'],
                template:
                '<div>'+
                        '<P>{{data.name}}</p>' +
                        '<P>{{data.url}}</p>' +
                        '<P>{{data.page}}</p>' +
                        '<P>{{data.address.street}}</p>' +
                        '<P>{{data.address.city}}</p>' +
                        '<P>{{data.address.country}}</p>' +
                    '</div>'
            })
           let vue=new Vue({
            el:"#app",
            data(){
                return{
                    info:{
                        name:null,
                        url:null,
                        page:null,
                        address:{
                            street:null,
                            city:null,
                            country:null
                        },
                    }
                }
            },
            mounted() {
               axios.get("../data.json").then(response=>(this.info=response.data));
            },
           })
        </script>
    </body>

json

{
    "name":"xiaoxing",
    "url":"https:www.baidu.com",
    "page":1,
    "address":{
        "street":"长兴街道",
        "city":"广州",
        "country":"中国"
    }
}

 计算属性computed

调用方法时，每次都需要进行计算，有计算过程则必定产生系统开销，如果这个结果是不经常发生变化的就可以将这个结果缓存起来，采用计算属性可以做到这一点。

计算属性的主要特点就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

 

 当计算属性的message发生改变，计算属性就会刷新缓存，可以用cache来理解

 插槽（slot）

 

<body>
<div id="app">
 <todo>
    <!-- 指定的slot名插入指定插槽 -->
    <todo-title slot="title" :title="title"></todo-title>
    <todo-items slot="items"  v-for="item in items" :item="item" :key="item.message" ></todo-items>
 </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 主标签 slot插槽
    // 为slot命名
    Vue.component("todo",{
        template:
            `<div>
                 <slot name="title"></slot>
            <ul>
                 <slot name="items"></slot>
            </ul>
            </div>`
    });
    // 子组件1
    Vue.component("todo-title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    // 子组件2
    Vue.component("todo-items",{
        props:['item'],
        template:'<li>{{item.message}}</li>'
    });
    let vue=new Vue({
        el:"#app",
        data(){
            return{
                title:"小星的中职生活",
                items:[
                    {message:"中职第一年"},
                    {message:"中职第二年"},
                    {message:"中职第三年"},
                ]                
            }
        }
    })
</script>
</body>

 

结果：

 自定义事件

 实现按钮绑定vue下的methods事件

 直接绑定并不能操作vue对象的methods方法，就好比组件的获取数据是通过v-bind:来进行数据的传输，事件也是一样的道理

数据绑定使用props，事件绑定使用this.$emit('需要绑定的方法'，转递的参数);

 

 结果：

 <body>
        <div id="app">
           <xx>
           <xx-title slot="title" :title="title"></xx-title>
           <!--item为遍历出来的数值，:item、:index绑定组件里的props的参数-->
           <!--@remove为绑定组件里的methods下的remove方法，绑定vue对象下的methods方法dropitem(index)-->
           <xx-item slot="items" v-for="(item,index) in items"
            :item="item" :index="index" :key="index" @remove="dropitem(index)"></xx-item>
           </xx>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javaScript">
            Vue.component(
            "xx",    
            {
                template:`
                <div>
                   <slot name='title'></slot>
                    <ol>
                        <slot name='items'></slot>
                    </ol> 
                </div>`
            });
          Vue.component(
            "xx-title",
          {
            props:['title'],
            template:`<div><p>{{title}}</p></div>`
          });
          Vue.component(
          "xx-item",  
          {
            props:['item','index'],
            //@click="remove"使用methods的remove方法
            template:`<li>{{item.message}}--{{index}} <button @click="remove">删除</button></li>`,
            methods: {
                //使用$emit('需要绑定的事件',传递的参数)
                remove:function(index)
                {
                    this.$emit('remove',index)
                }
            },
          });
            
            let vue=new Vue({
                el:"#app",
                data(){
                    return{
                        title:"小星的中职生活",
                        items:[
                            {message:'xiaoxing1'},
                            {message:'xiaoxing2'},
                            {message:'xiaoxing3'},
                        ]
                    }
                },
                methods: {
                    dropitem:function(index){
                        //splice(0,1) 0为需要操作的索引，第二个数值1为删除当前索引的数据，0为不删除
                        console.log("删除了：",this.items[index].message,"的数据");
                        this.items.splice(index,1);
                    }
                },

            })
        </script>
    </body>

vue插件（Vetur高亮显示，第二个快速创建模板）

 

vue-cli

环境

Nodejs：https://nodejs.org/en

 

 

 

安装好Nodejs使用npm -v和node -v测试是否安装成功

 

 npm i -g @vue/cli-init

安装淘宝加速器 cnpm(尽量不使用cnpm，会导致一些奇奇怪怪的问题)

npm install cnpm -g(-g：全局安装)

安装vue-cli

npm install vue-cli -g(安装了才可以使用vue命令)

vue list(查看项目模板)

 创建一个基于webpack模板的vue程序

创建项目

vue init webpack vuename(进入指定目录创建项目)

初始化并运行 

cd myvue(进入需要运行项目)

npm install(安装所需要的依赖包)

npm run dev（运行项目）

use strict(使用严格检查模式)【es6规范】

webpack

关键字（import、export function dostuff(){}、module "localModule"{}）

npm install webpack -g （不用指定项目目录）

npm install webpack-cli -g

测试是否安装成功

npm install webpack@3.6.0 -g （指定3.6.0版本）

npm install webpack-cli@4.9.2 -g(@指定安装版本)

 

 webpack.base.conf.js文件配置

entry:入口文件，指定WebPack用哪个文件作为项目的入口

output:输出，指定WebPack把处理完成的文件放置到指定路径

module：模块，用于处理各种类型的文件

plugins：插件，如：热更新，代码重用等

resolve：设置路径指向

watch：监听，用于设置文件改动后直接打包

 

export：出口，被访问

hello.js

require:引用

main.js

webpack.config.js(webpack打包会找这个文件) bundle.js(建议使用这个命名)

 webpack

webpack --watch（实时监听是否改变）

 引用

  <script src="./xiaoxing/js/bundle.js"></script>   vue-router npm install vue-router@3.5.2 --save (当前项目安装vue-router，--save-dev会保存开发的配置里) 指定版本 npm audit fix修复

导入跟使用

main.js

 index.js

 app.vue

 组件

 路由模式(默认hash)

hash

history

 

嵌套路由（子路由）children

index.js

import Vue from 'vue' import VueRouter from 'vue-router' //主页面 import Main from '../views/main' import Myself from '../views/myself'
//嵌套路由展示的组件 import Vx from '../components/vx' import Phone from '../components/phone' import Airs from '../components/airs' import News from '../components/news' //使用路由 Vue.use(VueRouter)
export default new VueRouter({     //设置为history模式     mode:'history',     routes:[{         path:'/main',         component:Main,         //子路由实现         children:[             {                 //访问/main路由默认显示的组件                 path:'/main',                 component:Airs             },             {                 path:'/main/news',                 //展示的组件                 component:News             },             {                 path:'/main/airs',                 //展示的组件                 component:Airs             },                     ]     },{         path:'/myself',         component:Myself,         //子路由实现         children:[             {                 path:'/myself/phone',                 component:Phone             },             {                 path:'/myself/vx',                 component:Vx             }         ]     },     {        //路由访问的组件        path:"/",        component:Main,        children:[{         //子路由默认访问的组件         path:"/",         component:News        }     ]     } ] })

 main.js

<template>
    <div>
        <h1>首页</h1>
        <div  class="item">
        <router-link to="/main/news">新闻</router-link>
         <router-link to="/main/airs">查看天气</router-link>
        </div>
        <!-- 子路由展示视图-->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
.item{
    margin: 10px;
    padding-top: 8px;
    background: skyblue;
    height: 30px;
 }
</style>

 组件

<template>
    <div>
        小星的日常生活
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
div{
    color: gray;
}
</style>
<template>
    <div>
        2023-5-1 天气晴
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
div{
    color: gray;
}
</style>

　效果

传递参数

方式一

主页面

 路由

展示页面

 方式二

 接参数

 

 重定向

 axios的使用

安装

npm install --save axios vue-axios

加载

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 使用函数钩子调用axios 
<template>
    <div>
        {{airsinfo}}
        {{info.name}}
        {{info.age}}
    </div>
</template>

<script>
    export default {
        props:['airsinfo'],
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入如路由之前");
            //next每个函数必须需要的属性
            //next(false)为返回上一次页面
            //next("path")跳转指定页面 例：next("/myself")
            next(vm=>{
                vm.getdata();
            });
            
        },
        beforeRouteLeave (to, from, next) {
            console.log("离开了路由");
            next();
        },
        data(){
                return{
                    info:{
                        name:null,
                        age:null
                    }
                }
            },
        methods:{
            getdata:function(){
                // this.axios({
                //     method: 'get',
                //     //请求json的地址
                //     url: 'http://localhost:8080/static/data.json',
                // }).then(function(response){
                //     console.log(response);
                //     vue.info=response.getdata
                // });
                this.axios({
                    method:'get',
                    url: 'http://localhost:8080/static/data.json',
                }).then(response=>(this.info=response.data,console.log(response)))
            }
        }
    }
</script>

<style scoped>
div{
    color: gray;
}
</style>

　　

 图标不显示问题

在build目录下的utils.js中添加

if (options.extract) {       return ExtractTextPlugin.extract({         use: loaders,         fallback: 'vue-style-loader', 　　//添加了这行         publicPath: '../../'       })     }   在webpack.dev.conf.js和webpack.prod.conf.js   new HtmlWebpackPlugin({       filename: config.build.index,       template: 'index.html',       inject: true, 　　#添加这些       favicon: './favicon.ico',       favicon: path.resolve('favicon.ico'),       minify: {         removeComments: true,         collapseWhitespace: true,         removeAttributeQuotes: true         // more options:         // https://github.com/kangax/html-minifier#options-quick-reference       },   ===== new HtmlWebpackPlugin({       filename: 'index.html',       template: 'index.html',       inject: true,   　　#添加这些       favicon: './favicon.ico',       favicon: path.resolve('favicon.ico')     }),    

标签：index,Vue,component,笔记,学习,webpack,vue,data
From： https://www.cnblogs.com/xxxiaoxing/p/17351033.html

相关文章

  • JavaWeb学习笔记——第六天
    MySQL（一）数据库概述数据库即DataBase（DB），是存储和管理数据的仓库。数据库管理系统即DataBaseManagementSystem(DBMS)，是操纵和管理数据库的大型软件。SQL即StructuredQueryLanguage，是操作关系型数据库的编程语言，定义了一套操作关系型数据库统一标准。常见的数据库产品......
  • 基于springboot+vue的乌鲁木齐南山冰雪旅游服务网
    作者主页：Java码库主营内容：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。收藏点赞不迷路 关注作者有好处文末获取源码技术选型【后端】：Java【框架】：springboot【前端】：vue【JDK版本】：JDK1.8【服务器】：t......
  • 吴恩达2022机器学习专项课程(一） 4.1 梯度下降
    问题预览1.梯度下降算法的作用是？2.梯度下降如何计算线性回归的成本函数？3.所有的成本函数都是一个形状吗？4.在非凸形状中，梯度下降的更新过程是？5.在非凸形状中，不同的初值对最小化成本函数的影响是？6.什么是局部最小值？笔记1.梯度下降算法的作用梯度下降算法可以计算大多......
  • python 数据类型和运算符 进阶学习
    有了前面的基础的，我们对数据类型有了一定的了解，按照思维进阶深度学习的学习方法，我们对前面的实例进行扩展学习，以求学习到更多一点的知识。实例二：输入两个数，计算它们的和、平方、三次方、平方根、三次方根  首先是复习前面的数据类型的知识该程序的执行结果  是......
  • 【深度学习】最强算法模型之：潜在狄利克雷分配(LDA)
    潜在狄利克雷分配1、引言2、潜在狄利克雷分配2.1定义2.2原理2.3算法公式2.4代码示例3、总结1、引言小屌丝：鱼哥，给我讲一讲LDA小鱼：LDA？你指的是？小屌丝：就是算法模型的LDA啊，你想啥？小鱼：哦，哦，那就好，小屌丝：你告诉我，你想啥了？小鱼：不滴，我就不小屌丝：…你就说吧，我......
  • 【机器学习】线性回归实验
    任何一门机器学习的课，第一个接触的算法多半都是线性回归。这篇文章简单总结了相关的两个算法——最小二乘法和梯度下降法，以及它们的步骤，并用Python实现了相关算法。步骤如下：首先用随机函数构造数据，在这里我构造了一百组数据。建立线性模型......
  • 前端框架选择：Vue VS React
    目录Vue是什么？React又是什么？Vue的优缺点React的优缺点选择Vue选择ReactVuevsReact如今，大多数大型WebApp都是使用给力的JS前端开发框架构建的。其中人气最高的两个框架是——React和Vue。下面我将根据这两个框架实际应用深入刨析它们各自的特点，全面掌......
  • 嵌入式笔记1.2 ARM Cortex-M3M4汇编指令集
    目录Cortex-M处理器的指令集Cortex-M处理器支持的指令集Cortex-M处理器指令集的选择寄存器组详解1.通用寄存器R0~R122.栈指针3.连接寄存器4.程序计数寄存器5.程序状态字寄存器（xPSR）6.特殊功能寄存器7.浮点控制寄存器指令集详解（Cortex-M3和Cortex-M4都支持的）1.处理......
  • 数据库三大范式的学习与数据库表设计的了解
    数据库三大范式的学习与数据库表设计的了解内容简单介绍对于数据库三大范式的理解以及一些设计表示要注意的方面本章内容梳理图数据库三大范式比较官方的定义数据库的三大范式（NormalForms）是关系数据库设计中用于确保数据结构化、减少数据冗余、并提高数据完整性的指导和规......
  • 前端学习-TypeScript菜鸟教程-002-TypeScript基础知识
    菜鸟教程链接基本是阅读教程，记笔记大部分为直接复制基础类型any,number,string,boolean,数组(如letx:number[]=[1,2]或letx:Array<number>=[1,2]),元组(letx:[string,number])enumenumColor{Red,Green,Blue};letc:Color=Color.Blue;void:用于标识方......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99