数据声明

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 却改变了

  大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。

未经本人允许，禁止转载

后续会推出

前端：vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等

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

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