快消息！Vue核心概念与其指令

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

快消息！Vue核心概念与其指令

2022-12-15 06:13:53 来源：博客园

Vue简述Vue是一套构建用户界面的前端框架。建用户界面的意思是：往html中填充数据。框架的意思是：一套开发规范。Vue的特点1.数据驱动视图当页面是一个普通的展示时，数据改变了，Vue会充当中间驱动者的角色，把视图更新。

2.双向数据绑定

(资料图)

当做form表单时，表单的默认展示数据来自于特点1，当用户在form表单添加数据时，对的数据模型会同步更新到本地维护的data上。

Vue的原理

Vue采用MVVM设计模式，View指html页面， Model指Ajax获取的数据，ViewModel指Vue。Vue是一个实例对象，它内部通过监听的方式进行工作。1.监听数据改变，更新UI页面2.监听DOM变化，更新数据Model

Vue简单的使用场景

要3个条件1.提供一个让Vue控制的视图View，让View帮我们把数据自动填充到里面2.内部维护一组数据源，用于在View视图上展示3.创建一个Vue实例对象，通过对象的MVVM双向绑定，让View与Mode直接实现数据的双向流动。

        {{username}}
    <script src="./lib/vue-2.6.12.js"></script>    <script>        // vue实例对象负责处理View, Model之间的双向流动。        // vue实例的入参是它要监听的两头，el: 使用选择器寻找它要监听管理的View容器， data: 数据源与view做双向绑定。        const vm = new Vue({            el: "#root",            data: {                username: "Frog"            }        });    </script>

Vue脚手架vue-clivue-cli是一个帮助开发者自动配置webpack的工具，使用vue-cli可以快速开启一个项目，让开发者只关注自己的业务开发。安装与使用

npm install -g @vue/cli

vue-cli版本降级

从vue-cli v4的版本降回v3

npm uninstall -g @vue/cli//安装指定版本npm install -g @vue/cli@版本号

//vue cli3 的最高版本 3.12.1 npm install -g @vue/cli@3.12.1

使用vue -V验证是否安装成功

zhoufeideMacBook-Pro-2:lession0 zhoufei$ vue -V@vue/cli 5.0.8

vue create 项目名称

vue2模板选择

SPA 单页面应用：所有的功能都在一个页面中实现，一个项目就一个页面。

vue默认用于开发SPA 单页面应用。如：vue-cli工具生成的工程中只有一个index.html入口文件。

并且vue编写的js代码编译打包后，会嵌入到div#app的下面

main.js是项目的入口，webpack打包的入口在这里

App.vue根组件，项目的结构在这里定义components: 定义的组件放置在这个目录下

Vue的运行流程

在工程化项目中，vue是通过main.js把App.vue渲染到index.html指定的区域中。App.vue用来编写待渲染的模板结构index.html中需要预留一个el区域main.js把App.vue渲染到index.html预留的区域中。main.js项目入口

// 导入vue框架，在js全局当如Vue构造方法import Vue from "vue"  // 导入App.vue根组件，将根组件替换到index.html的#app标签import App from "./App.vue" Vue.config.productionTip = falsenew Vue({  el: "#app", //#app标签，占位标签  render: h => h(App), // 返回要替换#app占位标签的根组件})

App.vue根据组件

Vue挂载方式，下面2种是一样的。

new Vue({  render: h => h(App),}).$mount("#app")new Vue({  el: "#app", //#app标签，占位标签  render: h => h(App), // 返回要替换#app占位标签的根组件})

Vue组件化开发

Vue是一个支持组件化开发的框架，其中定义的组件是以.vue结尾。App.vue文件本质上也是一个vue组件。组件是一个可以复用的UI结构。template是组件的模板结构。script和style是为模板提供交互和样式的。除了data, props, 生命周期使用函数的方式定义，其他定义都和Vue实例的设置一样。

<script>export default {    // 组件中的data定义和vue实例对象中data的定义不一样    // 组件中的data定义是一个函数，在函数的return里返回一个对象    data: function (params) {        return {            username: "Lilei"        }    },    // 除了data需要使用函数，其他定义都和Vue实例的传参一样。    methods: {        changeName () {            this.username = "娃哈哈"        }    },    watch: {},    filters: {},    computed: {}}</script>

Vue指令内容渲染指令有三种：v-text：直接覆盖指令，不常用{{ }}: 差值表达式，在位置上展示，常用v-html：标签内容展示，可以展示html标签样式。

        姓名:
        性别:
        
        姓名: {{ username }}
        性别: {{ gender }}
        
        内容:

属性绑定指令

属性动态绑定使用v-bind:修饰，或者可以省略v-bind, 直接一个:就可以了

其中属性绑定v-bind:和差值表达式里面都可以写一些简单的js语句

1+2: {{ 1+2 }}

事件绑定指令

视图上，通过v-on:绑定一个事件，比如v-on:click绑定一个点击事件。

        统计结果： {{ count }}

处理方法的添加是放在Vue({methods})项上

并且在methods上，方法推荐使用sub(){},简写的形式，无需显示使用key:value的形式。

<script>        const vm = new Vue({            el: "#app",            data: {                username: "Frog",            },            methods: {                add: function (n) {                    vm.count += n                },                sub(e) {                    //推荐这样简写                    //vm就等于this, 是一个实例对象                    this.count -= 1                    console.log(e);                                        if (this.count % 2 === 0) {                        // e.target是事件的响应对象                        e.target.style.backgroundColor = "red";                    } else {                        e.target.style.backgroundColor = "";                    }                },                sub2(n, e) {                    console.log(n);                    console.log(e);                }            }        })    </script>

                跳转到百度

<script>        const vm = new Vue({            el: "#app",            data: {                username: "Frog",            },            methods: {                goBaidu(e) {                    e.preventDefault()                    console.log("跳转到baidu");                }            }        })    </script>

按键修饰符

<script>        const vm = new Vue({            el: "#app",            data: {                username: "Frog",            },            methods: {                cleanHandler(e){                    //当esc键 弹出时回调                    console.log(e.target);                },                commitHandler(e){                    console.log("提交");                }            }        })    </script>

双向数据绑定指令

双向数据绑定是用于表单提交数据的场景model数据与表单中的input输入框的value通过v-model进行双向绑定，当用户输入数据时，Vue实例监听到，然后将数据更新到Model中。因为Vue有数据驱动视图的特点，当数据改变了就会驱动视图上数据的更新。这个一去，一回的循环构成了双向绑定的效果。

        用户名：{{ username }}

<script>        const vm = new Vue({            el: "#app",            data: {                username: "",                city: "0"            }        })    </script>

v-model指令修饰符

双向绑定有三种指令修饰符number: 将输入的字符串自动转成数字trim: 自动剪裁掉输入数据两头的空格lazy：只在输入完成，点击enter时才触发数据更新

         +  = {{ num1 + num2}}        
         +  = {{ num1 + num2}}

const vm = new Vue({            el: "#app",            data: {                username: "",                city: "0",                num1: 1,                num2: 1            }        })

条件渲染指令

                这是用v-if渲染的
                这是用v-show渲染的
        优秀
        良好
        及格
        不及格

<script>        vm = new Vue({            el: "#app",            data: {                flag: true,                scoe: "A"            }        })    </script>

列表渲染指令

                                    索引                 id                 姓名             
                                                                                {{ index }}                     {{ item.id }}                     {{ item.name }}

索引	id	姓名
{{ index }}	{{ item.id }}	{{ item.name }}

<script>        vm = new Vue({            el: "#app",            data: {                list: [                    {id:1, name:"zhangsan"},                    {id:2, name:"lisi"},                    {id:3, name:"wangwu"}                ]            }        })    </script>

过滤器

                {{ message | capi }}
        
        时间：{{ new Date() | dateFormate }}

// 添加全局过滤器        Vue.filter("dateFormate", function (time) {            const dtstr = dayjs(time).format("YYYY-HH-DD HH:mm:ss")            return dtstr        })        vm = new Vue({            el: "#app",            data: {                message: "hello vue.js"            },            // 过滤器是一个函数，它定义在filters下面            filters: {                capi(val) {                    // val: 标识通过管道符传过来的值                    var one = val.charAt(0).toUpperCase()                    var two = val.slice(1)                    return one + two                }            }        })

侦听器

侦听器有2种：函数监听器，对象监听器

函数监听器比较简单，只能直接监听，方法执行时直接接收监听的属性或子属性对象监听器比较复杂，强大，可以设置页面加载完成时默认执行一次回调和对象属性子属性的深层监听

var vm = new Vue({            el: "#app",            data: {                username: "",                userBigName: "admin",                userInfo: {                    city: ""                }            },            watch: {                // 函数监听器，监听哪个属性，方法名就是那个属性名                // 第一个是新值，第二个是旧值                // 缺点1：页面初始化时没法自动触发                // 缺点2：当属性是一个对象时，修改对象中的属性，函数监听器无法监听到                username(newV, oldV) {                    console.log(newV, oldV);                    $.get("https://www.escook.cn/api/finduser/"+newV, function(res){                        console.log(res);                        console.log($);                    })                },                // 对象侦听器，侦听哪个属性，key值就设置成哪个属性名                // 优点1：通过设置immediate为true, 可以在页面加载时，默认执行一次调用                userBigName: {                    handler(newV, oldV) {                        console.log(newV, oldV);                        $.get("https://www.escook.cn/api/finduser/"+newV, function(res){                        console.log(res);                        console.log($);                    })                    },                    immediate: true                },                // 对象侦听器，可以监听对象属性中的子属性                // 优点2：对象侦听器可以开启深度监听，修改属性对象中的一个子属性，收到监听回调                userInfo: {                    handler(newV) {                        console.log(newV);                    },                    deep: true                },                //  子属性方法监听器，解决缺点2                //  可以使用下面这个"属性.子属性"的方法，做方法监听。可以做到直接监听到子属性，并且newV打印的也是子属性的值                "userInfo.city"(newV) {                    console.log(newV);                }            }        })

计算属性

定义时按照方法定义，使用时按照属性使用，在内存中的保存形式是属性data属性和计算属性中的数据是同步更新的。

                                            {{ rgb }}

var vm = new Vue({            el: "#app",            data: {                r: 0,                g: 0,                b: 0            },            // 计算属性            // 定义时用方法定义，使用时按属性使用，在内存中保存的也是属性形式            // 优点：1.代码复用，2.data属性修改，计算属性会被同步修改            computed: {                rgb() {                    return `rgb(${this.r}, ${this.g}, ${this.b})`                }            }        })

关键词：数据绑定输入数据数据驱动