阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 双向数据绑定

      VUE 是 View-Model-viewModel

      其中 viewModel 起到粘合剂的作用,连接 view 层和 Model 层;

      HTML 代码是 view 层的表现;Model 是数据的集合;

      可以通过 v-model 在 input 等表单输入标签上,实现数据的双向绑定;

      数据绑定就是将数据和视图相关联,互相影响,修改其中任一数据,都会立即体现到另外一层;

      输出 hello word

      首先介绍的一段话的渲染

      {{message}}  以文本的方式渲染出来;
      
      {{{message}}}   把message以HTML的方式渲染出来;注意写三个大括号的时候不要写成{{{}}这个了,webStorm2016亲测不能正常补全;
      

      这么写和 angular 一样有个确定 FOUCS 的现象,就是没有加载数据的时候,此时的模版没有被替换,直接显示出{{messagr}}这样的输出,非常不利于体验;如果你仅仅是输出一段话,那么推荐你可以用下面这种的写法;

      v-text=”message”
      
      v-html=”message”
      

      这样的写法;

      写在大括号里的这种写法也叫插值,v-*这种的写在在 vue 里叫做指令;

      {{}}插值的其他用法

      1、支持忽略同步

      2、支持作为自定义属性输出

      3、支持表达式(注意是表达式,不是语句;三目运算符是表达式,if 语句是属于语句,不属于运算符)

      4、支持过滤器;

      一、支持忽略同步;

      如果你仅仅只是想输出数据的初始值,那么并不推荐你这么做,推荐你下面这种的写法

      {{*messagr}} 这种渲染的时候,就只会渲染你第一次的值,后面修改并不会改变了;{{{*}}} 这也是同样的用法;

      二、支持作为自定义属性输出

      下面这种的用法也可以输出类名,ID 之类的

      <p data-text="{{classText}}">测试</p>

      三、支持表达式的写法

      注意一:if 是属于语句,不属于表达式;
      注意二:如果用三木运算符,请写完整,否则容易出问题;
      

      四、支持过滤器;

      注意有些教程的转换大写用的是 toUpperCase,这个方法是错误的,正确的是 uppercase; 版本 V2.0+’

      目录
      目录