vue中的插值表达式和指令

Posted z-lin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的插值表达式和指令相关的知识,希望对你有一定的参考价值。

官网上对于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>

以上是关于vue中的插值表达式和指令的主要内容,如果未能解决你的问题,请参考以下文章

Vue 知识整理—03-指令2

1.Vue模板语法有2大类(插值语法和指令语法)

JavaWeb:案例学习使用VUE中常用指令和插值表达式,VUE生命周期函数 mounted

9 插值表达式 v-on:clickv-htmlv-bind:title

vue入门:(模板语法与指令)

Vue基础(干货+代码)