码迷,mamicode.com
首页 > 其他好文 > 详细

vue中的插值表达式和指令

时间:2020-07-29 00:40:42      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:元素   函数   top   行修改   全局   需要   描述   执行   点击   

官网上对于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中的插值表达式和指令

标签:元素   函数   top   行修改   全局   需要   描述   执行   点击   

原文地址:https://www.cnblogs.com/z-lin/p/13394607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!