Vue入门学习笔记

Vue入门学习笔记

By王震 2019/11



杂记


父组件向子组件传值：

步骤1：组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    })
</script>

步骤2：使用v-bind或简化指令，将数据传递到子组件中

<div id="app">
    <son :finfo="msg"></son>
</div>

子组件向父组件传值

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

<script>
    Vue.component("box",{
        template:'<div><h1>{{number}}</h1><button @click="click">点击</button><div>',
        data(){
            return {
                number: 0
            }
        },
        methods:{
            click(){
                this.number++
                this.$emit("my-click",this.number)
            }
        }
	})

    new Vue({
        el:"#app",
        data:{
            n:0,
        },
        methods:{
            myClick(n){
                this.n = n
            }
        },
    })

</script>

<div id="app">
    <h1>{{n}}</h1>
    <box @my-click="myClick"></box>
</div>




Vue基础语法


常用指令

  • 在指令中不需要写插值表达式，直接写对应的数据变量即可
<div id="app">
    <sapn v-text="msg"></sapn>
	<span v-show="isShow"></span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: "这是数据msg,相当于对象中的属性",
      isShow: true,
    },
  })
</script>

v-on

用于绑定事件，可以简写为 @ ，相当于为组件绑定对象中的方法

<div id="app">
  <p>当前计数{{counter}}</p>
  <button v-on:click="add()">+</button>
  <button @click="sub">-</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      add() {
        this.counter++
      },
      sub() {
        this.counter--
      }
    }
  })
</script>

注意：

  • 事件监听没有参数时，v-on调用时可以不加()

  • 若写方法时省略了()但方法本身需要参数，这时候会将event对象传入方法

  • 若方法中需要使用event对象，又需要其它参数则用$event表示

<button @click="fn(123, $event)">+</button>

v-bind

用于动态绑定数据，可以简写为 : ，相当于为组件(标签)的属性绑定对象中的属性

<div id="app">
  <img width:"300px" :title="title" v-bind:src="src">
  
  <input type="button" value="点我改变title属性" @click="changeTitle('这是改变之后的title')">
  <input type="button" value="点我改变src属性" @click="changeSrc('https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg')">
 
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: "Vue中定义的title",
      src: 'https://img0.baidu.com/it/u=275475408,4194259033&fm=26&fmt=auto&gp=0.jpg',
    },
    methods: {
      changeTitle(value){
          this.title = value;
      },
      changeSrc(src){
          this.src = src;
      }
    }
  })
</script>

v-show 与 v-if

v-show 用于控制页面中的标签元素是否显示（底层通过控制元素的display属性来进行标签的显示与不显示）

<div id="app">
	<span v-show="isShow">这里有个span</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isShow: true,
    },
  })
</script>

v-if

v-if 用于控制页面中的标签元素是否显示（底层通过对dom树节点进行添加删除来控制标签的显示与不显示）


v-for

<div id="app">
    
    <!-- 在使用v-for时，vue官方建议我们使用 :key ,便于vue内部做重用和排序 -->
    
    <!-- 通过v-for遍历对象 -->
    <span v-for="(value, key, index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!-- 通过v-for遍历数组 -->
    <ul>
        <li v-for="a,index in arr">
            {{index}} - {{a}}
        </li>
    </ul>

    <!-- 通过v-for遍历对象数组 -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}}--{{user.name}}--{{user.age}}--{{user.contend}}
        </li>
    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {
                name: "小陈",
                age: "23"
            },
            arr: ["北京校区", "南京校区", "天津校区"],
            users: [{id: "1",name: "小王",age: "22",contend: "我来自河南洛阳"},
                    {id: "2",name: "小李",age: "23",contend: "我来自河南郑州"}],
        }
    })
</script>

注意：在使用v-for的时候一定要注意加入 :key 用来给vue内部提供重用和排序的唯一key​


v-model

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

<div id="app">
  <label><input type="radio" value="男" v-model="sex">男</label>
  <label><input type="radio" value="女" v-model="sex">女</label><br>
  <label><input type="checkbox" value="篮球" v-model="hobbies"> 篮球</label>
  <label><input type="checkbox" value="足球" v-model="hobbies"> 足球</label>
  <label><input type="checkbox" value="乒乓球" v-model="hobbies"> 乒乓球</label>
  <label><input type="checkbox" value="羽毛球" v-model="hobbies"> 羽毛球</label><br>
  <label><input type="checkbox" v-model="isAgree">我同意</label>
  <p>您选择的性别是: {{sex}}, 爱好是{{hobbies}}, 是否同意{{isAgree}}</p>
  <button :disabled="!isAgree">下一步</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      sex: '男',
      isAgree: false,
      hobbies: []
    }
  })
</script>

# 总结：
	1.使用v-model指令可以实现数据的双向绑定
	2.所谓双向绑定就是 表单中的数据变化 --> vue实例中data数据发生变化 --> 表单中绑定该数据的元素的数据发生变化，称之为双向绑定
	
# MVVM架构 双向绑定机制
	Model：数据	Vue实例中绑定的数据
	VM：ViewModel	监听器
	View：页面		页面展示的数据


事件修饰符

使用事件修饰符时，直接加在方法事件的后边即可 具体参考：


.stop

作用：阻止事件冒泡（例如当一个按钮在一个div中，当触发了按钮的点击事件时，事件会向外传播触发div的点击事件）

应用：<input type="button" value="按钮" v-on.click.stop='func'/>


.prevent

作用：阻止事件的默认行为（例如点击超链接会跳转到里一个页面）

应用：<a href="https://www.baidu.com/" @click.prevent= "func" />


.self

作用：只触发标签自身的事件，不再触发由冒泡等方式传递过来的事件


.once

作用：让指定的事件只触发一次，即方法只执行一次

应用：<a href="https://www.baidu.com/" @click.prevent.once= "func" />


更多参考官网



按键修饰符

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

应用

<input type="text" v-model="msg" @keyup.enter="keyups"> （当enter键抬起时触发）

<input type="text" @keyup.tab="keytabs">（当tab键抬起时触发）




Axios基本使用

引言

Axios 是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中渲染

链接

中文官方网站：http://www.axios-js.com/zh-cn/docs/

安装：https://unpkg.com/axios/dist/axios.min.js 或者使用npm


Get方式的请求

// 为给定 ID 的 user 创建请求
axios.get('http://localhost:8089/user?ID=12345').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

Post方式的请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));



Vue组件


组件基础

作用

用来减少Vue实例对象中的代码代码量，日后在使用vue开发过程中，可以根据不同业务功能将页面划分为不同的多个组件，然后由多个组件去完成整个页面的布局


组件使用


全局组件注册

说明

使用全局组件注册给Vue实例，以后可以在任意Vue实例的范围内使用该组件

使用

//1.注册全局组件
Vue.component('userLogin',{
    template: '<div><h1>用户登录-全局组件</h1></div>'
})

<!-- 2.使用全局组件 在Vue实例范围内 -->
<div id="app">

    <!-- 使用全局组件 -->
    <user-login></userLogin>

</div>

# 注意：
	1.Vue.component 用来开发全局组件 参数1:组件的名称  参数2: 组件配置{}  template: ''用来书写组件的HTML代码  template中必须有且只有一个root元素
	2.使用时需要在Vue的作用范围内根据组件名使用全局组件
	3.如果再注册组件过程中使用 驼峰 命名组件的名称时，在使用组件时，必须将大写改为 -小写

局部组件注册

说明

通过将组件注册给对应Vue实例中一个components属性来完成组件的注册，这种方式不会对Vue实例造成累加

实现

  • 第一种
//方式一
const vue = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login: {
            template: '<div><h2>用户登录-局部组件-方式一</h2></div>'
        },
    }
});

//方式二
let login2 = {
    template: '<div><h2>用户登录-局部组件-方式二</h2></div>'
};

const vue = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login2: login2,
    }
});

<!-- 局部组件使用  在Vue实例范围内使用 -->
<div id="app">
    <login></login>
    <login2></login2>
</div>

  • 第二种（template方式）
<!-- 1.声明局部组件模板  template标签 注意：在Vue实例作用范围外声明 -->
<template id="loginTemplete">
    <h1>用户登录--template方式注册组件</h1>
</template>

//2.定义变量用来保存模板配置对象
let login = {	//局部组件名称
    template: '#loginTemplete'
};

//3.注册组件
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login: login	//注册局部组件login
        //login
        //如果同名，可直接写 login
    }
});

<!-- 4.局部组件使用  在Vue实例范围内
<div id="app">
	<login></login>
</div>


Prop的使用


传递静态数据

通过在组件上声明静态数据传递给组件内部

//1.声明组件模板配置对象
let login = {
    template: "<div><h1>向组件内部传递静态数据：姓名{{ userName }}，年龄{{ age }} </h1></div>",
    props: ['userName', 'age'] //用来接收使用组件时通过组件标签传递的数据
}

//2.注册组件
const vue = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login //组件注册	同名时可以省略
    }
});

<!-- 3.通过组件完成数据传递 -->
<div id="app">
    <login user-name="张三" age="23"></login>
</div>


传递动态数据

在组件上声明并通过 v-bind 动态赋值

//1.声明组件模板对象
let login = {
    template: "<div><h1>向组件内部传递静态数据：姓名{{ userName }}，年龄{{ age }} </h1></div>",
    props: ['userName', 'age'] //用来接收使用组件时通过组件标签传递的数据
}

//2.注册局部组件
const vue = new Vue({
    el: "#app",
    data: {
        name: "李四",
        age: '30',
    },
    methods: {},
    components: {
        login //组件注册
    }
});

<!-- 3.使用组件 -->
<div id="app">
    <!-- 使用 v-bind 将数据绑定到Vue实例中的data属性，日后data属性发生变化时，组件内部数据跟着变化 -->
    <login :user-name="name" :age="age"></login>
</div>

定义组件的数据和事件

  1. 定义属于组件自己的数据
const login = {
    template: '<div><h1>{{msg}}</h1><ul><li v-for="item,index in lists">{{index}}-{{item}}</li></ul>',
    data(){		//使用data函数的方式定义组件自己的数据 在template代码中通过插值表达式直接获取
        return{
            msg: "hello",
            lists: ['java','spring','springboot']
        }
    }
}
  1. 定义组件自己的事件
const login = {
    template: '<div><input type="button" value="点我触发组件中的事件" @click="change"></div>',
    data(){
        return {
            name: '张三'
        }
    },
    methods: {
        change(){
            alert(this.name)
        }
    }
}

# 总结
	1.组件中定义事件和直接在Vue中定义事件基本一致  直接在组件内部对应的html代码上加入@事件名=函数名方式即可
	2.在组件内部使用methods属性用来定义对应的事件函数即可

向子组件中传递事件并在子组件中调用该事件

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名')方式调用

//1.声明组件
const login = {
    template: '<div><h1>事件传递{{ uname }}</h1><input type="button" value="点我" @click="change"></div>',
    data(){
        return {
            uname: this.name
        }
    },
    props: ['name'],
    methods: {
        change(){
            //调用vue实例中的函数
            this.$emit('aaa')
        }
    }
}

//2.注册组件
const app = new Vue({
    el: "#app",
    data: {
        username: "张三"
    },
    methods: {
        findAll(){
            alert("Vue实例中定义的函数")
        }
    },
    components:{
        login
    }
});

<!-- 使用组件 -->
<div id="app">
    <login :name="username" @aaa="findAll"></login>
</div>

# 理解
	1. 在login中的props中定义的属性为模板标签的属性，而在login的data()中return的属性为在login的template中定义的模板所使用到的属性



Vue路由（VueRouter）


概述

路由：根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管路

作用：用来在vue中实现组件之间的动态切换


路由的使用

  1. 引入路由（路由的引入一定要在vue之后）
<!-- 注意：路由的引入一定要在vue之后 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  1. 创建组件对象
//声明组件模板
const login = {
    template: '<h1>登录</h1>'
};

const register = {
    template: '<h1>注册</h1>'
};
  1. 定义路由对象的规则（即路径）
//创建路由对象

//这里直接将组件注册到了路由中，
//就不用了再在vue实例中的component中注册了
const router = new VueRouter({
    routes: [
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
});
  1. 将路由对象注册到vue实例
const app = new Vue({
    el: "#app",
    data: {},
    router:router //设置路由对象，同名可直接简写为 router
});
  1. 在页面中显示路由的组件
<!-- 根据链接切换路由
		哈希路由：在路径前加 # 是为了补全完整的项目路径地址 -->
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

<!-- 显示路由组件 -->
<router-view></router-view>

router-link的使用

作用：使用router-link是用来替换我们在切换路由时使用a标签

好处：可以自动给路由路径加入#，即完整的项目路径地址，不需要再手动加入

<!-- 		
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a> 
-->

<router-link to="/login" tag="button">点我登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link>

# 总结
	1. router-link 用来替换使用a标签实现路由器切换  好处是不需要再写#号来填充完整的路径地址
	2. router-link to属性：跳转的路由地址  tag属性：将router-link渲染成指定的标签，如button、span等均可

路由中的参数传递


方式一：路径参数方式

  1. 传递参数
<router-link to="/login?id=23&name=zhangsan">点我登录</router-link>
  1. 接收参数
const login = {
    template: '<h1>登录</h1>',
    created(){
    	console.log(this.$route.query)
        // var id = this.$route.query.id
        // var name = this.$route.query.name
    }
};

即参数对象在 $this.route.query中封装着，需要那个参数就取哪个


方式二：请求体方式

  1. 接收参数
<router-link to="/register/22/lisi">点我注册</router-link>
  1. 接收参数
const register = {
    template: '<h1>注册</h1>',
    created(){
        console.log(this.$route.params)
        // var id = this.$route.param.id
        // var name = this.$route.param.name
    }
};

即请求参数对象在this.$route.param中封装着


嵌套路由的使用

  1. 声明最外层和内层路由
<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>

//声明组件模板
const product = {
    template: "#product"
};

const add = {
    template: '<h1>商品添加页面模板</h1>'
};

const edit = {
    template: '<h1>商品编辑页面模板</h1>'
};
  1. 创建含有嵌套路由的路由对象
//定义路由对象
const router = new VueRouter({
    routes:[
        {
            path:'/product',
            component:product,
            children:[
                {path:'add',component:add},
                {path:'edit',component:edit}
            ]
        }
    ]
})
  1. 注册路由对象
const app = new Vue({
    el: "#app",
    router: router,
});
  1. 测试路由
<div id="app">
    <router-link to="/product">商品管理</router-link>

    <router-view></router-view>
</div>



Vue CLI脚手架


概述

什么是CLI？

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

什么是Vue CLI？

​ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，使用Vue脚手架之后我们开发的页面将是一个完整的系统（项目）

Vue CLI 优势

  • 通过 @vue/cli 实现的交互式的项目脚手架。 （bootstrap css js 等通过执行命令方式下载相关依赖）

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：

    • 可升级； （一条命令）
    • 基于 webpack 构建，并带有合理的默认配置； （webpack 项目打包方式 编译好的项目源码===>部署到服务器上直接使用 ）
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。 （ vue、v-charts、elementui等等）

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。 （ Nodejs(tomcat)、Vue、VueRouter、 webpack、yarn等等）

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 （Vue UI）




Vue CLI 安装

  1. 环境准备
# 1.下载nodejs
# 2.配置nodejs环境变量

# 3.验证nodejs是否安装成功
	node -v
	
# 4.npm介绍
	node package manager    nodejs包管理工具--->前端主流技术

# 5.配置淘宝镜像
	npm config set registry https://registry.npm.taobao.org/
	npm config get registry
	
	npm config get registry 查看镜像地址
	
# 6.配置npm下载依赖位置
	npm config set cache "D:\Nodejs\nodeRepository\npm-cache"
	npm config set prefix "D:\Nodejs\nodeRepository\npm"
	
    npm config ls 验证是否配置成功
  1. 安装脚手架
# 0.卸载脚手架
	npm uninstall -g vue-cli
	
# 1.Vue Cli官方网站
	https://cli.vuejs.org/zh/guide
	
# 2.安装Vue Cli
	npm install -g @vue/cli


第一个Vue脚手架项目

# 1.到指定目录中创建vue脚手架项目
	vue create 项目名

# 2.目录结构
	example		  ------------>项目名
		-build	  ------------>用来使用webpack打包使用build依赖
		-config   ------------>用来做整个项目配置目录
		-node_modules    ----->用来管理项目中使用依赖
		-src	  		 ----->用来书写Vue项目的源代码【重点】
			-assert		 ----->用来存放静态文件
			-components  ----->用来书写Vue组件
			-router		 ----->用来配置项目中的路由
			 App.vue	 ----->项目的根组件
			 main.js	 ----->项目的主入口
		-static			 ----->其他静态
        .babalrc		 ----->将es6语法转为es5运行
        package.json	 ----->类似于pom.xml 依赖管理 不建议手动修改

# 3.运行项目（到项目路径下执行）
	npm run serve			
	
# 4.Vue CLI 项目开发方式
	一切皆组件  一个组件中常包含 js代码 html代码 css样式
	日后在使用vue cli进行开发时不再书写html，而是编写的vue文件
	打包时vue cli会将组件变异成运行的html文件

也可以使用 vue ui图形化界面创建项目


在脚手架中使用axios

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

# 2.在main.js中引入axios
	import axios from 'axios'
	
# 3.修改内部的$http为axios
	Vue.prototype.$http=axios
	
# 4.使用axios
	在需要发送异步请求的位置：
    this.$http.get("url").then((res)=>{})
    this.$http.post("url").then((res)=>{})

Vue CLI项目打包和部署

# 1.在项目根目录中执行如下命令
	vue run build
	
	注意：vue脚手架打包的项目必须在服务器上运行，不能直接双击运行
	
# 2.打包之后当前项目的变化
	在打包之后项目中出现dist目录，dist目录就是vue脚手架项目生产目录或者说直接部署目录
posted @ 2021-04-12 18:01  别来丶  阅读(90)  评论(0)  编辑  收藏  举报