VUE2快速入门(三)---数据声明和绑定使用
代码哈士奇 121 2

数据声明

VUE2

HTML文件中

参考vue中文文档 HTML来演示 文档地址:点击进入

官方给出的文档是这样的

在这里插入图片描述

<div id="app"></div>
<script>
    const data = {
        a: 1
    }
    const vm = Vue.createApp({
        data() {
            return data
        }
    }).mount('#app')

    console.log(vm.a)
</script>

声明数据 a=1 创建组件实例并挂载 mount是挂载,生命周期函数 在这里插入图片描述

浏览器打印结果

另外一种写法

const vm = Vue.createApp({
    data() {
        return {
            a: 1,
            b: 2,
            c: "hahahaha",
            d: true
        }
    }
}).mount('#app')

console.log(vm.a + vm.b + vm.c + vm.d)

效果一样

VUE项目中

<template>
  <div></div>
</template>

<script>
export default {
  name: "Test1125",
  data() {
    return {
      a: 1,
      b: 2,
      c: true,
      d: "I,dog"
    };
  }
};
</script>

<style scoped></style>

数据绑定使用

文档给出的是以下

在这里插入图片描述

v-text

更新元素文本值

文档给出 在这里插入图片描述

<h1 v-text="d"></h1>
    <h1>{{d}}</h1>

在这里插入图片描述

v-html

渲染HTML元素

文档给出 这里是引用

使用 在data中

 testHtml: "<span style='color: red'>我是狗</span>"

div中

 <div v-html="testHtml"></div>

在这里插入图片描述

v-show

切换元素的display 用例如下 c为true

<div>
    <h1>我是狗</h1>
    <div v-show="c">我不是狗</div>
    <h1>我是狗</h1>
</div>

在这里插入图片描述

<div>
    <h1>我是狗</h1>
    <div v-show="!c">我不是狗</div>
    <h1>我是狗</h1>
</div>

在这里插入图片描述 在这里插入图片描述



v-if

v-if作用和v-show一样 但是会根据数值是否为true来销毁重建元素以及绑定的数据

<div>
    <h1>我是狗</h1>
    <div v-if="!c">我不是狗</div>
    <h1>我是狗</h1>
</div>

在这里插入图片描述 在这里插入图片描述

v-if和v-show对比

v-show 在这里插入图片描述 v-if 在这里插入图片描述

v-else

使用v-else前一兄弟元素必须出现v-if或v-else-if

这里a=1

 <div>
    <h1>我是狗</h1>
    <div v-if="a === 0">我不是狗</div>
    <div v-else>我就是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述



v-else-if

使用v-else前一兄弟元素必须出现v-if或v-else-if

 <div>
    <h1>我是狗</h1>
    <div v-if="a === 0">我不是狗</div>
    <div v-else-if="a === 1">我是狗?</div>
    <div v-else>我就是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述



v-for

根据数据的多少来渲染列表 比如购物车,数据列表等 :key是排序提醒

文档给出这里是引用

myItems: [
        { name: "dog", id: 1 },
        { name: "cat", id: 2 }
      ]
<div v-for="item in myItems" :key="item.id">我的名字是{{item.name}},我的id是{{item.id}}</div>

在这里插入图片描述



v-on

可以缩写成@ 用法:绑定事件监听器

<button @click="hello">点我点我</button>


export default {
  name: "Test1125",
  data() {
    return {
      a: 1,
      b: 2,
      c: true,
      d: "I,dog",
      testHtml: "<span style='color: red'>我是狗</span>",
      myItems: [
        { name: "dog", id: 1, idw: 2 },
        { name: "cat", id: 2, idw: 1 }
      ]
    };
  },
  methods:{
    hello(){
      alert("hello");
    }
  }
};

在这里插入图片描述



v-bind

绑定数据

 <img v-bind:src="imgSrc" />
 imgSrc:"/1.jpg"

在这里插入图片描述



v-model

双向绑定数据

 <div>
    <input v-model="d" />
    <h2>{{d}}</h2>
  </div>

 d: "I,dog"

在这里插入图片描述



v-slot

用户插槽 此处不详细解释,后面讲插槽会详细将



v-pre

跳过元素以及子元素编译过程

 <div>
    <div v-pre>
      {{ a }}
      <span v-pre>{{ b }}</span>
    </div>
 </div>
  a: 1,
  b: 2,

在这里插入图片描述



v-cloak

文档给出 这里是引用

<style scoped>
  [v-cloak]{
    display: none;
  }
</style>



v-once

元素和数据只会渲染一次 下面是对比

<div>
    <button @click="a = 2">点击</button>
    <div v-once>{{ a }}</div>
    <button @click="b = 2">点击</button>
    <div>{{ b }}</div>
  </div>

在这里插入图片描述可以看出a初始为11渲染完成后,点击修改a值并没用 但是b 却改变了







  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!

未经本人允许,禁止转载

在这里插入图片描述


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910

有问题可以下方留言,看到了会回复哦

预览图
评论区

索引目录