Vue学习-笔记（初学）

最新推荐文章于 2024-04-26 22:33:55 发布

猿来乐

最新推荐文章于 2024-04-26 22:33:55 发布

阅读量308

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44998052/article/details/112788226

版权

Vue

1.vue的判断循环

v-if: 用来控制页面元素是否展示底层控制是DOM元素操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            ok: true
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            items:[
                {message:"java"},
                {message:"java1"},
                {message:"java2"},
                {message:"java3"}
                ]
        }
    });
</script>
</body>
</html>

2.绑定事件

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            message:"haipeng"
        },
        methods:{//方法必须在vue的methods中
            sayHi:function (event){
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>
<body>

</body>
</html>

总结:

	事件  事件源:发生事件dom元素  事件: 发生特定的动作  click....  监听器  发生特定动作之后的事件处理程序 通常是js中函数
	1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click
	2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
	3.在vue中事件的函数统一定义在Vue实例的methods属性中
	4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据
	简化写法为日后在vue中绑定事件时可以通过@符号形式 简化  v-on 的事件绑定

v-show:用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

3.vue的七个属性

el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算
watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，

4.双向数据绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    输入文本：<input type="text" v-model="message">{{message}}
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
           message:""
        },
        methods:{
            }

    });
</script>
</body>
</html>
<body>

</body>
</html>

总结

	1.使用v-model指令可以实现数据的双向绑定 
	2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   v5.vue组件（数组遍历）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <hp v-for="item in items" v-bind:chp="item"></hp>
</div>
<script>
    Vue.component("hp",{
        props:['chp'],
        template: '<li> {{chp}}</li>'
    });
    let vue = new Vue({
        el:"#app",
        data:{
            items:["java","c","python"]
        },

    });
</script>
</body>
</html>
<body>

</body>
</html>

6.网络通信：jquary.ajax和Axios

用在浏览器和node.js异步通信框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="vue">

    </div>
<script>
    var vm=new Vue({
        el:"#vue",
        mounted(){//钩子函数 链式编程
            axios.get('../data.json').then(response=>(console.log(response.data)))
        }
    })
</script>
</body>
</html>

渲染到浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="vue">
            {{info.name}}
    </div>
<script>
    var vm=new Vue({
        el:"#vue",
        data(){
            return{
                info:{
                    name:null,
                    adress:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted(){//钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    })
</script>
</body>
</html>

解决闪烁模板问题

<style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

    <div id="vue" v-cloak>
            {{info.name}}
    </div>

10.2.1 GET方式的请求

	  //发送GET方式请求
    axios.get("http://localhost:8989/user/findAll?name=xiaochen").then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    });

10.2.2 POST方式请求

		//发送POST方式请求
    axios.post("http://localhost:8989/user/save",{
        username:"xiaochen",
        age:23,
        email:"xiaochen@zparkhr.com",
        phone:13260426185
    }).then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    });

10.2.3 axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

 //1.创建一个查询所有请求
    function findAll(){
        return axios.get("http://localhost:8989/user/findAll?name=xiaochen");
    }

    //2.创建一个保存的请求
    function save(){
        return axios.post("http://localhost:8989/user/save",{
            username:"xiaochen",
            age:23,
            email:"xiaochen@zparkhr.com",
            phone:13260426185
        });
    }

    //3.并发执行
    axios.all([findAll(),save()]).then(
        axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理
            console.log(res1.data);
            console.log(res2.data);
        })
    );//用来发送一组并发请求

7.计算属性

将计算出来的结果保存在属性中。内存中运行：虚拟dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <p>
        {{currentTime()}}
    </p>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            message:"chp"
        },
        methods:{
            currentTime:function (){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性，不能重名和方法，重名后调用了方法中的函数，调用不需要打括号{{currentTime}}
            currentTime1:function (){//可以把值存在属性中，而方法每次都要调用计算。结果不常变化就可以缓存起来
                return Date.now();//返回一个时间戳
        }
        }
    });
</script>
</body>
</html>

7.1生命周期（补充）

8.插槽

第一个插槽程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title":title="title">

        </todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems":item="item">

        </todo-items>
    </todo>
</div>
<script>
    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>'
    })
    let vue = new Vue({
        el:"#app",
        data :{
            title:"chp",
            todoitems:["chp","chp","chp"]

        }

    });
</script>
</body>
</html>

9.自定义事件内容分发

splice():方法是修改array的万能方法，他可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素

例：arr.splice(2，3)//在下标为2的地方删除三个元素

10.vur-cli

vue-cli是官方提供的一个脚手架

什么是cli

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

Vue CLI安装

环境准备

#1.下载nodejs
http://nodejs.cn/download/
windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录
mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

#2.配置nodejs环境变量
windows系统:
1.计算上右键属性----> 高级属性 ---->环境变量添加如下配置:
NODE_HOME= nodejs安装目录
PATH = xxxx;%NODE_HOME%
2.macos 系统
推荐使用.pkg安装直接配置node环境

#3.验证nodejs环境是否成功
node -v

#4.npm介绍
node package mangager nodejs包管理工具前端主流技术 npm 进行统一管理
maven 管理java后端依赖远程仓库(中心仓库) 阿里云镜像
npm 管理前端系统依赖远程仓库(中心仓库) 配置淘宝镜像

#5.配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm config get registry

#6.配置npm下载依赖位置
windows:
npm config set cache “D:\nodereps\npm-cache”
npm config set prefix “D:\nodereps\npm_global”
mac os:
npm config set cache “/Users/chenyannan/dev/nodereps”
npm config set prefix “/Users/chenyannan/dev/nodereps”

#7.验证nodejs环境配置
npm config ls
//验证
; userconfig /Users/chenyannan/.npmrc
cache = “/Users/chenyannan/dev/nodereps”
prefix = “/Users/chenyannan/dev/nodereps”
registry = “https://registry.npm.taobao.org/”

2.安装脚手架

#0.卸载脚手架
	npm uninstall -g @vue/cli  //卸载3.x版本脚手架
	npm uninstall -g vue-cli  //卸载2.x版本脚手架

#1.Vue Cli官方网站
		https://cli.vuejs.org/zh/guide/

#2.安装vue Cli
		npm install -g vue-cli

3.第一个vue脚手架项目

# 1.创建vue脚手架第一个项目
	vue init webpack 项目名
# 2.创建第一个项目
	hello     ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖
    -config ------------->用来做整个项目配置目录
    -node_modules  ------>用来管理项目中使用依赖
    -src					 ------>用来书写vue的源代码[重点]
    	+assets      ------>用来存放静态资源 [重点]
      components   ------>用来书写Vue组件 [重点]
      router			 ------>用来配置项目中路由[重点]
      App.vue      ------>项目中根组件[重点]
      main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

# 3.如何运行在项目的根目录中执行
		npm start 运行前端系统

# 4.如何访问项目
		http://localhost:8081    

# 5.Vue Cli中项目开发方式
	 注意: 一切皆组件   一个组件中   js代码  html代码  css样式
	 
	 	1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
	 	2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

15.在脚手架中使用axios

15.1 安装axios

# 1.安装axios
	npm install axios --save-dev

# 2.配置main.js中引入axios
	import axios from 'axios';

	Vue.prototype.$http=axios;

# 3.使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

16.Vue Cli脚手架项目打包和部署

# 1.在项目根目录中执行如下命令:
	  vue run build

		注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中变化
	 	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

# 3.

this.$route.query.id//取路由的id
this.$router.push("/路径")//切换路由

11.打包

12.vue vue-router 路由
教程使用狂神说和编程不良人
在此感谢
部分空缺以后填坑吧