建筑工程网上办事系统_营销型企业网站制作_收录优美图片_普通话手抄报文字内容

为了快速熟悉Vue,学习下互动教程。

早上出门有事情,没学完,学到哪算哪

互动教程(Vue3)

声明式渲染

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

能在改变时触发更新的状态被认为是响应式的。在 Vue 中，响应式状态被保存在组件中。

小结

使用 data 组件选项来声明响应式状态，该选项应该是一个返回对象的函数
使用双花括号"{{ “状态值” }}"渲染文本（双大括号写法又名:mustache语法)
双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式

<script>
export default {// 返回一个Object,其中name属性的"状态"/值是字符串"张三"data() {return {name:"Zhangsan",gender:"male"}}
}
</script><template>// 渲染name属性<h1>{{ name }}</h1><h1>{{ gender }}</h1><h1>{{ this.gender.split('') }}</h1>
</template>

2025-04-07 08.53.40.png

Attribute 绑定

在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

示例代码
要求: 把一个动态的 class 绑定添加到这个 <h1> 上，并使用 titleClass 的数据属性作为它的值。如果绑定正确，文字将会变为红色

<div v-bind:id="dynamicId"></div>
# 简写
<div :id="dynamicId"></div>

<script>
export default {data() {return {titleClass: 'title'}}
}
</script><template><h1>Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template><style>
.title {color: red;
}
</style>

这个一开始没理解

# 这样写没有效果,看了参考答案明白了
<h1 :id="titleClass">Make me red</h1>

要延伸一下,JS可以通过 id,class,name 等找到页面的元素,示例只是以id为例,所以有个title的样式,就明白v:bind绑定了

<h1 :class="titleClass">Make me red</h1>

2025-04-07 09.11.50.png

再验证下,绑定id

<script>
export default {data() {return {titleClass: 'title',today:'mondy'}}
}
</script><template><h1 :class="titleClass">Make me red</h1> <h1 :id="today">Make me green</h1> 
</template><style>
.title {color: red;
}
#mondy {color: green;    
}
</style>

2025-04-07 09.22.19.png

小结:

使用 v-bind:id=“dynamicId” 绑定元素,可以给属性一个动态值
v-bind:id=“dynamicId” 可以简写为 :id=“dynamicId”

事件监听

可以使用 v-on 指令监听 DOM 事件

<button v-on:click="increment">{{ count }}</button>

简写

<button @click="increment">{{ count }}</button>

实现一个点击自增的按钮效果

<script>
export default {data() {return {count: 0}},methods: {increment() {this.count++},incremetMore() {this.count += 2}}
}
</script><template><button @click="incremetMore">Count is: {{ count }}</button>
</template>

2025-04-07 09.33.58.png

小结:

使用 v-on:click=“方法名” 监听点击事件
v-on:click="方法名"可以简写为 @click=“方法名”
methods里定义方法列表

表单绑定

可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定

<input :value="text" @input="onInput">

methods: {onInput(e) {// v-on 处理函数会接收原生 DOM 事件// 作为其参数。this.text = e.target.value}
}

为了简化双向绑定，Vue 提供了一个 v-model 指令，它实际上是上述操作的语法糖：

<input v-model="text">

示例代码

<script>
export default {data() {return {text: ''}},methods: {onInput(e) {this.text = e.target.value}}
}
</script><template>// 双向绑定: input通过:value绑定(bind)了状态值里的text,input事件触发methods里的onInput方法<input :value="text" @input="onInput" placeholder="Type here"><p>{{ text }}</p>
</template>

使用v-model进行简写

<script>
export default {data() {return {text: ''}}
}
</script><template>// 双向绑定: input通过:value绑定(bind)了状态值里的text,input事件触发methods里的onInput方法<input v-model="text" placeholder="Type here"><p>{{ text }}</p>
</template>

2025-04-07 09.42.03.png

小结:

使用 v-model=“状态值”,可以实现双向绑定,支持文本输入框，多选框、单选框、下拉框 – 开发时更关注状态的变化,建立绑定很多时候是必要的苦力活

条件渲染

可以使用 v-if 指令来有条件地渲染元素

<h1 v-if="awesome">Vue is awesome!</h1>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

这个没啥好说的,很自然的逻辑，过一下用例即可

<script>
export default {data() {return {awesome: true}},methods: {toggle() {// ...}}
}
</script><template><button @click="toggle">Toggle</button><h1>Vue is awesome!</h1><h1>Oh no 😢</h1>
</template>

示例程序同时展示了两个 <h1> 标签，并且按钮不执行任何操作。尝试给它们添加 v-if 和 v-else 指令，并实现 toggle() 方法，让我们可以使用按钮在它们之间切换。

<script>
export default {data() {return {awesome: true}},methods: {toggle() {// 值取反this.awesome = !this.awesome}}
}
</script><template><button @click="toggle">Toggle</button><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1>
</template>

小结:

可以使用v-if="状态值",v-else 实现根据状态值来执行不同的操作

参考

Vue互动教程