数据声明和绑定
数据声明
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
有问题可以下方留言，看到了会回复哦