Data declaration and binding
Data declaration
VIEW2
HTML file
Refer to the vue Chinese document
HTML to demonstrate the
document address: click to enter
The official document is like this
<div id="app"></div>
<script>
const data = {
a: 1 }
const vm = Vue.createApp({
data(){
return data
}
}).mount('#app')
console.log(vm.a)
</script>
Declare data a=1 to
create a component instance and mount
mount is a mount, life cycle function
Browser print result
Another way of writing
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)
Same effect
VUE project
<template>
<div></div>
</template>
<script>
export default {
name: "Test1125",
data() {
return {
a: 1,
b: 2,
c: true,
d: "I,dog"
};
}
};
</script>
<style scoped></style>
Data binding use
The document gives the following
v-text
Update element text value
The documentation gives
<h1 v-text="d"></h1>
<h1>{
{d}}</h1>
v-html
Render HTML elements
The documentation gives
Use
in data
testHtml: "<span style='color: red'>我是狗</span>"
div
<div v-html="testHtml"></div>
v-show
Switch the display
case of the element ,
c is 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
The function of v-if is the same as v-show,
but it will destroy the reconstructed element and the bound data according to whether the value is true.
<div>
<h1>我是狗</h1>
<div v-if="!c">我不是狗</div>
<h1>我是狗</h1>
</div>
Comparison of v-if and v-show
v-show
v-if
v-else
The previous sibling element must appear v-if or v-else-if before using v-else
Where a=1
<div>
<h1>我是狗</h1>
<div v-if="a === 0">我不是狗</div>
<div v-else>我就是狗</div>
<h1>我是狗</h1>
</div>
v-else-if
The previous sibling element must appear v-if or v-else-if before using v-else
<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
Render the list according to the amount of data,
such as shopping carts, data lists, etc
.: the key is a sort reminder
The documentation gives
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
Can be abbreviated as @
Usage: bind event listener
<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
Bind data
<img v-bind:src="imgSrc" />
imgSrc:"/1.jpg"
v-model
Two-way data binding
<div>
<input v-model="d" />
<h2>{
{d}}</h2>
</div>
d: "I,dog"
v-slot
User slot I wo
n’t explain it in detail here.
v-pre
Skip element and child element compilation process
<div>
<div v-pre>
{
{ a }}
<span v-pre>{
{ b }}</span>
</div>
</div>
a: 1,
b: 2,
v-cloak
The documentation gives
<style scoped>
[v-cloak]{
display: none;
}
</style>
v-once
Elements and data will only be rendered once.
Here is a comparison
<div>
<button @click="a = 2">点击</button>
<div v-once>{
{ a }}</div>
<button @click="b = 2">点击</button>
<div>{
{ b }}</div>
</div>
It can be seen that after the rendering of a is initially 11, clicking to modify the value of a is useless,
but b has changed
Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Will be launched later
Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
If you have any questions, you can leave a message below, I will reply if you see it