mustache-指令-样式-事件-v-model-1

最新推荐文章于 2024-08-20 18:05:43 发布

azmingliang

最新推荐文章于 2024-08-20 18:05:43 发布

阅读量717

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/azmingliang/article/details/95530898

博客介绍了mustache指令，包括语法糖{{}}，指出{{ msg }}是this.msg的简写。还阐述了支持的js数据类型划分，如基础、复杂、特殊数据类型等。提到mustache绑定dom属性，在Vue 1.0叫属性指令，Vue 2.0统称指令，用于操作dom，且语法属性写法属性值无需{{ }}。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mustache 指令样式事件 v-model -1

mustache

语法糖 {{}}
{{ msg }}是this.msg 简写 this.$data.msg -> this.msg -> msg

<body>
 <div id="app">
   <p> {{ this.msg }} </p>
   <p> {{ this.$data.msg }} </p>
   <p> {{ this._data.msg }} </p>
   <p> {{ msg }} </p>
 </div>
</body>

var vm = new Vue({
   el: '#app',
   data: {
     msg: 'hello vue.js'
   }
 })
 // var vm = new Vue({
 //   el: `
 //     <div id="app">
 //       <p> {{ ${ this.msg } }} </p>
 //     </div>
 //   `,
 //   data: {
 //     msg: 'hello vue.js'
 //   }
 // })
 console.log('====================================');
 console.log( vm );
 console.log('====================================');

支持的数据类型
数据类型的划分
第一种：
基础数据类型： number string boolean
复杂数据类型: Object( array function )
特殊数据类型: null undefined
第二种划分：
初始数据类型: number string boolean null undefined
引用数据类型: object( array function )
结论：mustache支持我们js的数据类型的
conosle.log 和 alert在我们mustache语法中是不支持的

<body>
  <div id="app">
    <p> number: {{ num }} </p>
    <p> string: {{ str }} </p>
    <p> boolean: {{ bool }} </p>
    <p> null: {{ nul?'1':'2' }} </p>
    <p> undefined: {{ und && 1 || 2 }} </p>
    <p> object: {{ obj.name }} </p>
    <p> array: {{ arr[0] }} </p>
    <p> fn: {{ fn() }} </p>
    <!-- <p> console.log: {{ console.log( 1 ) }} </p>
    <p> alert: {{ alert( 2 ) }} </p> -->
  </div>
</body>

var vm = new Vue({
    el: '#app',
    data: {
      num: 100,
      str: 'hello Vue.js',
      bool: true,
      nul: null,
      und: undefined,
      obj: {
        name: 'Gabriel Yan'
      },
      arr: [1,2,3,4],
      fn: function () {
        alert( 2 )
        return '这是一个函数'
      }
    }
  })

mustache 绑定 dom的属性
案例： v-html
分析：发现dom元素直接有了一个内容,这种属性绑定就是为了操作dom
结论：这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
Vue 1.0 叫它属性指令（借鉴Angular来的）
Vue 2.0 统称为 ‘指令’
指令是用一个v-xxx表示
指令是用来操作dom
Vue中不允许直接操作dom
mustache语法—属性写法的属性值是直接写数据的，不需要使用 {{ }}
案例如下

<body>
  <div id="app">
    <p v-html = "h"></p>
    <p v-text = "msg"></p>
    <p v-text = " flag && 1 || 2 " > </p>
  </div>
</body>

var vm = new Vue({
    el: '#app',
    data: {
     msg: 'hello Vue.js',
     h: '<h3> hello Vue.js </h3>',
     flag: true
    }
  })
',
    data: {
     msg: 'hello Vue.js',
     h: '<h3> hello Vue.js </h3>',
     flag: true
    }
  })