Vue.js基础(二)

最新推荐文章于 2024-08-05 19:35:10 发布

secretccy

最新推荐文章于 2024-08-05 19:35:10 发布

阅读量102

点赞数

分类专栏： Vue.js 文章标签： Vue.js

本文链接：https://blog.csdn.net/weixin_44280027/article/details/102628810

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.mustache语法

内容：必须加
属性: 属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
挂载在window身上的全局属性，不能使用
mustache语法中不写流程控制
mustache语法中支持三元表达式，同样也支持运算符
短路原则也是支持的

2.指令

指令的目的是做什么：操作DOM
vue数据驱动原理是什么？/vue双向数据绑定原理是什么？/vue深入响应式原理是什么？
- vue是通过数据劫持和事件的订阅发布模式来实现的，数据劫持指的是vue通过observer观察者对象对data选项中的属性做getter和setter设置，然后通过事件的事件的订阅发布来监听data中数据的变化，只要数据一边，就会重新触发视图的更新
v-html 转义输出，也就是可以解析 xml 数据
v-text：非转义输出，也就是无法解析 xml 类型数据
v-bind
将数据和属性进行单向数据绑定：将vue中数据赋值给属性值

   <img v-bind:src="src" alt="">
   <img :src="src" alt="">

类名绑定

    类名绑定的对象形式
    <p :class = "{ bg: true,size: true }"></p>
    <p :class = "{ bg: true,size: false }"></p>
    <p :class = "{ [classA]: true,[classB]: true }"></p>

    类名绑定的数组形式
    <p :class = "[ 'size','bg' ]"></p>
    <p :class = "[ classA,classB ]"></p>
    <p :class = "[ classA,classB,5>3?'a':'b']">  </p>

样式绑定

    样式绑定的对象形式
    <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
    <p :style = "styleObj"></p>

    样式绑定的数组形式
    <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
    <p :style = "[size,bg]"></p>

条件渲染
- v-if
- v-else-if
- v-else
- v-show 条件展示

    <h3> 条件渲染 - 单路分支 </h3>
    <p v-if = "flag"> A </p>
    
    <h3> 条件渲染 - 双路分支 </h3>
    <p v-if = "flag"> A </p>
    <p v-else > B </p>
    
    <h3> 条件渲染 - 多路分支 </h3>
    <p v-if = "type === '美食'"> 美食 </p>
    <p v-else-if = " type === '游戏' "> 游戏 </p>
    <p v-else> 睡觉 </p>
    
    <h3> 条件展示 </h3>
    
    <p v-show = " showFlag "> 条件展示 </p>

列表渲染
- v-for

  <div id="app">
    <ul>
      <li v-for = "(item,index) of arr" :key = "index">
        {{ item }} -- {{ index }}
      </li>
    </ul>

    <ul>
      <li v-for = " item in 10" > {{ item }} </li>
    </ul>

    <ul>
      <li v-for = "(item,key,index ) in obj" :key = "item.card">
        <p> item -- {{ item }} --  key -- {{ key }} -- index -- {{ index }}</p>
      </li>
    </ul>

    <ul>
      <li v-for = 'item in json' :key = "item.id">
        <h3> {{ item.type }} </h3>
        <ul>
          <li v-for = "brand in item.brands" :key = 'brand.id'>
            <p> {{ brand.type }} </p>
          </li>
        </ul>
      </li>
    </ul>

  </div>
  
  <script>
   new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        card: 1,
        name: 'huangfengfeng',
        age: 16,
        sex: 'man'
      },
      json: [
        {
          id: 1,
          type: '笔记本',
          brands: [
            {
              id: 1,
              type: '苹果'
            },
            {
              id: 2,
              type: '戴尔'
            },
            {
              id: 3,
              type: '联想'
            },
            {
              id: 4,
              type: '雷蛇'
            }
          ]
        },
        {
          id: 2,
          type: '手机',
          brands: [
            {
              id: 1,
              type: '华为'
            },
            {
              id: 2,
              type: '小米'
            },
            {
              id: 3,
              type: '联想'
            },
            {
              id: 4,
              type: 'vivo'
            }
          ]
        }
      ]
    }
  })
  </script>

事件处理器
- v-on

 <body>
    <div id="app">
      <button v-on:click="incremnt">点击</button>
      <button @click="incremnt">点击</button>
      <p>{{ count }}</p>
    </div>
  </body>

  <script>
    /* 
    v-on 
      一个完整的事件
        事件源
        事件类型
        事件处理程序
    为什么vue选择 v-on 来做 

    事件的使用流程
      先写事件处理程序，在去绑定dom

    事件处理程序我们都放在了methods选项中

    v-on:click = "方法名称"  简写为  @click = "方法名称"

    
  */
    new Vue({
      data: {
        count: 0
      },
      el: '#app',
      methods: {
        incremnt() {
          this.count++
        }
      }
    })
  </script>