Vue后端学习笔记（自用）
Vue后端学习笔记（自用）
文章目录
- Vue后端学习笔记（自用）
-
- 1.入门
- 2.v-text与v-html
- 3.v-show
- 4.事件修饰符
- 5.Vue生命周期
- 6.component
- 7. 子组件的一些注意点
- 8. vue-router
- 9.嵌套路由
- 10.Vue脚手架
全篇建议结合实例食用~
1.入门
环境准备（二选一）：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!--生产环境-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
第一个入门案例：el、data、{{}}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>helloworldtitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
{{msg}}
<br>
<span>
{{msg}}
span>
<h3>{{user.name}}h3>
<h3>{{lists[1]}}h3>
<h3>{{users[1].name}}h3>
{{msg.toUpperCase()}}
<br>
{{user.msg == 6}}
div>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"cui",
user:{name:"cuihua",msg:"6"},
lists:["sx","bj","tj"],
users:[{name:"c",msg:"1"},{name:"h",msg:"2"}]
}
});
script>
body>
html>
1.el属性：代表Vue的作用范围（在Vue的作用范围内都可以使用Vue的语法）
2.data属性:给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
2.v-text与v-html
<body>
<div id="app">
<span>{{message}},666span>
<br>
<span v-text="message">,666span>,这样不会被覆盖了~
<br>
<span v-html="web">没有显示span>
<br>
<br>
<h2>年龄：{{age}}h2>
<br>
<input type="button" value="点我加年龄" v-on:click="changeage">
<input type="button" value="点我减年龄" @click="changeagej">
<br>
<h1>{{count}}h1>
<input type="button" value="点我改变count" @click="change" >
div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"cui",
web:"web",
age:23,
count:10
},
methods:{
changeage:function (){
// alert('点击触发');
// console.log(this);
this.age++;
},
// changeagej:function (){
// this.age--;
// }
changeagej(){
this.age--;
},
change(c){
this.count = 1;
}
}
});
script>
body>
v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
事件源：发生事件dom元素
事件：发生特定的动作 click… 监听器 发生特定动作之后的事件处理程序 通常是js中函数
3.v-show
<body>
<div id="app">
<h1 v-show="isShow">看见我了吗？h1>
<input type="button" value="点我隐藏/显示" @click="showHide">
<br>
<h1 v-if="false">不推荐h1>
<br>
<img width="300px" v-bind:title="title" src="(某图片地址)">
<br>
<span v-for="u,index in users">
{{index}} {{u.name}},{{u.age}}
<br>
span>
<br>
<span>
<li v-for="u,index in users" :key="u.id">
{{index}} || {{u.name}},{{u.age}}
li>
span>
<br>
<input type="text" v-model="message">
<span>{{message}}span>
<br>
<input type="button" value="点我改变message的值" @click="changeMessage">
div>
<script>
const app = new Vue({
el:"#app",
data:{
isShow:true,
title:"cui",
users:[
{id:1,name:"cui",age:24},
{id:2,name:"liu",age:18}
],
message:""
},
methods:{
showHide(){
this.isShow = !this.isShow;
},
changeMessage(){
this.message = "双向绑定";
}
}
});
script>
body>
4.事件修饰符
<body>
<div id="app">
<div class="aa" @click.self="divClick">
<input type="button" value="按钮" @click.stop="btnClick">
<input type="button" value="按钮1" @click="btnClick1">
div>
<br>
<a href="https://www.csdn.net/" @click.prevent.once="prevent">阻止a>
<br>
<input type="text" v-model="msg" @keyup.enter="keyups">
<input type="text" @keyup.tab="keytabs">
<input type="text" @keyup.delete="keytabs">
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:""
},
methods: {
divClick(){
alert("div");
},
btnClick(){
alert("button被点击");
},
prevent(){
alert("被阻止了一次");
},
btnClick1(){
alert("self用了~");
},
keyups(){
console.log(this.msg);
},
keytabs(){
console.log(this.msg);
}
}
});
script>
body>
5.Vue生命周期
结合图片食用：
#######################################################
<body>
<div id="app">
<span id="sp">{{msg}}span>
<input type="button" value="修改" @click="changeData">
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:"cui"
},
methods: {
changeData(){
this.msg = "666";
}
},
//初始化阶段
beforeCreate(){//1.执行时Vue实例仅完成了自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没有el、data等属性
console.log("beforeCreate" + this.msg);
},
created(){//2.Vue实例中已经初始化了el、data等属性
console.log("created" + this.msg);
},
beforeMount(){//3.Vue将el中指定作用范围作为模板编译
console.log("beforeMount " + document.getElementById("sp").innerText);
},
mounted(){//4.将数据渲染到界面并已经更新页面
console.log("Mounted " + document.getElementById("sp").innerText);
},
//运行阶段
beforeUpdate(){//5.data数据发生变化时执行：此时仅仅是data数据发生变化，显示的数据仍为原始数据
console.log("beforeUpdate data数据："+ this.msg);
console.log("beforeUpdate 显示数据：" + document.getElementById("sp").innerText);
},
updated(){//6.data数据发生变化时执行：页面与data一致了
console.log("updated" + this.msg);
console.log("updated " + document.getElementById("sp").innerText);
},
//销毁阶段
beforeDestory(){//7.Vue数据销毁，methods、component还未销毁
},
destory(){//8.Vue彻底销毁
}
});
script>
body>
6.component
<body>
<div id="app">
<registry>registry>
<login user-name="cui" v-bind:age="age" :data="data" :name="name">login>
<delet>delet>
div>
<template id="deletTemplate">
<h3>deleth3>
template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
//全局组件：任意vue实例均可用
Vue.component("registry", {
template: "c
"
}
)
//局部组件一
let login = {
template: "欢迎：{{userName}}、{{age}}、{{data}}、{{name}}
" +
"
" +
"",
props: ["userName", "age", "data"], //若父组件中也有name，则子组件中不能再有name，否则会改变父（单向数据流）
data(){
return{
name:"自己的data" //定义自己的内部数据
};
},
methods:{
change(){
alert("自己的函数");
}
}
}
//局部组件二
let delet = {
template: "#deletTemplate",
}
const app = new Vue({
el: "#app",
data: {
age: 24,
data: "2000"
},
methods: {},
components: {
"login": login,
"delet": delet
}
});
script>
body>
7. 子组件的一些注意点
<body>
<div id="app">
<login :cdname="fname" @cdfind="find">login>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
const login = {
template:"{{sname}}
",
data(){
return{
sname:this.cdname + " is good" //这样子组件可在不干扰父组件的情况下进行修改
}
},
props:["cdname"], //类似于传参
methods:{
sfind(){
this.$emit("cdfind"); //调用传递的方法
}
}
}
const app = new Vue({
el: "#app",
data: {
fname:"father"
},
methods: {
find(){
alert("find");
}
},
components:{
login
}
});
script>
body>
8. vue-router
<body>
<div id="app">
<router-link to="/login?id=21" tag="button">点我登录router-link>
<router-link to="/registry/24" tag="button">点我注册router-link>
<router-view>router-view>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js">script>
<script>
const login = {
template: "login
",
data(){return{}},
methods:{},
created(){
console.log(this.$route.query.id); //传递参数一： ?query
}
};
const registry = {
template: "registry
",
created() {
console.log(this.$route.params.id); //传递参数二： :param
}
};
const router = new VueRouter({
routes:[
{path: "/",redirect:"/login"}, //默认路由,推荐用redirect
{path:"/login",component:login},
{path:"/registry/:id",component: registry}
]
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
router
});
script>
body>
9.嵌套路由
<body>
<div id="app">
<router-link to="/product">商品管理router-link>
<router-view>router-view>
div>
<template id="product">
<div>
<h1>商品管理h1>
<router-link to="/product/add">商品添加router-link>
<router-link to="/product/edit">商品编辑router-link>
<router-view>router-view>
div>
template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js">script>
<script>
const product={
template:"#product"
}
const add={
template:"商品添加
"
}
const edit={
template:"商品编辑
"
}
const router=new VueRouter({
routes:[
{
path:"/product",
component:product,
children:[
{path:"add",component: add},
{path:"edit",component: edit}
]
}
]
})
const app = new Vue({
el: "#app",
data: {},
methods: {},
router
});
script>
body>
10.Vue脚手架
1.安装nodejs：https://nodejs.org/en/
配置：
- windows系统
- 设置–>高级系统设置–>环境变量–>系统变量–>新建:
NODE_HOME - Path–>新建:
%NODE_HOME%
- 设置–>高级系统设置–>环境变量–>系统变量–>新建:
- mac os系统
- 推荐使用.pkg安装直接配置node环境
检验：node -v
node package mangager
nodejs包管理工具 前端主流技术 npm 进行统一管理
maven 管理java后端依赖 远程仓库（中心仓库） 阿里云镜像
npm 管理前端系统依赖 远程仓库（中心仓库） 配置淘宝镜像
2.安装npm
配置：
配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm config get registry
配置npm下载依赖位置
npm config set cache "D:/nodereps/npm-cache"
npm config set prefix "D:/nodereps/npm_global"
检验：npm config ls
用管理员模式的powershell进行
若安装后测试出现：vue不是内部或外部命令（打开node.js所在目录,搜索vue.cmd,复制路径,在环境变量的Path中配置）
3.安装脚手架：npm install -g @vue/cli
验证：cmd中输入vue
4.创建项目：
vue init webpack 项目名
在项目目录中运行：
npm start
在vue cli中一切皆组件
目录显示：
src 用来书写vue的源代码[重点]
assets 用来存放静态资源[重点]
components 用来书写Vue组件[重点]
router 用来配置项目中路由[重点]
App.vue 项目中根组件[重点]
main.js 项目中主入口[重点]
5.在脚手架中安装axios：
npm install axios --save-dev
在main.js中引入：
import axios from 'axios';
Vue.prototype.$http=axios;
6.项目打包部署
vue run build
在打包之后项目中出现dist目录,
dist目录就是vue脚手架项目生产目录或者说是直接部署目录