【Java之Vue】

Vue

Vue基础语法

创建对象及插值表达式

<!--    {{}}: 在html语法中就是一个简单字符串 -->
<!--   {{}}: 在vue语法中, 叫插值表达式 -->
<!--   插值表达式: 是一个表达式, 这个表达式中使用到的参数, 要去对应的vue对象中取出  -->
    <div id="root">
        <div>
            {{msg1 + msg2}}
        </div>
    </div>

    <script>

        //  new Vue 创建一个Vue对象
        // 一个Vue对象一旦创建, 会立即检测自己的el属性, 找到对应id的html作用域
        // 和对应的作用域建立'绑定'关系
        // 对应html作用域, 就变成了html + vue语法域
        // 对应的新'绑定'的语法域, 要按照Vue语法重新解释
		//每个页面的根root只能有一个，vue对象也只能有一个
        new Vue({
            el: "#root",
            data: {// 注意: Vue对象的data, 用来保存, 我们给这个Vue对象自定义的参数
                msg1: 123,
                msg2: 1
            }
        })
    </script>

v指令

v-bind: 单向绑定

// v-bind: 单向绑定
// 把Vue对象的一个参数, 通过v-bind绑定到对应语法域的标签的属性上,会被vue对象中的参数影响值，但他不能反作用给vue对象

V-model: 双向绑定: 仅能用于表单元素的value

// v-model: 可以把表达元素的value值, 和对应的vue中参数建立双向联系, 相互影响，常用于input框中

V-text: 给一个标签内部插入文本或者带代码的文本
V-html: 极类似于dom操作的innerText和InnerHTML

V-on: 事件监听

// v-on可以监听事件, 把事件触发之后, 响应到vue对象中
// 注意 v-on: 可以简写成@

V-show: 隐藏和显示

V-if
V-else
V-else-if

两者的区别：如果 v-if不满足条件, 不显示, 意味着不会加载到dom上

v-show无论隐藏和显示, 始终都存在于dom树上, 只不过是通过css来隐藏和显示

V-for: 循环语句，一般用于循环渲染

// V-for: 循环语句

注意1: v-for指令做循环渲染的时候, 它所循环渲染的不仅仅只是遍历的内容, 它还会循环渲染出这个v-for指令所在的多个标签,并且对于每一个标签，都要求有一个唯一的key
        <div v-for="item in list">
            {{item}}
        </div>
   --------------------------------------
        <div>
            zs
        </div>   
        <div>
            ls
        </div>  
        <div>
            wu
        </div>  
标准的写法：
            <div v-for="item in list " :key="item.id">
            {{item.name}} --{{item.age}}
        </div>
            这里要注意，中间要使用：隔开，in可以换成of，没有区别

计算属性和侦听器

计算属性: computed:
指的是一个属性通过其他属性计算而来。可以实时变化

 new Vue({
     el: "#root",
     data: {
         num1: 0,
         num2: 0
     },
     computed: {
         sum: function () { //sum会自动调用里面的函数，得到结果
             return parseInt(this.num1) + parseInt(this.num2)
         }
     }
 })

侦听器/监听器

监听一个属性的改变, 触发一个事件，一定要注意是监听属性，和v-on有本质的区别

watch:

 new Vue({
            el: "#root",
            data: {
                inpustr: "",
                times: 0
            },
            watch: {
                inpustr: function () {
                   this.times++
                }
            }
        })

模板和组件

模板

template：

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略.

<body>
<!--template:-->
<!--一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略.-->

    <div id="root"></div>

    <script>

        // 一个Vue对象一旦创建, 先找el属性, 找到对应的绑定结点对象
        // 再检测自己这个Vue对象是否有模板
        // 如果有, 解析模板创建结点对象, 替换已经对应绑定的(在dom上那个)对象
        new Vue({
            el: "#root",
            data: {
                msg: "zs"
            },
            template: "<div><div @click='f'>{{msg}}</div></div>",
            methods: {
                f: function () {
                    alert("?")
                }
            }
        })

    </script>

</body>

简单理解为：root节点被挂载在vue对象上，创建对象的时候找到该节点，然后发现有模板，就将其替换掉，最终将div替换为

<div><div @click='f'>{{msg}}</div></div>

组件

一个Vue对象, 就是一个组件

component:
组件

template:
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略.

组件的构建流程(非vue项目中使用)：先将组件创建成普通的js对象，里面的属性template，即模板，然后在vue对象中的componens里面进行注册，此时组件就作为root对应的vue对象的子组件，同时也是一个vue对象，再将自定义的组件对象写入root的模板中，这样就会自动读取出来

<script>

        var son1 = {
            template: "<div class='son1'>son1</div>"
        }
        var son2 = {
            template: "<div class='son2'>son2</div>"
        }
        var son3 = {
            template: "<div class='son3'>son3</div>"
        }
        var son4 = {
            template: "<div class='son4'>son4</div>"
        }


        new Vue({
            el: "#root",
            data: {},
            template: "<div class='div-root'><son1></son1><son2></son2><son3></son3><aaa></aaa></div>",
            components: {
                son1: son1,
                son2: son2,
                son3: son3,
                aaa: son4,
            }
        })
    </script>

执行的流程：首先加载root挂载的vue对象，发现有模板，进行替换，又发现有son1标签，html中并没有这个标签，识别为vue语法，然后根据son1中的模板来进行替换

生命周期

一个vue对象从创建到消亡的过程中会自动调用的方法

			beforeCreate:function () { //创建对象之前
                console.log("控制台打印:beforeCreate")
            },
            created:function () { //对象创建完成
                console.log("控制台打印:created")
            },
            beforeMount:function () {
                //页面还未被渲染
                console.log(this.$el),
                    console.log("控制台打印:beforeMount")
            },
            mounted:function () {
                //页面渲染完成
                console.log(this.$el),
                    console.log("控制台打印：mounted")
            },
            beforeUpdate:function () { //在更新之前
                console.log("控制台打印：beforeUpdate")
            },
            updated:function () { //更新完毕后
                console.log("控制台打印：updated")
            },
            beforeDestroy:function () { //对象销毁前
                console.log("控制台打印：beforeDestory")
            },
            destroyed:function () { //对象销毁完毕后
                console.log("控制台打印：destroyed")
            }

Vue项目的构建

前后端分离的核心思想：

用户根据url发起请求到前端服务器，然后获得前端代码并解析，在解析的过程中发现需要数据，向后端服务器发起请求，后端从数据库中获取数据并发给用户，用户将前端和数据合在一起形成了带数据的页面

vue项目的构建流程

基础配置（只需安装一次，无需重复进行）：
1, 安装node (cnpm)
    npm install -g cnpm --registry=https://registry.npm.taobao.org
2, 安装vue-cli:脚手架工具
    cnpm install -g @vue/cli
	cnpm install -g @vue/cli-init
3, 安装webpack: 模块打包机
	cnpm install -g webpack

创建项目：
vue init webpack 项目名(不能为中文)
注意：要选好路径名，可以直接在你想要创建项目的目录下输入cmd快速打开
安装包：cnpm install 此时要注意你安装包的目录是项目所在的根目录
启动这个前端vue项目
命令 npm run dev
关闭这个项目(停止)  命令ctrl + c,  已经关闭

组件之间的传值

父组件向子组件传值

父组件传递: 在子组件定义一个属性, 把父组件的数据通过单向绑定, 绑定到这个属性上

<son1 class="son1" v-bind:username="user.name"></son1>

子组件接收: props专门用来接收父组件的传值

props: ["username"]

注意: props 可以基本上等价看做data, 只不过props专门用来接收父组件的传值, 并且不可修改

使用步骤：首先在组件包下创建子组件的vue对象，并且在属性中写好props参数，然后在App下的子组件模板中写入绑定属性，在使用子组件的时候需要导包进入APP中并完成注册

<son1 class="son1" v-bind:username="user.name" ></son1>
      <son2 class="son2" v-bind:userage="user.age"></son2>
<script>
    import Son1 from "./components/Son1";
    import Son2 from "./components/Son2";
export default {
        data(){
            return{
                user: {
                    name: "zs",
                    age: 18,
                }
            }
        }
</script>  
    
<template>
    <div>
      {{userage}}
    </div>
</template>

<script>
    export default {
        props: ["userage"]
    }
</script>

写入绑定完成后，子组件中的username和userage属性就受到父组件中user.name和user.age的影响

子组件向父组件传值

子组件传递:

// 向父组件抛出一个方法
this.$emit("addage", 2)

父组件接收

<son1   v-on:addage="adduserage"></son1>

注意：需要在父组件中的子组件模板里面一直监听，使用v-on来监听事件，addage是我们自定义的方法名，adduserage相当于是将监听到的方法重写一个在父类中的名字，然后在父类中完成该方法的调用，注意参数只能写在methods里面，不能写入模板标签中

methods: {
            adduserage: function (num) { //此时的num就是我们传过来的参数2
                this.user.age += num
            }
        }

整体的思想：首先子组件中点击事件触发方法，然后向父组件发出一个名字叫addage参数为2的方法，父组件监听该方法名，并获取该方法，重新命名，这样就可以在父组件中调用了，调用时方法的参数就是从子组件传过来的参数，在父组件中完成对值的修改操作

注意：如果同时调用两个方法，需要在方法名之间用逗号隔开

bus传值

// 单独维护一个中转站传值

1, 创建一个bus文件

最好单独创建一个名为bus的包，专门用来存储bus文件
// 导入vue语法
import Vue from 'vue'

// 根据Vue语法创建一个vue对象
const bus = new Vue()

// 默认暴露这个对象
export default bus

2, 在main,js配置

import bus from './bus'

// 相当于: 给整个项目配置的所有Vue对象配置一个参数: $bus
Vue.prototype.$bus = bus

3, 使用

使用的方法类似于父组件向子组件传值，都是使用方法进行传值

传递值：

this.$bus.$emit("addnum", this.inputnum)

第一个值是方法名，第二个是要传递过去的值，一般调用的是对象中的属性

接收值：

        mounted() {
           var _this = this
           this.$bus.$on("addnum",  res => {

               _this.times += parseInt(res)
           })

mounted类似于props，是一个专门用来监听的区域，on表示监听事件，一直监听addnum这个方法，接收到的参数为res(可自定义)，=>表示对这个参数来进行处理，相当于lambda里面的对方法体进行传参

axios网络请求

vue如果要引入/使用别的第三方框架:

1, 导包或者导入配置文件

cnpm install axios --save

2, 在main.js配置

import axios from 'axios'
Vue.prototype.$axios = axios