Vue-2.0——v-text、v-html、v-cloak、v-on、v-bind、v-model

最新推荐文章于 2024-07-20 18:05:54 发布

千钧~

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/getchar97/article/details/104174681

版权

vue2.0 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、 `v-text`和`v-html`

v-text ：绑定的值一文本进行渲染与 {{}} 效果类似

区别在于 v-text 如果没有渲染完成将不做显示， {{}} 会回按原样显示
解决方式使用 v-cloak

	<!DOCTYPE html>
<html lang="en">
<head>
  <title>hello.vue</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
  [v-cloak]{
    display: none;
  }
  </style>
</head>
<body>
  <div id="app">
    <p v-cloak>{{key}}</p>
    <p v-text="key">你好</p>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        key:"vue"
      }
    })  
  </script>
</body>
</html>

v-html ：以html样式渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <title>hello.vue</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <p v-text="key">你好</p>
    <p v-html="key">html</p>
    <p v-html="vhtml">vhtml---</p>
    <p v-text="vhtml">v-html===</p>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        vhtml:"<h1>vue hello word</h1>",
      }
    })  
  </script>
</body>
</html>

2 、`v-bind` 属性绑定

写法
- 1、直接写 v-bind
- 2、简写为 :
- 3、可拼接 :title="key +' 拼接的东西' ;

    <p :title="key +' 拼接的东西'"> jidsjfi</p>

3、 `v-on` 事件

常简写为 @

事件修饰

 .stop       阻止冒泡
 .prevent    阻止默认事件
 .capture    添加事件侦听器时使用事件捕获模式，事件嵌套的是后先处理外层事件 ，
 .self       只当事件在该元素本身（比如不是子元素）触发时触发回调
 .once       事件只触发一次

4、键盘事件 @keyup

官方详细事件文档

5 、`v-model` 双向数据绑定

<div id="app">
      <p>{{msg}}</p>
      <input type="text" v-model="msg" />
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "爱学习，无可挑剔"
        }
      });
    </script>

页面数据改变 也会改变绑定值

总结

如何定义一个基本的Vue代码结构
插值表达式和 v-text
v-cloak
v-html
v-bind Vue提供的属性绑定机制缩写是 :
v-on Vue提供的事件绑定机制缩写是 @
v-model

千钧~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-2.0——v-text、v-html、v-cloak、v-on、v-bind、v-model

1、 v-text和v-htmlv-text ：绑定的值一文本进行渲染与 {{}} 效果类似区别在于 v-text 如果没有渲染完成将不做显示， {{}} 会回按原样显示解决方式使用 v-cloak <!DOCTYPE html><html lang="en"><head> <title>hello.vue</...
复制链接

扫一扫