2、简单上手+el挂载点+v-xx(v-text、v-html、v-on、v-show、v-if、v-bind、v-for)

news2024/11/24 12:06:30

官网：

vue3：https://cn.vuejs.org/

vue2：https://v2.cn.vuejs.org/v2/guide/

简单上手：

流程：

导入开发版本的Vue.js

<!--开发环境版本，包含了有帮助的命令行警告--> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 

<!--生产环境版本，优化了尺寸和速度--> 
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 

<!--不推荐新手直接使用vue-cli,尤其是在你还不熟悉基于Node.js的构建工具时。-->

创建Vue实例对象，设置el属性和data属性。
使用简洁的模板语法把数据渲染到页面上

示例：

<div id="app"> 
    {{ message }} 
</div> 

var app = new Vue({ 
el: '#app', data: { message: 'Hello Vue!'
 } 
})

el挂载点：

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素。

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

v-text:

v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。更新元素的文本内容。

<span v-text="msg"></span> 
<!-- 和下面的一样 --> 
<span>{{msg}}</span>

v-html:

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。更新元素的 innerHTML。

<div v-html="html"></div>

v-on:

给元素绑定事件监听器。

.{keyAlias} - 只在某些按键下触发处理函数。
.left - 只在鼠标左键事件触发处理函数。
.right - 只在鼠标右键事件触发处理函数。
.middle - 只在鼠标中键事件触发处理函数。
.passive - 通过 { passive: true } 附加一个 DOM 事件。

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 缩写，和上面是一样的 -->
<button @click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 缩写，和上面是一样的 -->
<button @[event]="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-show:

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

v-if:

当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令。

表达式为true，元素存在于dom树中。表达式为false，从dom树中移除。

v-bind:

动态的绑定一个或多个 attribute，也可以是组件的 prop。

.camel - 将短横线命名的 attribute 转变为驼峰式命名。
.prop - 强制绑定为 DOM property。(3.2+)
.attr - 强制绑定为 DOM attribute。
在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。

V-for:

<div v-for="item in items"> 
    {{ item.text }} 
</div> 
<div v-for="(item, index) in items"></div> 
<div v-for="(value, key) in object"></div> 
<div v-for="(value, name, index) in object"></div>