首页 > 其他分享 >Vue模板语法——数据绑定指令

Vue模板语法——数据绑定指令

时间:2024-01-28 12:14:22浏览次数:23  
标签:pre Vue 填充 text 绑定 HelloWorld 指令 模板

一、数据绑定指令

  1. v-text 填充纯文本

    相比插值表达式更加简洁

  2. v-html 填充HTML片段

    • 存在安全问题
    • 本网站内部数据可以使用,来自第三方的数据不可以用
  3. v-pre 填充原始信息

    显示原始信息,跳过编译过程(分析编译过程)


二、v-text 填充纯文本

  1. v-text用法

    在需填充的标签中添加v-text指令

  2. 例如

      <div id='app'>
        <div v-text="msg"></div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'HelloWorld'
               }
         })
      </script>

结果:HelloWorld

三、v-html 填充HTML片段

  1. v-html用法

    在需填充的标签中添加v-html指令

  2. 例如

      <div id='app'>
        <div v-html="msg"></div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'<h1>HelloWorld</h1>'
               }
         })
      </script>

结果:

HelloWorld

四、v-pre 填充原始信息

  1. v-pre用法

    在需填充的标签中添加v-pre指令

  2. 例如

      <div id='app'>
        <div v-pre>{{msg}}</div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'<h1>HelloWorld</h1>'
               }
         })
      </script>

标签:pre,Vue,填充,text,绑定,HelloWorld,指令,模板
From: https://www.cnblogs.com/luluping/p/17992688

相关文章

  • Vue模板语法——v-once 数据响应式
    一、数据响应式如何理解响应式html5中的响应式:屏幕尺寸的变化导致样式的变化数据的响应式:数据的变化导致页面内容的变化什么是数据绑定数据绑定:将数据填充到标签中v-once只编译一次显示内容之后不再具有响应式功能二、v-once指令v-once应用场景如果显示的......
  • Vue模板语法——v-model 双向数据绑定
    双向数据绑定单向数据绑定是什么?数据模型(Module)和视图(View)之间的单向绑定。需要我们先写好模板,然后把模板和数据(可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。简单的来说就是DOM操作html元素。单向数据绑定的缺点:一旦HTML代码生成好后,就没有办......
  • Vue模板语法——v-on 事件绑定
    一、v-on事件绑定v-on指令用于绑定事件v-on用法转=>最底层的技术渣--Vue基础语法之v-on转=>一瓶怡宝矿泉水--v-on指令直接绑定事件:注意:绑定的事件是对应的方法不是定义在data里面,而是定义在vue实例的methods里绑定的函数可直接绑定函数名——fun,也可以直接调用......
  • Vue模板语法——键盘事件修饰符
    一、键盘修饰符在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:enter:回车键tab:制表键delete:含delete和backspace键esc:返回键......
  • Vue模板语法——事件修饰符
    一、事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event,把它传入到methods中的方法中。在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:......
  • 创建Vue项目,报错spawn yarn ENOENT
    1.使用vue创建项目的时候,报错Error:spawnyarnENOENT1.1用户自己设置了默认的包管理yarn1.2没有安装yarn解决方式1:打开C盘,在C盘里,打开users(用户名)的文件夹,然后在右侧搜索名为.vuerc的文件修改.vuerc文件解决方式2:没有安装yarn,那么直接输入命令npmin......
  • Vue模板语法——v-cloak
    一、什么是指令指令的本质就是自定义属性指令的格式:以v-开始,比如:v-cloak二、v-cloak指令用法插值表达式存在的问题:“闪动”如何解决该问题:使用v-cloak指令解决该问题原理:先隐藏,替换好值后再显示最终的值三、v-cloak指令的用法提供样式[v-cloak]{display:......
  • vue响应性原理
     核心实现类Observer:它的作用是给对象的属性添加getter和setter,用于依赖收集和派发更新Dep:用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个Dep实例(里面subs是Watcher实例数组),当数据有变更时,会通过dep.notify()通知各个watcher。W......
  • 前端VUE
    1、   export和exportdefault的区别exportdefaultxxximportxxxfrom'./'exportxxximport{xxx}from'./'在一个文件或模块中,export、import可以有多个,exportdefault仅有一个通过export方式导出,在导入时要加{},exportdefault则不需要 2、    vuenextt......
  • Vue 之 Mixins (混入)
    Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。什么时候使用Mixins 1.页面的风格不用,但是执行的方法和需要的数据类似,我们是选择每个都写呢还是提取出公共部分呢? 基础实例我们有一对不同的组件,它们的作用是切换一个状态布尔值,一个模态框和一个提示框。这些......