VUE基础——vue入门、axios、组件基础、路由的基本使用、脚手架项目搭建

最新推荐文章于 2022-10-11 21:27:53 发布

老蛙@

最新推荐文章于 2022-10-11 21:27:53 发布

阅读量210

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/m0_48468380/article/details/119046951

版权

笔记专栏收录该内容

84 篇文章 3 订阅

订阅专栏

VUE入门

概述

VUE利用双向数据绑定的方式，将dom对象和数据绑定在一起，这样一来，就不需要去操作dom对象，直接修改数据dom对象就会随即改变

vue应用组成

视图

<div id="app">
</div>

一般指定id为app，这是与vue绑定的视图

脚本

<script type="text/javascript">
	let app = new Vue({//创建vue实例
		el:"#app",//指定绑定的元素
		data:{//data属性的类型是对象，其中的属性可与元素中的各种插值，指令相关联
		},
		methods:{//methods其中声明的函数为事件提供功能
		}
	})
</script>

vue入门实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{name}}<!--插值语法，将data中的数据插入app对象-->
        <input type="text" v-model="name"/><!--v-model指令与表单控件绑定-->
        <button @click="test">测试</button><!--@click(全称v-on:click)用于注册点击事件-->
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                name:"Tom"
            },
            methods:{
                test:function(){
                    this.name="jack";//this代表的是vue实例，其中的属性就是data中的属性
                }
            }
        })
    </script>
</body>
</html>

生命周期

vue的生命周期函数写在vue下面,生命周期函数不能使用箭头函数，因为生命周期函数中需要频繁使用到this，而箭头函数没有this

模板语法

vue有插值、指令等模板语法，和thymeleaf语法类似

axios.js

vue2之后推荐使用axios.js来发送http请求而非ajax，axios是一个基于Promise的http库，可用在浏览器和node.js中

基本使用

get请求

axios.get(url)
.then(function (){})//成功之后执行
.catch(function (){})//出错之后执行

post请求

axios.post(url，{data})//上传的数据
.then(function (){})//成功之后执行
.catch(function (){})//出错之后执行

vue组件基础

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <comp></comp>
    </div>
    <script>
        Vue.component('button-counter',{
            data:function(){//data必须是一个函数
                return {
                    count:0
                }//返回一个对象，属性count为0
            },
            methods:{
                test(){
                    this.count--;
                }
            },
            template:"<div><button @click='count++'>you click me {{count}} times</button><button @click='test'>reduce</button></div>"
        })

        const comp={
            data:function(){
                return {
                    count:0
                }
            },
            methods:{
                test(){
                    this.count++
                }
            },
            template:"<button @click='test'>you click me {{count}} times</button>"
        }

        new Vue({
            el:"#app",
            components:{
                comp:comp
            }
        })
    </script>
</body>
</html>

组件命名

当使用首字母大写命名时，引用元素可以使用短横线和首字母大写两种命名法，但是直接在dom(非字符串的模板)中使用时只有短横线是有效的

组件数据

组件的数据data必须是一个函数

模板

模板必须有一个根标签，如果模板中有多个标签的时候需要使用一个根标签将其涵盖

复用

声明一个组件可以多次引用，类似java的对象，每一个引用都有各自的数据域

全局组件与局部组件

使用Vue.component创建的是全局组件，默认和全局vue绑定，可以直接在元素中引用；而局部声明的是局部组件，它需要在vue对象中的components中指定才能够在元素中引用

父子组件传值

父组件传值到子组件

子组件声明需要传入的属性，使用props，props是一个对象
父组件中使用子组件<SubComp attribute="父组件的数据"></SubComp>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue-v2.js"></script>
</head>
<body>
    <!-- app为父组件，comp为子组件 -->
    <div id="app">
        <!-- 在父组件中定义name为tom -->
        <comp name="tom"></comp>
    </div>
    <script>
        const comp={
            // 子组件通过props来声明需要传入的值,指定name类型
            props:{
                name:String
            },
            // 在子组件中取得父组件传来的值
            template:"<p>{{name}}</p>"
        }
        new Vue({
            el:"#app",
            components:{
                comp
            }
        })
    </script>
</body>
</html>

子组件传值到父组件

子组件声明需要传入的属性，使用props，props对象中传入一个函数
子组件执行传入的函数，然后通过参数将数据从子组件传给了父组件传来的函数
父组件中使用<SubComp attribute="函数"></SubComp>通过调用这个函数来获得子组件传来的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue-v2.js"></script>
</head>
<body>
    <div id="app">
        <!-- 加上:说明后方是一个变量或者表达式，而不加:说明后面是一个字面量 -->
        <comp :func="func1"></comp>
    </div>
    <script>
        const comp={
            props:{
                func:Function
            },
            data(){
                return {
                    name:"tom"
                }
            },
            // 声明周期函数mounted来调用传来的函数func
            mounted (){
                this.func(this.name)
            },
            template:"<div></div>"
        }
        new Vue({
            el:"#app",
            components:{
                comp
            },
            methods:{
                func1(name){
                    // 父组件输出从子组件传来的参数
                    console.log(name)
                }
            }
        })
    </script>
</body>
</html>

路由的基本使用

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue-v2.js"></script>
    <script src="router-v3.js"></script>
</head>
<body>
    <div id="app">
        <!-- router-link表示路由的连接 -->
        <router-link to="/A">to A</router-link>
        <router-link to="/B">to B</router-link>
        <router-link to="/C">to C</router-link>
        <!-- router-view表示承载路由组件的载体 -->
        <router-view></router-view>
    </div>

    
    <script>
        // 1.创建组件
        const coma={
            data:function(){
                return {
                    name:"componentA"
                }
            },
            template:"<div>{{name}}</div>"
        }
        const comb={
            data:function(){
                return {
                    name:"componentB"
                }
            },
            template:"<div>{{name}}</div>"
        }
        const comc={
            data:function(){
                return {
                    name:"componentC"
                }
            },
            template:"<div>{{name}}</div>"
        }
        // 2.为路由和组件添加映射
        const routes=[
            {path:"/A",component:coma},
            {path:"/B",component:comb},
            {path:"/C",component:comc}
        ]
        // 3.将映射添加入路由对象
        const router =new VueRouter({
            routes,
        })
        // 4.将路由对象加入vue对象
        new Vue({
            el:"#app",
            components:{
                coma,
                comb,
                comc
            },
            router
        })
    </script>
</body>
</html>

脚手架项目

脚手架项目创建(vue-cli4)

下载cnpm，配置淘宝镜像(加快下载速度)：npm install --registry http://registry.npm.taobao.org install cnpm -g
下载vue脚手架：cnpm i @vue/cli -g
创建vue项目：vue ui或vue create projectname
启动项目：npm run serve
打包项目：npm run build项目完成后需要打包成浏览器可以运行的html、css、js

脚手架项目结构

在这里插入图片描述

dist：执行build指令后自动生成，存放打包之后的文件
node_modules：依赖如router、axios等等，类似maven仓库，使用npm install下载依赖存放在这里
public：用于存放静态文件
src：源码目录
asserts：存放静态资源，如图片、css样式表、脚本等
components：存放组件，组件使用vue作为后缀，组件的组成有三部分：template、script、css
router：存放路由
views：存放写好的各种页面
App.vue：主vue组件
main.js：入口文件，用来初始化vue实例
.editorconfig：配置文件
.gitignore：配置git上传想要忽略的文件格式
babel.config.js：用于将ES6代码向旧版本浏览器兼容的工具链
pacage-lock.json：用于记录实际安装的npm package的来源和版本号
package.json：模块基本信息，项目描述及依赖

结构说明

index.html为入口页面，其中有个div,id=“app”
index.html中没有vue对象，index.html会自动将main.js应用到页面，vue在main.js中定义了
路由默认使用router/index.js

使用ElementUI

安装：npm i element-ui -S
在main.js中引入：

import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

使用外部CSS

将CSS文件放在src/asserts
在main.js中引入：

import './asserts/css/xxx.css'

多入口配置

vuecli3和vuecli4项目没有config目录，对应的配置文件需要自己在根目录下创建

在src目录下新建新入口的html、js、vue文件，内容参照index.html、main.js、App.vue
配置webpack.base.conf.js:

entry:{
	app:'./src/main.js',
	newentry:'./src/newentry.js'

配置web.dev.conf.js：

plugins:[
	...
	new HtmlWebpackPlugin({
		filename:'newentry.html',
		template:'newentry.html'
	})
]

老蛙@

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
VUE基础——vue入门、axios、组件基础、路由的基本使用、脚手架项目搭建

VUE入门
复制链接

扫一扫

专栏目录