JavaSE精选-Vue

简介: JavaSE精选-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

3, 使用

methods: {
        getdata () {
            var _this = this     this.$axios.get("http://115.29.141.32:8084/api/mall/getGoodsByType?typeId=1").then( res => {
                    _this.list = res.data.data
                })
        }
    }
methods: {
    getdata () {
        var _this = this
        var obj = {
            "amount":100,
            "goodsDetailId": 1230,
            "num": 1,
            "state": 0,
            "token": "admin"
        }
        this.$axios.post("http://115.29.141.32:8084/api/mall/addOrder", obj)
    }
}
目录
相关文章
|
4天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
9天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
71 7
使用 Vue CLI 脚手架生成 Vue 项目
|
7天前
|
JavaScript
|
20小时前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
7 1
|
7天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
14 2
|
11天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
14 1
|
11天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
25 1
|
12天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
20 3
|
12天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
26 2
|
12天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
42 2