vue中的插值表达式和指令

Posted 2020-12-19 z-lin

官网上对于vue的描述是一套用于构建用户界面的渐进式框架，wo的理解就是vue不会强制要求项目中完全都由vue来实现

// 引入了vue.js文件，vue.js文件会暴漏一个全局的Vue构造函数
// 初始化一个vue实例， 需要指定 视图  数据
const vm = new Vue({
      el: ‘#app‘,
      data: {
        msg: ‘hello vue‘
      }
    })
// el不能指定为body或者html, 应该是一个div
// 如果想要修改页面中的内容，data中所有的数据都添加给了vm对象,可以通过vm.xxx 进行修改

1.vue中的插值表达式

{{}}在vue中就叫插值表达式，可以在视图中显示data中的数据

注意：

{{}}中使用的数据必须在data中存在;

{{}} 虽然能够使用表达式， 不能出现js的语句，不能在{{}}中写if for;

{{}} 不能在属性中使用

 

2.修饰符由事件修饰符和键盘修饰符

.prevent 阻止浏览器默认行为

.stop 阻止冒泡

.capture 捕获阶段执行

.self 只有点击自己执行，点击子元素不执行

.once 只执行一次

.enter

.esc

.tab

 

3.指令

vue总共提供了14个指令 自定义指令，vue提供了每一个指令都有特殊的作用，具体作用

vue指令实质上就是html标签特殊的属性，vue给html标签增加了一些自定义的属性， 这些属性都是以 v-开头 都叫vue的指令

 

3.1v-bind指令

  <!-- 
      v-bind用于访问data中的数据，在标签的属性中使用
      v-bind:属性名="属性的值"

      v-bind使用的场景非常非常多。v-bind能够简写
      v-bind:title 简写为  :title
      v-bind:src 简写  :src
      注意: v-bind访问的值必须在data中存在的
   -->
   <div id="app">
     <img v-bind:src="imgUrl" v-bind:title="msg" alt="alt">
     <img :src="imgUrl" :title="msg" alt="">
   </div>