Vue基本

最新推荐文章于 2024-07-12 16:55:56 发布

丶Parousia

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量73

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_33721570/article/details/93407366

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue基础

指令

指令是绑定在dom属性上的
v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）
v-text：可以将一个数据展示在一个dom的内容中（相当于使用了 innerText）
条件渲染的指令
v-show ：可以控制一个dom的显示隐藏（这个指令操作的是dom的display属性）
v-if：可以控制一个dom的存在与否（创建和销毁）
v-else:可做双路分支的一个判断
v-else-if：可做多路分支的一个判断
v-if vs v-show 区别

v-if 操作的是dom元素（组件）的创建或是销毁
v-show 操作的是dom元素的display属性
v-if可以有多种使用形式：单路分支，多路分支，双路分支
v-show 只能写一个单路形式
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for

数组 v-for = " (item,index) in arr " item是arr中每一个元素
对象 v-for = "(item,key,index) in obj " item是obj的属性值
json类型数据
嵌套类型数据

mustache 语法糖

jsx: javascript + xml
可以让我们在dom结构中输写javascript
{{ msg }}
是 this.msg 简写
this.$data.msg -> this.msg -> msg

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>
<script>
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 '这是一个函数'
      }
    }
  })
</script>
</html>

丶Parousia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基本

vue基本指令指令是绑定在dom属性上的v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）v-text：可以将一个数据展示在一个dom的内容中（相当于使用了 innerText）条件渲染的指令v-show ：可以控制一个dom的显示隐藏（这个指令操作的是dom的display属性）v-if：可以控制一个dom...
复制链接

扫一扫