Vue学习笔记分享

温馨提示:本文最后修改于 155 天前,部分内容可能已经过时。如文章内容或静态资源失效,请联系我进行更新,谢谢~
最近一直在学习Vue,为今后网站的校园卡前端项目打基础。我在这里分享一下我的Vue学习笔记,现在还不是很完整,后面我会不断地进行补充的QAQ

Vue基础(前面简单补充)

Vue的引入:

  1. 本地引入<script src="./js/vue.js"></script>
  2. 使用CDN<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

实例化

var app1 = new Vue({//Vue实例化
    el: '#app',//需要控制的元素
    data: {//用于数据存储,本质是一个对象
        message: "实例化成功!"
    },
    methods:{//存放各种方法类似函数
        changeMessage: function(){
            this.message = "改写成功!"
        }
    },
})

v-bind 数据绑定

v-on 指令 监听DOM事件 的补充

v-on:dblclick 双击事件 v-on:mousemove 鼠标移动事件

更多事件 http://www.w3school.com.cn/jsref/jsref_events.asp 去掉前面的on

v-on简写为@ 如:v-on:click 简写为 @click

时间修饰符

<!-- 阻止单击事件继续传播,只能触发一次 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键码:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

按键码的别名:

.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right`

使用:<input v-on:keyup.13="submit">

v-if 条件判断

v-if v-else v-if-else-if

是否展示元素可以用v-show 实质是display="none"

<div v-if="!flag">现在flag的值是假</div>
<div v-else-if="flag">现在flag的值是真</div><br>
<div v-show="flag">嘤嘤嘤~</div>

v-for for循环

用for循环实现遍历

<div id="app">
    <ol>
        <li v-for="message in messages">
            {{  message.text }}
            <!-- . 运算符 跟js一样 -->
        </li>
    </ol>
</div>

Vue组件的应用

Vue.component("hello",{
    template:`
        <div>
            <div>Hello!这里是{{ message }}</div>
            <div>
                <button v-on:click='changeMessage()'>change</button>
            </div>
        </div>`,
    data: function(){
        return{
            message: "Vue",
        }
    },
    methods:{
        changeMessage:function(){
            this.message = "Vue学习";
        },
    },
})

Vue生命周期

Vue 实例生命周期

生命周期 钩子函数

Vue对象生成之前 beforeCreate 可以做加载动画

Vue对象生成之后 此时DOM结构还没有生成 created 可以获取数据,接口等

内容渲染之前 beforeMount

内容渲染之后 DOM已经生成 mounted

组件更新之前 beforeUpdate 组件更新前做一些事情

组件更新后 updated

组件销毁前 beforeDestroy

组件销毁后 destroy

使用:

methods:{
    beforeCreate:function(){
        //函数内容
    }
}

Vue CLI脚手架

准备及安装

官方网站:https://cli.vuejs.org/zh/guide/

安装:先用管理员模式打开命令行,cd到nodejs安装目录下的node_modules/npm文件夹下,执行 npm install -g @vue/cli全局安装vue/cli,然后安装npm install -g @vue/cli-init

安装慢:改源 npm config set registry https://registry.npm.taobao.org 换用淘宝的源

安装出错:Unexpected end of JSON input while parsing near '...t-contrib-uglify":"~0'需要强制清除缓存npm cache clean --force

查看是否安装成功/查询版本:vue --version

建立新项目

cd到对应目录,执行vue init webpack <项目名称>

vue init webpack vue-cli-learning

? Project name vue-cli-learning
? Project description vue-cli-learning
? Author xiaomage2000 <[email protected]>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended)
 npm

   vue-cli · Generated "vue-cli-learning".


# Installing project dependencies ...
# ========================

> [email protected] postinstall C:\Users\Xiaomage\Desktop\Temp\Vue Learning\CLI\CLI\vue-cli-learning\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall C:\Users\Xiaomage\Desktop\Temp\Vue Learning\CLI\CLI\vue-cli-learning\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
added 1099 packages from 644 contributors and audited 11511 packages in 28.42s
found 12 vulnerabilities (7 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd vue-cli-learning
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack


PS C:\Users\Xiaomage\Desktop\Temp\Vue Learning\CLI\CLI> cd vue-cli-learning
PS C:\Users\Xiaomage\Desktop\Temp\Vue Learning\CLI\CLI\vue-cli-learning> npm run dev

> [email protected] dev C:\Users\Xiaomage\Desktop\Temp\Vue Learning\CLI\CLI\vue-cli-learning
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 21/29 modules 8 active ...\CLI\CLI\vue-cli-learning\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 2594ms

目录结构

  • build 构建 客户端和服务端
  • config 配置文件
  • src
    • assets
    • components
    • App.vue Vue组件
    • main.js
  • static 静态文件
  • index.html 入口文件
  • package.json 存放依赖文件

过程:index.html -> main.js -> App.vue

Vue组件的三个要素:template模板 行为逻辑 CSS样式

<template>
    <div>
        <!-- template模板,只能有一个根标签 --> 
    <div>
</template>
        
<script>//行为处理逻辑
import HelloWorld from './components/HelloWorld'

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

<style>
/* CSS样式 */
#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>

注意CSS作用域,自组建的CSS会覆盖父组件的样式。解决方法:<style scoped>,系统自动加入识别的字符串。

传值

传值:具体数值(数值,布尔值,字符串)

传引用:数组或对象 相当于C语言中的指针

父组件向子组件传值
  1. 父组件中把调用子组件的地方绑定事件:v-bind:message="message"
  2. 子组件用props接收:

    props: {
        message: {
          type: Object,
          required: true,
        }
    }
子组件向父组件传值(事件传值)
  1. 父组件进行接收

    <son v-on:fatherChange="changeElement(value)"></son>
    
    methods:{
        changeElement:function(value){
            this.message = value
        }
    }
  2. 子组件定义一个事件

    methods:{
        changeFather:function(){
        this.$emit("fatherChange","子组件传给父组件的值")//自定义事件
        }
    }

Vue路由

有点:能够优化,提高性能,减少网络请求

路由的配置

路由守卫

三种形式:全局守卫 组件内守卫 路由独享的守卫

全局守卫:

router.beforeEach((to,from,next) => {    //to 进入那个路由 form从哪个路由离开 next 函数
    if (to.path === '/login' || to.path === '/register') {
        next();
    } else {
        alert("您还未登录,请先登录");
        next('/login');
    }
})

导航守卫

router.afterEach((to,form) => {        //后置钩子
    
})

跨域请求

~~End Of File~~

本文永久链接:https://blog.xmgspace.me/archives/vue-learning.html

本文文章标题:Vue学习笔记分享

本站欢迎转载与引用~但您需要注明文章标题与链接,并表明转载/引用自Xiaomage's Blog。

授权协议:署名-非商业性使用-相同方式共享 4.0 国际(CC BY 4.0)

标签:前端 , Vue.js

还没有人评论哦,还不快抢沙发~

添加新评论

i_f01.pngi_f02.pngi_f03.pngi_f04.pngi_f05.pngi_f06.pngi_f07.pngi_f08.pngi_f09.pngi_f10.pngi_f11.pngi_f12.pngi_f13.pngi_f14.pngi_f15.pngi_f16.pngi_f17.pngi_f18.pngi_f19.pngi_f20.pngi_f21.pngi_f22.pngi_f23.pngi_f24.pngi_f25.pngi_f26.pngi_f27.pngi_f28.pngi_f29.pngi_f30.pngi_f31.pngi_f32.pngi_f33.png