vue

最新推荐文章于 2024-04-28 16:32:55 发布

天地不仁sy

最新推荐文章于 2024-04-28 16:32:55 发布

阅读量310

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44744155/article/details/105223219

版权

第一部分：了解什么是Vuejs及入门

官⽹网：https://cn.vuejs.org/
入门：https://cn.vuejs.org/v2/guide/
快速入门
idea创建一个项目

npm init -y

在这里插入图片描述 npm install vue --save-dev

在新文件夹下见一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--定义渲染的位置-->
<div id="app">
    <h2>{{name}}风采</h2>
</div>
<!--相当于导入依赖-->
<script src="js/vue.min.js"></script>
<script>
<!--初始化-->
    var vm = new Vue({
    //el不能使用class 
    //data 以key：value 动态数据
        el: "#app",
        data: {
            name: "亲亲"
        }
    });
</script>
</body>
</html>

在这里插入图片描述
mvvm
v + m + vm 视图和数据完全分离

插值表达式

 <p>{{male==1?"男":"⼥女女"}}</p>

vue生命周期

在这里插入图片描述 `

生命周期

第二部分：掌握和学习Vuejs的内置指令（重点)

在这里插入图片描述 v-on
在事件处理理程序中调***⽤用 event.preventDefault() 或 event.stopPropagation() 是⾮非常常⻅见的需求。尽管我们可以在⽅方法中轻松实现这点，但更更好的⽅方式是：⽅方法只有纯粹的数据逻辑，⽽而不不是去处理理 DOM 事件细节。
为了了解决这个问题，Vue.js 为 v-on 提供了了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop ：阻⽌止事件冒泡
.prevent ：阻⽌止默认事件发⽣生
.capture ：使⽤用事件捕获模式
.self ：只有元素⾃自身触发事件才执⾏行行。（冒泡或捕获的都不不执⾏行行）
.once ：只执⾏行行⼀次
在这里插入图片描述

第三部分：掌握和学习Vuejs组件定义和事件定义

注册组件就是利用Vue.component()方法

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

<div id="app">
    <!--组件：自定义标签, 内容就是template -->
    <my-component-li v-for="item in items" v-bind:comitem="item">

    </my-component-li>
</div>

<script src="js/vue.min.js"></script>
<script>

    // 先注册一个组件
    Vue.component('my-component-li',{
        props:['comitem'],
        template: "<li>Hello {{comitem}}<li>"
    });

    var vm = new Vue({
        el: '#app',
        data: {
            items: ['张三','李四','王五']
        }
    })
</script>
</body>
</html>

直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。

var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
      }
    }
  })

路由

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


<!-- 在Html页面中的固定模板！-->
<div id="app">
    <!-- 页面 路由就是a链接-->
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/student">学员</router-link>
        <router-link to="/teacher">老师</router-link>
    </p>

    <!-- 页面的视图是如何渲染的呢 -->
    <router-view></router-view>

</div>

<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script>

    // 1、 定义路由组件
    const Welcome = {template:'<div>欢迎</div>'}
    const Student = {template:'<div>Student</div>'}
    const Teacher = {template:'<div>Teacher</div>'}

    // 2、定义路由（核心）
    const routes = [
        // 请求这个路由，会跳转到对应的视图当中！
        {path: '/',redirect: '/welcome'}, // 重定向到请求
        {path: '/welcome',component: Welcome}, // 组件直接对应上面定义的组件即可！
        {path: '/student',component: Student},
        {path: '/teacher',component: Teacher}
    ];

    // 3、创建 router 实例
    const router = new VueRouter({
        // routes: routes (缩写如果，同名的话)
        routes
    });


    var vm = new Vue({
        el: '#app',
        router
    })
</script>

</body>
</html>

数据交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 在Html页面中的固定模板！-->
<div id="app">
    <!--视图渲染效果！-->
    <div>名称 : {{info.name}}</div>
    <div>地址 : {{info.address.country}}-{{info.address.street}}</div>
    <div>URL : <a :href="info.url" target="_blank">{{info.url}}</a></div>
</div>


<script src="../lib/vue.js"></script>
<!--使用axios-->
<script src="../lib/axios.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data(){
            // 编写对象格式，是空的！模型
            return {
                info: {
                    name: null,
                    address:{
                        street: null,
                        country: null,
                    },
                    url: null
                }
            }
        },
        // 获取后端或者mock数据！
        mounted(){ // 在页面加载完成之前执行！
            axios
                .get('localhost:8080/getUser')
                .then(response=>(this.info = response.data));
                // response 就是请求响应回来的数据
        }

    })
</script>
</body>
</html>

第四部分：Vuejs脚手架

类似springboot
环境安装

# 第一次安装可能会有些慢！
npm install vue-cli -g  

# 检测我们安装的vue的应用
vue list

第一个 Vue-Cli 前端程序

1、新建一个文件夹 vue-cli

2、创建一个基于webpack模板的 vue 应用程序

vue init webpack myvue

3、完善依赖，运行程序，我们下载的所有前端工程一般都没有依赖！

cd myvue  # 进入目录

npm install  # 安装所有依赖

npm run dev # 启动项目

4、访问测试！

目录分析
在这里插入图片描述

build 和 config ： webpack 配置文件，项目配置文件
node_modules，这个一般在开源项目中都不存在，我们拿到项目的第一步就是安装所有依赖（npm install）
src 项目的源码目录！（Vue项目和 js 代码）
static 静态资源文件！
.babelrc Babel配置文件（ES6语法转换为 ES5语法！）
.editorconfig 编辑器配置
.gitignore git文件忽略配置
.postcssrc.js css 相关的配置文件，就是导入了css的插件
index.html 首页，所有的页面都是通过这里跳转的，实际开发是不使用这个文件的！
package.json 项目的配置文件（名称、版本、描述、作者、依赖、启动脚本 …）

src 目标

src 就是我们编写前端项目的源目录，所有的代码都会写到这里面

main.js ，项目的主入口，所有的程序都是有一个主入口的！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

// es6语法，导入组件和依赖！
import Vue from 'vue'    // vue 依赖
import App from './App'  // 导入组件

Vue.config.productionTip = false  // 关闭浏览器控制台关于环境的提示！

/* eslint-disable no-new */
// vue的核心对象
new Vue({
  el: '#app',  // 节点
  components: { App },  // 组件
  template: '<App/>'  // 模板
})

App.vue

<!-- HTML 代码模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<!--JS 代码 -->
<script>
// JS 代码, 导入我们自己写的模块！
import HelloWorld from './components/HelloWorld'
// 导入对象App，在其他地方导入的话就可以直接使用了！
export default {
  name: 'App',
  components: {
    HelloWorld  // 组件！
  }
}
</script>

<!--CSS 样式： 如果没有加 scoped 就是全局生效，如果增加了就是当前页面生效！-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

标准的路由
1、在项目中安装 vue-router

npm install vue-router  --save dev

2、就可以在模板化工程中使用它， Vue.user()

// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);

3.测试
1、清空项目的多余内容！

2、定义我们自己的组件！

<template>
  <div>
    <h1>内容页</h1>
  </div>
</template>

<script>
export default {
  name: 'Content'
}

3、编写安装路由！
4、编写我们自己的路由组件

// 导入Vue
import Vue from 'vue'
// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);

// 导入我们自己写的组件, 不需要增加 .vue 后缀！
import Content from '../components/Content'
import Main from '../components/Main'

// 配置路由
export default new VueRouter({
  // 就是我们上周讲的
  routes: [
    // 规则1 , content 内容页跳转规则！
    {
      path: '/content',
      name: 'content',
      component: Content
    },
    // 规则2
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
})

5、在 main.js 中配置路由！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 导入我们的路由规则, 自动识别 index.js
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 挂载路由！
  components: { App },
  template: '<App/>'
})

6、在App.vue中使用即可！

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <!-- 出口，展现路由内容的地方！ -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

404组件配置

<template>
  <div>
    <h1>页面不存在！404</h1>
  </div>
</template>

<script>
export default {
  name: 'NotFound'
}
</script>

路由配置

// 关于404，路由会优先匹配精准的，然后匹配通用！
{
    path: '*',
    component: NotFound
}

路由模式

hash ：路径会带 # 号

history：不带 # 号，也就是我们常常看见的网页路由！

export default new VueRouter({
  mode: 'history', // 配置路由模式！
  // 就是我们上周讲的
  routes: []
}

天地不仁sy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

第一部分：了解什么是Vuejs及入门官⽹网：https://cn.vuejs.org/入门：https://cn.vuejs.org/v2/guide/快速入门idea创建一个项目npm init -ynpm install vue --save-dev在新文件夹下见一个页面<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫