文章目录
1、Vue核心
针对于后端快速学习（复习）vue
针对于后端快速学习（复习）vue
针对于后端快速学习（复习）vue
使用的均为vue2
安装vue开发者工具
链接：https://pan.baidu.com/s/1nuARmNkUNLWHY_humQaxEw?pwd=tnnd
提取码：tnnd
1、插值语法
Vue⽀持把Vue中的数据绑定到html标签上，使⽤插值语法 动态改变数据
语法格式：{{ 属性名 }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插值语法</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建vue实例
var app = new Vue({
el: "#app",
data: {
message: "测试"
}
});
</script>
</body>
</html>
如果内容包含了html标签，那么需要使⽤v-html=“属性名”.
vue ⻚⾯内部有三部分组成：
1.模板：html标签
2.script：js代码
3.style：css样式
2、双向绑定
指的是v-model,⽤在表单标签（input、select、textarea ⽤户可以输⼊内容）
语法格式：v-model="属性名
如何使用：
<body>
<div id="app">
<input v-model="doble"></input>
<label>{{doble}}</label>
<select v-model="car">
<option>保时捷</option>
<option>奥迪</option>
<option>红旗</option>
<option>宝马</option>
</select>
<h1>{{car}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
doble: "双向绑定",
car: '奥迪'
},
methods: {
}
});
</script>
</body>
3、分支
Vue中也提供了分支语句，相当于Java中的if语句，v-if可以实现条件判断
语法格式：v-if="boolean属性名" v-else-if="boolean类型" v-else
如何使用：
sex==1时 显示:男
<body>
<div id="app">
<h1 v-if="sex==1">男</h1>
<h2 v-else-if="sex==2">女</h2>
<h2 v-else>无效</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
sex: 1
}
});
</script>
</body>
4、循环
Vue提供了循环操作，相当于Java中的for循环，v-for，可以实现数组的遍历等
语法格式：v-for="变量 in 数组"
如何使用：
<body>
<div id="app">
<div><h1 v-for="l in arr">{{l}}</h1></div>
<select >
<option v-for=" l in all">{{l}}</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: [
'沟霸1',
'沟霸2',
'沟霸3'
],
all: [
"下拉1",
"下拉1",
"下拉1",
"下拉1"
]
}
});
</script>
</body>
5、 事件绑定
Vue提供了对标签事件的函数绑定，采⽤v-on:事件名=“函数名”
语法格式：
V-on:事件名="函数名" 简写形式：@事件名="函数名"
使用:
<body>
<div id="app">
<h1>{{num}}</h1>
<button @click="big()" >加一</button>
<div >
<button id="btn1" @click="bigsize()" >变大</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var w=100
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
big(){
this.num++
},
bigsize(){
w+=20
document.getElementById("btn1").style.width=w+"px";
document.getElementById("btn1").style.height=w+"px";
}
}
});
</script>
</body>
6、属性绑定
v-bink: 绑定html属性
语法格式：
V-bind:标签属性名="变量名" 简写形式 :标签属性名="变量名"
<button v-bind:id="bind"></button>
7、组件
自定义标签，目的实现复用，减少重复的工作
<body>
<!--2.绘制标签，页面-->
<div id="app">
<!-- 3.组件的使用-->
<k></k>
</div>
<script>
// 1.组件的定义
Vue.component('k', {
data: function () {
return {
user:{
name:"admin",
password:"8888888"
}
}
},
//2.设置模板
template: `
<div>
<div>
<h2>欢迎登录</h2>
<form>
<div>
<label>账号：</label><input v-model="user.name">
</div>
<div>
<label>密码：</label><input type="password" v-model="user.password">
</div>
<h1>{{user.name}}</h1>
<h1>{{user.password}}</h1>
</form>
</div>
</div>
`
})
// <!-- 3.js 完成Vue创建-->
var app = new Vue({
el: '#app',//绑定到指定标签上（div）
})
</script>
</body>
8、核心总结
{{插值语法}}：标签绑定变量
v-if：判断的时候
v-for：循环的时候
v-on：绑定事件，设置事件：点击、内容改变
v-model：双向绑定，表单标签（input select teatarea）数据绑定
v-html：标签绑定变量，针对变量的内容有html标签
v-bind：绑定属性，标签的属性，动态变化
Vue组件：⾃定义标签，实现复⽤
2、安装Vue-Cli
卸载命令
npm uninstall vue-cli -g
cnpm uninstall @vue/cli -g
where vue 删除出现的两个文件
1、首先安装node.js
无脑下一步，选择Add to PATH自动配置境变量
出现即安装成功
node -v
npm -v
2、设置安装路径
设置npm安装程序时的默认位置
npm config set prefix "E:\JavaDevelop\Vue\node_global"
设置npm安装程序时的缓存位置
npm config set cache "E:\JavaDevelop\Vue\node_cache"
配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
查看镜像
npm config get registry
3、安装vue-cli
npm install -g @vue/cli
查看是否安装成功
vue -V
4、Vue-cli 创建Vue项⽬
1.创建Vue项⽬
vue create 项目名
2.设置项⽬信息
选择⾃定义选项
选择需要的，去除不需要的
只要Babel模块
3.选择Vue的版本
4.设置配置⽂件
5.设置是的需要保存为模板
6.进入目录测试
访问路径成功即创建成功
核心命令
1.vue create 项⽬名:创建Vue项⽬
2.npm run serve:运⾏Vue项⽬
3.npm install xxx:下载js库
4.npm run build:打包项⽬
3、在idea中创建标准的Vue-cli
1、vue create 项目名
2、选择模块
稍后会说明：Router,Vuex
3、选择vue版本
4、选择.json
5、创建成功
6、运行成功
项目结构
4、Vue-Router
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括
-
嵌套路由映射
-
动态路由选择
-
模块化、基于组件的路由配置
-
路由参数、查询、通配符
-
展示由 Vue.js 的过渡系统提供的过渡效果
-
细致的导航控制
-
自动激活 CSS 类的链接
-
HTML5 history 模式或 hash 模式
-
可定制的滚动行为
-
URL 的正确编码
Vue项⽬中，想要实现⻚⾯跳转，必须使⽤Vue-Router。因为Vue项⽬是单⻚⾯，就只有⼀个Html⻚
⾯，所以a标签没法使⽤
使用步骤
在idea创建项目之后默认在main.js文件中导入了router
1、注册
导包
2、跳转
//动态路由
this.$router.push("/about");
//实现跳转并传递参数 对应path
this.$router.push({path:"/about",query:{msg:this.router}})
//实现跳转并传递参数 对应name
this.$router.push({name:"about",params{msg1:this.router1}})
3、接收参数
<!-- query的取参数-->
<h1>{{this.$route.query.msg}}</h1>
<!-- params取参数-->
<h1>{{this.$route.params.msg1}}</h1>
5、Vue-Vuex
简介：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
1、Vuex核心
1.五个组成部分
state：存储数据，状态
mutation：更改state中定义的数据，内部定义函数实现修改
action：调⽤mutation的⽅法，适合处理mutation中⽅法耗时，因为⽀持异步
getter：对state的数据进⾏⼆次处理，内部定义函数，实现数据的⼆次处理
modules：针对有⼤对象的state进⾏拆分
2、Vuex使用
1、定义
2、获取数据
<!-- Vuex 获取数据-->
<h1>获取数据:{{this.$store.state.test}}</h1>
3、修改数据
//改变vuex属性
this.$store.commit('setTest',this.g)
Visual Studio Code 设置 Vue模板
1.vue.code-snippets
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"",
"export default {",
"name:'',",
"components: {},",
"props:{},",
"data() {",
"return {",
"",
"};",
"},",
"computed: {},",
"watch: {},",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"}",
"</script>",
"<style lang='scss' scoped>",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
2.vue.json.code-snippets
{
"vue": {
"prefix": "vue",//关键字
"body": [//对应代码片段
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<title>vueApp</title>",
"</head>",
"",
"<body>",
"\t<div id=\"app\">",
"",
"\t</div>",
"\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
"\t<script>",
"\t\tvar app = new Vue({",
"\t\t\tel: \"#app\",",
"\t\t\tdata: {",
"",
"\t\t\t},",
"\t\t\tmethods: {",
"",
"\t\t\t}",
"\t\t});",
"\t</script>",
"</body>",
"",
"</html>"
],
"description": "vue snippet"
}
}
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
