Vue:核心技术

这篇具有很好参考价值的文章主要介绍了Vue:核心技术。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、模板语句之插值语法{{}}

1、{{可以写什么}}:

①在data中声明的变量,函数都可以。②常量都可以。③只要是合法的JavaScript表达式都可以

④模板表达式都被放在沙盒中,只能访问全局变量的一个白名单:

 'Infinity,undefined,NaN,isFinite,isNaN,'  'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'  'require'

2、注意:

不能使用全局变量或者全局函数,只能用data里面的变量和函数。

3、data

data Vue 实例的数据对象,这个对象必须是纯粹的对象 (含有零个或多个的 key/value )

在Vue中,data属性用于定义组件数据的初始状态。它是一个包含key/value 对,其中key表示属性的名称,value 表示其初始值。根据key来获取value,将value渲染到页面上。

data属性只应用于定义组件数据的初始状态。如果需要稍后更新数据,则使用方法或计算属性来实现。

4、data具体应用

<template>
  <div>
    <p>{{ msg}}</p>
    <button @click="one">点我一下</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    one() {
      this.msg= 'nihao'
    }
  }
}
</script>

二、模板语句之指令语句

指令的作用:当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM。

1、vue框架中

所有的指令名字都以"v-"开头、都是以HTML标签的属性形式存在的,例如

<h1 v-once>{{msg}}</h1>
<h1 v-if="a < b">{{msg}}</h1>

需要注意的是:虽然指令写在标签的属性位置上,但是这个指令浏览器是看不懂的,需要vue框架进行编译,浏览器才能看懂。

2、vue框架的语法规则

<HTML标签 v-指令名:参数="JavaScript表达式"></HTML标签>

表达式:插值语法{{这里写什么}},指令就可以写什么,但是不能在增加{{}}。

有的指令不需要参数和表达式 ,——> v-once、

有的指令不需要参数,但需要表达式 ,——> v-if = "表达式"、

有的指令需要参数和表达式 ,——> v-bind:参数 = "表达式"

3、v-once指令

作用:只渲染元素一次,重新渲染之后该元素跳过重复渲染。

4、v-if = "表达式"

作用:表达式的执行结果需要是一个布尔型的数据:true || false

    <div class="vues">
        <h1>{{msg}}</h1>
        <h1 v-once>{{msg}}</h1>
        <h1 v-if="a < b">{{msg}}</h1>
        <h1 v-if="a < b">{{msg}}</h1>
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: 'haibiao',
                a: 1,
                b: 2
            }
        })
    </script>

5、v-bind:参数 = "表达式"指令

单向数据绑定:data——>视图(view)

这个指令可以让HTML标签的某个属性的值产生动态的效果。两种写法

<HTML标签 :参数="表达式"></HTML标签>
<HTML标签 v-bind:参数="表达式"></HTML标签>

当标签体中的数据想要动态,使用插值语法,HTML标签的属性动态,使用指令语法。

    <div class="vues">
        <span v-bind:xyz="msg"></span>
        <input type="text" name="username" :value="uname">
        <input type="text" name="username" v-bind:value="uname">
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: 'pang',
                uname: 'Mr.pang'
            }
        })
    </script>

6、v-model:value="表达式"指令

双向数据绑定:data<——>视图(view)

只能使用在表单类型的value元素上,因为表单类的元素才能给用户提供交互输入的界面。

<HTML标签 v-model:value=参数="表达式"></HTML标签>
<HTML标签 v-model="表达式"></HTML标签>

7、Object.defineProperty()

这个方法是:给对象新增属性,或者设置对象原有的属性。

Object.defineProperty(给哪个对象新增属性,'新增的这个属性名叫什么',{给新增的属性设置相关的配置项key:value 对})

第三个参数的配置项:

value 配置项:给属性赋值

writable:设置该属性的值是否可以被修改,true:可以,false:不行

getter方法:当读取属性值的时候自动调用,getter方法的返回值就代表属性的值。

setter方法:当修改值的时候自动调用,setter方法上的参数用来接收传过来的值。

注意:当setter,getter方法存在,value和writable不能存在。

enumerable:设置属性是否能遍历,false:不可遍历,true:可遍历。

 configurable:表示属性是否能被删除,false:不能,true:能。 

    <script>
        let phone = {}
        Object.defineProperty(phone, 'color', {
            // value: '翡翠绿',
            // writable: true,
            get: function () {
                console.log('getter方法执行了');
                // return 'success'
                return this.color
            },
            set: function (val) {
                console.log('setter方法执行了' + val);
                this.color = val
            }
        })
    </script>

8、代理机制

通过访问  代理对象的属性  来间接访问  目标对象的属性。依靠Object.defineProperty()实现。

    <script>
        let target = {
            name: 'pang'
        }
        let proxy = {}
        Object.defineProperty(proxy, 'name', {
            get: function () {
                return target.name
            },
            set: function (val) {
                target.name = val
            }
        })
    </script>

9、v-on:事件名='表达式'

v-on:click='表达式' 表示当发生鼠标单击事件之后,执行表达式。

v-on:keydown='表达式' 表示当发生键盘按下事件之后执行表达式。v-on可以写成@

在vue中,所有事件所关联的回调函数,需要在vue实例的配置项methods中进行定义。

method是是一个对象{}, 在这个methods对象中可以定义多个回调函数。

Vue在调用回调函数的时候,会自动给回调函数传递一个对象,这个对象是:当前发生的事件对象

在绑定回调函数的时候,可以在回调函数的参数上使用$event占位符,vue看见$event自动将当前事件以对象的形式传过去。

    <div class="vues">
        <button v-on:click="sayHello()">hello</button>
        <button @click="sayHello()">hello</button>
        <button @click="sayHi($event,'pang')">hello</button>
    </div>
    <script>
        new Vue({
            el: '.vues',
            methods: {
                // sayHello: function () {
                //     alert('nihao')
                // }
                sayHello() {
                    alert("hi")
                },
                sayHi(event, name) {
                    console.log(event, name);
                }
            }
        })
    </script>

10、事件修饰符

.stop: 停止事件冒泡,相当于e.stopPropagation()。从内到外添加

.prevent: 阻止事件的默认行为,e.preventDefault()。

.capture: 添加事件监听器时使用事件捕获模式,事件.capture。从外向内添加

.self: 这个事件如果是“我自己元素”上发生的事件,这个事件不是别人传递给我的,执行程序。

.once:事件只发生一次。

.passive:无需等待,直接继续执行事件的默认行为。解除阻止。

.passive和.prevent修饰符是对立的,不可以共存。

11、按键修饰符

常用的按键修饰符:.enter、.tab(需要配合keydown事件使用)、.delete(捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left.、right

    <div class="vues">
        tab:<input type="text" @keydown.tab="get">
        enter<input type="text" @keyup.enter="get">
        page-down<input type="text" @keyup.page-down="get">
        page-up<input type="text" @keyup.page-up="get">
        回车<input type="text" @keyup.huiche="get">
    </div>
    <script>
        Vue.config.keyCodes.huiche = 13
        new Vue({
            el: '.vues',
            methods: {
                get(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>

通过e.key获取这个键的真是名字,将真实名字以kebab-case风格进行命名。

自定义按键修饰符:通过Vue全局配置对象config来进行按键修饰符的自定义,即

Vue.config.keyCodes.huiche = 13

系统修饰符:ctrl、alt、shift、meta。

对于keydown事件来说:只要按下ctrl就会触发keydown事件

对于keyup事件来说:需要按下ctrl,并且加上按下组合键,然后松开组合键之后才能触发

12、关于this

如果使用箭头函数,this指向window;不使用,指向当前的Vue。

13、计算属性(computed)

当你调用某个方法时,直接调用会执行多次,如果使用计算属性,只要不修改值,只调用一次

    <div class="vues">
        <h1>{{msg}}</h1>
        原先数据:<input type="text" v-model="info">
        <!-- 反转数据:{{info.split('').reverse().join('')}} -->
        数据反转:{{repeatInfo()}}
        数据反转:{{haha}}
        数据反转:{{haha}}
        数据反转:{{haha}}
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: '计算机属性',
                info: ''
            },
            methods: {
                repeatInfo() {
                    return this.info.split('').reverse().join('')
                }
            },
            computed: {
                haha: {
                    get() {
                        console.log('getter方法调用了');
                        return 'nihao'
                    },
                    set(e) {
                        console.log('setter调用了');
                    }
                }
            }
        })
    </script>

14、侦听属性(watch)

监听多个属性、将文件名拿过来可以直接监听、可以监听Vue的原有属性、也可以监听计算属性。

immediate:初始化调用函数 true 开启初始化 || false 默认不调用

handler:固定写法,方法名必须交handler,有两个参数,改变后的值和原有的值。

当被监听的属性发生变化时,handler自动调用一次。

    <div class="vues">
        <h1>{{msg}}</h1>
        数字:<input type="text" v-model="number">
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: 'listen',
                number: 0
            },
            computed: {
                hehe() {
                    return 'shuzi' + this.number
                }
            },
            watch: {
                number: {
                    //初始化调用函数
                    immediate: true,
                    handler(a, b) {
                        console.log(a, b);
                    }
                },
                hehe: {
                    handler(a, b) {
                        console.log(a, b);
                    }
                }
            }
        })
    </script>

深度监视:

使用deep属性开启深度监视,默认为false不开启,true为开启。

当需要监视一个具有多级结构的属性,并且监视所有属性,需要启用深度监视。

    <div class="vues">
        数字:<input type="text" v-model="a.b.c">
        数字:<input type="text" v-model="a.d.f">
        数字:<input type="text" v-model="a.q">
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                a: {
                    b: {
                        c: 0
                    },
                    d: {
                        f: 12
                    },
                    q: 1
                }
            },
            watch: {
                a: {
                    deep: true,
                    handler(a, b) {
                        console.log(123);
                    }
                }
            }
        })
    </script>

15、computed和watch的选择

如果在程序当中使用了异步方式,只能使用watch,如果完成其他功能,优先选择computed。

16、v-for

需要写在循环项上,语法格式:

v-for="(变量名,index) in/of 数组"
变量名代表了数组中的每一个元素
    <div class="vues">        
        <ul>
            <li v-for="(name,index) of names">
                {{name}} + {{index}}
            </li>
        </ul>
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>选择</th>
            </tr>
            <tr v-for="(vip,index) of vips">
                <td>{{index + 1}}</td>
                <td>{{vip.name}}</td>
                <td>{{vip.age}}</td>
                <td><input type="checkbox"></td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                names: ['p', 'h', 'b'],
                vips: [
                    { id: 1, name: 'p', age: 19 },
                    { id: 2, name: 'h', age: 20 },
                    { id: 3, name: 'b', age: 21 },
                ]
            }
        })
    </script>

17、v-text指令

可以将指令的内容拿出来填充到标签体之中,类似于JavaScript的innerText。

这种填充是以覆盖的形式进行填充,先清空标签体中原有的内容,填充新的内容。即使是一段HTML代码,也不会解析,当作普通文本进行处理。

18、自定义指令

使用directives开启自定义指令,

函数式方式

指令名字的设置:1.v- 不需要写,2.Vue官方建议指令的名字全部要小写。

指令名字会跟随一个回调函数,回调函数执行时机包括两个,

1.标签和指令第一次绑定的时候,2.模板被重新解析的时候。

这个回调函数有两个参数:1.真是的dom元素,2.标签与指令之间绑定的关系。

    <div class="vues">
        <div v-text="msg"></div>
        <div v-text-danger="msg"></div>
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: '自定义属性'
            },
            directives: {
                'text-danger': function (a, b) {
                    a.innerText = b.value
                    a.style.color = 'pink'
                }
            }
        })
    </script>

对象式方式

这个对象中三个方法的名字不能随便写,这三个函数将来都会被自动调用。

元素与指令初次绑定的时候,自动调用bind。

注意:在特定的时间节点调用特定的函数,这种被调用的函数成为钩子函数。

    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: '自定义属性',
            },
            directives: {
                'text-danger': function (a, b) {
                    a.innerText = b.value
                    a.style.color = 'pink'
                },
                'bind-blue': {
                    bind(a, b) {
                        a.value = b.value
                    },
                    inserted(a, b) {
                        a.parentNode.style.backgroundColor = 'blue'
                    },
                    update(a, b) {
                        a.value = b.value
                    }
                }
            }

        })
    </script>

inserted:元素被插入到页面之后,这个函数自动调用。

update:当模板重新解析的时候,这个函数会被自动调用。

三、class绑定形式

1、字符串形式

确定动态绑定的样式个数只有一个,但是名字不确定,采用字符串形式。

2、数组绑定

当样式的个数和名字都不确定shi,可以采用数组形式。

3、对象形式

样式的个数和名称是固定的,但是需要动态的决定样式用还是不用。

    <script src="../1.Vue/js/vue.js"></script>
    <style>
        .any {
            border: 1px solid;
            background-color: aqua;
        }

        .big {
            width: 200px;
            height: 200px;
        }

        .small {
            width: 100px;
            height: 100px;
        }

        .active {
            font-size: 15px;
            color: pink;
        }
    </style>
</head>

<body>
    <div class="vues">
        <h1>{{msg}}</h1>
        <div class="any small">{{msg}}</div><br>
        <button @click="changeBig()">变大</button>
        <button @click="changeSmall()">变小</button>
        <div class="any" :class="change">{{msg}}</div><br>
        <div class="any" :class="arrays">{{msg}}</div><br>
        <div class="any" :class="classList">{{msg}}</div><br>
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: 'class事件',
                change: 'big',
                arrays: ['big', 'active'],
                classList: {
                    'active': true,
                    'big': true
                }
            },
            methods: {
                changeBig() {
                    this.change = 'big'
                },
                changeSmall() {
                    this.change = 'small'
                }
            }
        })
    </script>
</body>

四、条件渲染

1、v-show和template

v-show指令是通过修改元素的CSS样式的display属性来达到显示和隐藏的。

2、v-if和v-show的选择:

如果一个元素在页面上被频繁的隐藏和显示,建议使用v-show,因为此时v-if开销比较大。

使用v-if页面加载速度快,提高了页面的渲染效率。

3、template标签/元素

起到占位的作用,不会真正出现在页面上,也不会影响页面的结构。文章来源地址https://www.toymoban.com/news/detail-418473.html

    <div class="vues">
        <h1>{{msg}}</h1>
        <button @click="counter++">点击+1</button>
        <h1>{{counter}}</h1>
        <img :src="img1" v-if="counter % 2 == 1">
        <!-- <img :src="img2" v-if="counter % 2 == 0"> -->
        <img :src="img2" v-else><br><br>
        <template v-if="counter === 10">
            <input type="text">
            <input type="checkbox">
            <input type="radio">
        </template>
    </div>
    <script>
        new Vue({
            el: '.vues',
            data: {
                msg: 'zhouliu',
                counter: 0,
                img1: './images/1.jpg',
                img2: './images/2.jpg'
            }
        })
    </script>

到了这里,关于Vue:核心技术的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue核心语法

    我们以前都是用的框架来搭建的,省去了很多内容,今天我们从原始的方式来使用vue,下面是下载地址 未使用响应式 我们把注释去掉 从上面的演示可以看到,没有用响应式的时候,如果我们要变更元素,需要处理数据的逻辑,还需要再次操作一下DOM,很繁琐 let、var、const

    2024年02月12日
    浏览(31)
  • VUE2教程-基础-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要

    2024年02月17日
    浏览(44)
  • vue3模板-vscode设置(语法糖)

    选择菜单里的 文件 首选项 用户代码片段 vscode模板 结果 useCurrentInstance.ts

    2024年02月07日
    浏览(47)
  • 【Vue3 知识第三讲】模板语法、Vue3指令

    插值表达式 {{ data }} 可以用于渲染 Vue 中提供的数据。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 注:vue中的插值提供了真正的js环境,因此我们可以直接使用 JS 表达式 2.1 概述 指令是什么 指令就是一个自定义属性,Vue中的指令都是以 v

    2024年02月10日
    浏览(41)
  • [GN] Vue3.2 快速上手 ---- 核心语法2

    用在普通 DOM 标签上,获取的是 DOM 节点。 用在组件标签上,获取的是组件实例对象。 用在普通 DOM 标签上: 用在组件标签上: 父组件App使用子组件Person Person组件标签上使用ref 可以获取组件实例 但需要子组件代码中 使用defineExpose暴露内容 App.vue是父组件,Person是子组件 父

    2024年01月21日
    浏览(57)
  • Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测

    渐进式JavaScript框架,易学易用,性能出色,适用场景丰富的Web前端框架 功能是构建用户界面 基于标准的HTML、CSS和JavaScript,提供了一套声明式的、组件化的编程模型,帮助高效得开发用户界面 1.1渐进式框架 渐进式框架:Vue是一个框架也是一个生态,功能覆盖了大部分前端的

    2024年02月09日
    浏览(41)
  • JavaScript的三大组成部分是什么?JavaScript的核心组成部分解析:语法、BOM和DOM

    🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言

    2024年02月10日
    浏览(44)
  • Vue:核心技术

    1、{{可以写什么}}: ①在data中声明的变量,函数都可以。②常量都可以。③只要是合法的JavaScript表达式都可以 ④模板表达式都被放在沙盒中,只能访问全局变量的一个白名单:  \\\'Infinity,undefined,NaN,isFinite,isNaN,\\\'  \\\'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,

    2023年04月19日
    浏览(37)
  • 什么是区块链?区块链的核心技术包括哪些?

    简介:区块链作为一种分布式记账技术,目前已经被应用到了资产管理、物联网、医疗管理、政务监管等多个领域。从网络层面来讲,区块链是一个对等网络(Peer to Peer,P2P),网络中的节点地位对等,每个节点都保存完整的账本数据,系统的运行不依赖中心化节点,因此避免

    2023年04月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包