VUE学习
一、开始
1、导入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2、使用
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello"
}
});
</script>
el：元素
data：数据使用方法为— {{字段名}}
v-bind:title="message"
v-bind开头的被称为指令。
会在dom上应用特殊的响应式行为
二、判断-循环（显示）
1、判断
<h1 v-if="ok">YES</h1>
<h1 v-else="ok">No</h1>
<!--ok这个属性为布尔值-->
<!--在标签中进行判断-->
<h1 v-if="socre==='A'">A</h1>
<h1 v-else-if="socre==='B'">B</h1>
<h1 v-else>C</h1>
2、循环
使用
<!--使用v-for="（参数1，参数2） in 数组"-->
<li v-for="info in list">
{{info.message}}
</li>
vue代码
var vm = new Vue({
el:"#app",
data:{
list:[
{message: '运维'},
{message: '后端'},
{message: '前端'},
]
}
});
三、事件
1、v-on
该指令可以监听dom事件
<button v-on:click="hello">点我</button>
methods: {
hello: function(){
alert(this.message);
}
},
vue中方法定义在methods中
2、双向绑定
在标签中引用 v-model=“字段名” 绑定字段
输入文本：<input type="text" v-model="message" />{{message}}
var vm = new Vue({
el:"#app",
data:{
message:"22"
}
});
<!--多行文本输入框-->
<textarea rows="10" cols="30" v-model="message"></textarea>{{message}}
<!--单选框-->
性别：<input type="radio" name="sex" id="boy" value="男" v-model="checked" />男
<input type="radio" name="sex" id="girl" value="女" v-model="checked" />女
<p>
选中了: {{checked}}
</p>
<!-- 下拉框 -->
<select name="zm" v-model="checked">
<option value ="A" >A</option>
<option value ="B" >B</option>
<option value ="C" >C</option>
<option value ="D" >D</option>
</select>
选择了：{{checked}}
四、组件
1、主要属性
props：接收参数
template：模板
定义：自定义标签
Vue.component("bango",{
template: '<span>hello</span>'
});
使用bango标签即可获取模板内容
**作用：**方便复用
例子：
//定义自定义标签的模板，使用props来获取值
Vue.component("bango",{
props: ['kc'],
template: '<li>{{kc}}</li>'
});
//设置data的值
var vm = new Vue({
el:"#app",
data:{
list: [
"java","Python","C++"
]
},
});
使用：
<bango v-for=" info in list" v-bind:kc="info"></bango>
<!--v-bind:后面接的是props绑定的参数名，双引号中为遍历出来的参数名称-->
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-68CkLYcI-1637746086748)(C:\Users\AOC\AppData\Roaming\Typora\typora-user-images\image-20211119165815853.png)]
3、vue的生命周期
钩子函数：
在流程中间的某个过程前后执行一个操作，
beforeCreat，created，beforeMount，mounted，updated，beforeDestroy，destroyed
五、Axios请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
链式编程，ES6
axios.get('./data.json').then(response=>(console.log(response.data)));
在data()方法中使用return来获取数据
var vm = new Vue({
el: "#vue",
data(){
return{
//请求的返回参数格式和json字符串一样
info: {
name: null,
address: {
street: null,
city: null,
country: null
},
links: [],
}
}
},
//钩子函数
mounted(){
axios.get('./data.json').then(response=>(this.info=response.data));
}
});
在html中使用v-bind来获取数据
六、计算属性
虚拟dom，放在内存中。
与methods相似,methods和computed重名优先使用methods中的方法，
methods: {
currentTime1: function(){
return Date.now();
}
},
//计算属性---缓存
computed: {
currentTime2: function(){
return Date.now();
}
}
<!--methods调用为方法，computed为属性调用-->
<p>{{currentTime1()}}</p>
<p>{{currentTime2}}</p>
七、插槽
//slot插槽
Vue.component("todo",{
template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
});
//标题
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
//列表内容
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}}</li>'
});
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="info in todoItems" :item="info"></todo-items>
<slot></slot>
</todo>
插槽的使用为了使数据动态增加
八、自定义事件–参数分发
组件内部调用方法
//列表内容
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}} <button @click="remove()">删除</button></li>',
methods: {
remove: function(){
alert('确定要删除吗？');
}
}
});
在组件的标签中定义方法并在模板中使用
使用this.$emit(‘自定义事件’，参数)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDb1Ar6c-1637746086754)(C:\Users\30583\AppData\Roaming\Typora\typora-user-images\image-20211123105422388.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE3</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(info,index) in todoItems"
:item="info" :index="index" @remove="removeItems(index)" ></todo-items>
<slot></slot>
</todo>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//slot插槽
Vue.component("todo",{
template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
});
//标题
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
//列表内容
Vue.component("todo-items",{
props:['item','index'],
template:'<li>{{index}}---{{item}} <button @click="remove()">删除</button></li>',
methods: {
remove: function(index){
this.$emit('remove',index);
}
}
});
var vue = new Vue({
el: "#app",
data: {
title:"标题123",
todoItems:['Java','Python','前端']
},
methods: {
removeItems: function(index){
console.log("删除了"+this.todoItems[index]+"...OK")
this.todoItems.splice(index,1);//一次删除一个
}
}
});
</script>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nqIqEIwR-1637746086755)(C:\Users\30583\AppData\Roaming\Typora\typora-user-images\image-20211123105952658.png)]
组件使用vue中的方法需通过前端
九、创建vue-cli项目
1、环境
Node.js：http://nodejs.cn/download/
安装就是无脑的下一步就好，安装在自己的环境目录下
#验证环境
node -V
npm -V
#配置安装cnpm
# -g 就是全局安装
npm install cnpm -g
#安装vue-cli
cnpm instal1 vue-cli-g
#验证
vue list
2、创建项目
在目录中新建一个文件夹-用于存放项目
#1、首先需要进入到对应的目录 cd D:\Project\vue-study
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue
创建一个webpack项目
Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！
#下载依赖也可以使用cnpm
npm install
#运行项目
npm run dev
3、项目目录说明
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o7HaGt1l-1637746086756)(C:\Users\30583\AppData\Roaming\Typora\typora-user-images\image-20211124141253699.png)]
十、WebPack
1、安装webpack
npm install webpack -g
npm install webpack-cli -g
#测试安装成功
webpack -v
webpack-cli -v
2、配置
webpack.config.js
entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
output：输出， 指定WebPack把处理完成的文件放置到指定路径
module：模块， 用于处理各种类型的文件
plugins：插件， 如：热更新、代码重用等
resolve：设置路径指向
watch：监听， 用于设置文件改动后直接打包
module.exports={
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
};
3、打包
需要使用管理员权限
命令：
webpack
# 参数--watch 用于监听变化，实时打包
#热部署
webpack --watch
4、模块化开发流程
编写js方法，使用模板开发
//hello.js
//暴露一个方法
exports.sayHi = function (){
document.write("<h1>Hello</h1>")
}
//main.js
//设置为入口
import hello from "./hello";
hello.sayHi();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- html页面只需要引入打包好的js文件即可 -->
<script src="dist/js/bundle.js"></script>
</body>
</html>
十一、路由vue-router
1、下载
在程序中管理员运行
cnpm install vue-router --save-dev
2、引用
//在main.js中使用
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
// 显式声明使用VueRouter
Vue.use(VueRouter);
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
3、路由实例
首先创建两个vue页面
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style>
</style>
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: 'Content'
}
</script>
<style>
</style>
创建路由index.js
配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(VueRouter);
//配置导出
export default new VueRouter({
routes:[
{
//路径
path: '/content',
//名称
name: 'content',
//跳转的组件
component: Content
},{
//路径
path: '/main',
//名称
name: 'main',
//跳转的组件
component: Main
}
]
});
在main方法中引用
import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描路由配置
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
export default new VueRouter({
routes:[
{
//路径
path: ‘/content’,
//名称
name: ‘content’,
//跳转的组件
component: Content
},{
//路径
path: ‘/main’,
//名称
name: ‘main’,
//跳转的组件
component: Main
}
]
});
在main方法中引用
```javascript
import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描路由配置
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
