Vue模板语法概述（指令，事件、属性、样式绑定，分支、循环结构）

最新推荐文章于 2022-09-08 22:57:39 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2022-09-08 22:57:39 发布

阅读量298

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Yueqin0512/article/details/109669235

版权

本文详细介绍了Vue模板语法，包括指令的使用，如数据响应式和双向数据绑定，事件绑定的多种方式，属性和样式绑定，以及分支和循环结构的应用。重点阐述了MVVM设计思想，事件修饰符以及如何处理动态属性和样式。

摘要由CSDN通过智能技术生成

Vue模板语法

如何理解前端渲染
把数据填充到html中（模板+数据=前端渲染（静态html内容））
前端渲染方式

原生js拼接字符串
使用前端模板引擎
使用Vue特有的模板语法

模板语法概述

插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

1. 指令

v-cloak指令语法

插值表达式存在的问题：闪动
如何解决该问题：使用v-cloak指令
解决该问题的原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好了之后再显示最终的结果

提供样式，再在插值表达式所在的标签中添加v-cloak指令

    <style>
    /*提供样式*/
        [v-cloak]{
    
            display: none;
        }
    </style>
    <body>
    <div id="app">
    <!-- 再在插值表达式所在的标签中添加`v-cloak`指令 -->
        <div v-cloak>{
  {msg}}</div>
    </div>
    <script>
        var vm = new Vue({
    
            el: '#app',
            data: {
    
                msg: 'Hello Vue'
            },
        })
    </script>
</body>

数据绑定指令

v-text填充纯文本
相比插值表达式更加简洁,无闪动问题

    <body>
    <div id="app">
        <div v-test = 'msg'></div>
    </div>
    <script>
        var vm = new Vue({
    
            el: '#app',
            data: {
    
                msg: 'Hello Vue'
            },
        })
    </script>

v-html填充html片段
存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用

    <body>
    <div id="app">
        <div v-html = 'msg'></div>
    </div>
    <script>
        var vm = new Vue({
    
            el: '#app',
            data: {
    
                msg: '<h1>哈哈，我是一个大大的H1</h1>'
            },
        })
    </script>

v-pre 填充原始信息
显示原始信息，跳过编译过程（分析编译过程）

数据响应式

如何理解响应式
html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据响应式（数据的变化导致页面内容的变化）
什么是数据绑定
数据绑定：将数据填充到标签中
v-once只编译一次
显示内容之后不再具有响应式功能

双向数据绑定

v-model指令用法

    <div id="app">
        <div>{
  {msg}}</div>
        <div>
            <input type="text" v-model = 'msg'>
        </div>
    </div>
        <script>
        	var vm = new Vue({
    
	            el: '#app',
	            data: {
    
	                msg: '123'
	            }
	        })
    </script>

msg会随着文本输入框的输入而改变
在这里插入图片描述

MVVM设计思想

M(Model)
V(View)
VM(View-Model)

2. 事件绑定

1. Vue如何处理事件

v-on指令用法
实现点击按钮num递增

<div id="app">
    <div>{
  {num}}</div>
    <div>
        <button v-on:click='num++'>加1</button>
        <!--<button @click='num++'>加1</button>-->
    </div>
</div>
    <script>
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            num:1
        }
    })
</script>

v-on简写形式@
<button @click='num++'>加1</button>

2. 事件函数的调用方式

直接绑定函数名称
<button @click="handle">点击2</button>

<div id="app">
    <</

最低0.47元/天解锁文章

吃不胖的猫o(=^ェ^=)m

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法概述（指令，事件、属性、样式绑定，分支、循环结构）

Vue模板语法如何理解前端渲染把数据填充到html中（模板+数据=前端渲染（静态html内容））前端渲染方式原生js拼接字符串使用前端模板引擎使用Vue特有的模板语法模板语法概述插值表达式指令事件绑定属性绑定样式绑定分支循环结构v-cloak指令语法插值表达式存在的问题：闪动如何解决该问题：使用v-cloak指令解决该问题的原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好了之后再显示最终的结果提供样式，再在插值表达式所在的标签中添加v-cloak
复制链接

扫一扫

专栏目录