<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app"></div>

<script>
//创建一个Vue实例
Vue.createApp({
template: '<p>Hello World</p>' //Vue容器中的模板内容
}).mount("#app") //Vue实例使用mount()方法挂载到根组件上
</script>
</body>
</html>

四.vue的基本语法

1.文本渲染指令

v-text：更新元素的innerText
v-html：更新元素的innerHTM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app"></div>

<script>
//创建一个Vue实例
Vue.createApp({
template: '<p>Hello World</p>' //Vue容器中的模板内容
}).mount("#app") //Vue实例使用mount()方法挂载到根组件上
</script>
</body>
</html>

2.属性绑定指令

v-bind

<body>
<div id="app">
<div v-bind:title="msg">DOM元素属性绑定</div>

<div :title="msg">DOM元素属性绑定</div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
msg:'Hello World!'
}
}
}).mount('#app');
</script>
</body>

上面展示的是v-bind的最基本的使用，第一种是完整语法，第二种是缩写方式。

v-bind简写就是:

除了将元素的title属性和vue实例的相关字段进行绑定外，还能将其他的属性字段进行绑定，最常见的是对于样式的绑定，即class和style属性。

3.事件绑定指令

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。

v-on指令可以简写为：@

<body>
<div id="app">

<button v-on:click="pointme">点击我</button>

<button @click="pointyou">点击你</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//methods:此处声明Vue方法
methods: {
pointme() {
alert('点击了我');
},
pointyou() {
alert('点击了你');
}
}
}).mount('#app');
</script>
</body>

4.条件渲染指令

条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。

4.1.v-if指令

当v-if的值为false时，网页中将不会对此元素进行渲染

<body>
<div id="app">
<div v-if="isShow">DOM元素的样式绑定</div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
isShow: false
}
}
}).mount('#app')
</script>
</body>

4.2.v-if指令和v-show指令

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 是简单地切换元素的 CSS 属性 display 。

<body>
<div id="app">
<div v-if="isShow">这里是v-if</div>
<div v-show="isShow">这里是v-show</div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
isShow: false
}
}
}).mount('#app');
</script>
</body>

区别：

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
v-if有很高的切换开销，适用于条件不太容易改变的时候
v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
v-show有很高的初始渲染开销，适用于非常频繁地切换

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/711068

Vue基础_vue是mvvm框架吗

一.Vue简介

二.MVVM框架

三.hello world程序