最近一直在学习Vue，为今后网站的校园卡前端项目打基础。我在这里分享一下我的Vue学习笔记，现在还不是很完整，后面我会不断地进行补充的。
Vue基础（前面简单补充）
Vue的引入：
- 本地引入
<script src="./js/vue.js"></script> - 使用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对象生成之前 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语言中的指针
父组件向子组件传值
- 父组件中把调用子组件的地方绑定事件：
v-bind:message="message" - 子组件用props接收：
props: { message: { type: Object, required: true, } }
子组件向父组件传值（事件传值）
-
父组件进行接收
<son v-on:fatherChange="changeElement(value)"></son> methods:{ changeElement:function(value){ this.message = value } } -
子组件定义一个事件
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) => { //后置钩子
})
