vue的基本指令

一休、り

已于 2022-05-11 11:47:58 修改

阅读量506

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-11 11:14:42 首次发布

本文链接：https://blog.csdn.net/m0_46322755/article/details/124705575

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue之 - `基本的代码结构`和`插值表达式`、`v-cloak`

使用 v-cloak 能够解决插值表达式闪烁的问题
- 页面初始化时，html会出现短暂的 {{}}，再加载页面。
- 原因：html页面加载时先构建dom，再加载vue。在vue初始化完成前，dom将{{}}代码解析为文本，在vue初始化后才会把{{}}解析成vue的语法，此时列表渲染会有短暂的一闪的情况。
- 除了用v-cloak解决，还可以使用template标签将需要渲染的 html 包起来。
```
 <p v-cloak>++++++++ {{ msg }} ----------</p>
```

Vue指令之`v-text`和`v-html`

默认 v-text 是没有闪烁问题的
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，不会解析标签
v-html会覆盖元素中原本的内容，会解析标签。它会先移除节点下的所有节点，调用HTML方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

Vue指令之`v-bind`的三种用法

直接使用指令v-bind，v-bind: 是 Vue中，提供的用于绑定属性的指令
使用简化指令:
v-bind 中，可以写合法的JS表达式

在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

<div id="app">
    <p>{{msg}}</p>
    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">1212112</div>

     <input type="button" value="按钮" v-bind:title="mytitle + '123'"> 
    <!-- Vue 中提供了 v-on: 事件绑定机制 可以简写成@-->
     <input type="button" value="按钮1" :title="mytitle + '123'" v-on:click="alert('hello')"> 
    <input type="button" value="按钮2" @click="show">
  </div>

  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: {
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>

效果：

Vue指令之`v-on`和`跑马灯`

跑马灯效果

补充知识：

javascript中的substring(from,to)方法：

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。
from是必须的，是一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。
to是可选的。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。
- var str=“string Object”;
  document.write(str.substring(4));//ng Object
  document.write(str.substring(3,8));//ng Ob

HTML结构：


<div id="app">

    <p>{{info}}</p>

    <input type="button" value="开启" v-on:click="go">

    <input type="button" value="停止" v-on:click="stop">

  </div>

Vue实例：

	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        info: '浪起来~！',
        intervalId: null
      },

      methods: {
        go() {
          // 如果当前有定时器在运行，则直接return
          if (this.intervalId != null) {
            return;
          }

          // 开始定时器
          this.intervalId = setInterval(() => {
			//截取第一个字符放到最后var start=this.info.substring(1),var 					  end=this.info.substring(0, 1);
            this.info = this.info.substring(1) + this.info.substring(0, 1);
          }, 500);
        },
        stop() {
          clearInterval(this.intervalId);

        }

      }

    });

Vue指令之`v-on的缩写`和`事件修饰符`

指令v-on

v-on:事件绑定机制
可简写成：@

事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

1、html结构

.stop阻止冒泡，正常情况，点击按钮，事件从里向外触发，先输出按钮，然后inner盒子，再到outer盒子，添加.stop事件后，点击按钮，只执行按钮的事件处理，阻止冒泡行为

<!--.stop阻止冒泡行为-->
<div class="outer" @click="outHanddle" id="app">
      <div class="inner" @click="innerHanddle">
        <input type="button" value="戳他" @click.stop="btnHanddle">
      </div>
    </div>

在这里插入图片描述

.capture，正常情况，点击按钮，事件从里向外触发，先触发按钮，再触发inner盒子，添加.capture事件后，点击按钮，触发捕获事件，从外向里捕获，先触发inner盒子，再触发按钮.

<!--capture,从外向里捕获-->
<div class="inner" id="app" @click.capture="outHanddle">
    <div class="div2" @click="innerHanddle">
        <input type="button" value="戳我" @click="btnHanddle">
    </div>
</div>

.prevent阻止默认行为,正常情况，点击1链接跳转会另起一页，添加.prevent后，点击链接在本页跳转

 <!--使用 .prevent 阻止默认行为-->
      <a href="http://www.baidu.com" @click.prevent="linkHanddle">不要找我，找百度</a>

.self,只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为,

<div class="outer" @click="outHanddle">
       <div class="inner" @click.self="innerHanddle">
         <input type="button" value="戳他" @click="btnHanddle">
       </div>
     </div>
     ```

在这里插入图片描述
5. .once 只触发一次事件处理函数，点击链接触发linkHanddle事件，再点击链接就跳转到href的地址
javascript <a href="http://www.baidu.com" @click.prevent.once="linkHanddle">有问题，先去百度</a>
2、 Vue实例：

<script>
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{
            outHanddle: function () {
                console.log("out被你点击了=========");
            },
            innerHanddle: function () {
                console.log("inner被你点击了---------------");
            },
            btnHanddle: function () {
                console.log("btn被你点击了。。。。。。。。。。。。。。");
            },
            linkHanddle:function(){
                console.log("link被你戳了。。。。。");
            }
        }
    })
</script>

Vue指令之`v-model`和`双向数据绑定`

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
使用 v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在表单元素中

<body>
<div id="app">
    <h1>{{msg}}</h1>
    <!--<input type="text" style="width: 100%" v-bind:value="msg">-->
    <input type="text" style="width: 100%" v-model="msg">
</div>

<script src="lib/vue-2.4.0.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'我爱学习，我爱劳动，我爱思考，我爱反思'
        }
    })
</script>
</body>