vue的简单认识和使用
什么是Vue?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue的使用1.引入vue可以直接在官网下载安装(链接地址)CDN引入...
什么是Vue?
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue的使用
1.引入vue
-
可以直接在官网下载安装 链接地址
-
CDN的引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. 创建Vue实例对象
在上面代码中,我们通过new Vue()构建了一个Vue的实例。
在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如:挂载元素(el)和数据(data),我们可以操纵数据改变视图。
el表示Vue要操作哪一个元素下面的区域,比如:#box则表示操作id为box的元素下面的区域;
data表示Vue实例的数据对象,data的属性能够响应数据的变化;每个 Vue 实例都会代理其 data 对象里所有的属性。
vue中的指令
-
v-once 指令
执行一次性地插值,当数据改变时,插值处的内容不会更新。 -
v-if 指令
条件渲染指令,根据表达式的真假来添加或删除元素。其语法结构是:v-if=“expression”,其中expression是一个返回bool值的表达式,其结果可以是true或false,也可以是返回true或false的表达式。 -
v-show指令
也是条件渲染指令,不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于:v-show是根据表达式之真假值,切换元素的 display CSS 属性,当条件变化时该指令触发过渡效果。 -
v-else指令
可以用v-else指令为v-if或v-show添加一个“else块”。注意:v-else前一兄弟元素必须有 v-if 或 v-else-if。 -
v-for指令
基于数据渲染一个列表,类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。 -
v-text指令
v-text:向标签中注入文本,且会替换掉元素之前的内容。 -
v-html指令
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令 -
v-bind指令
动态地绑定标签中的一个或多个属性,或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数,中间用一个冒号隔开。这个参数通常是HTML元素的特性(attribute)
-
v-on指令
动态地绑定一个或多个特性,或一个组件 prop 到表达式;其作用和v-bind类似。注意:如果用在普通元素上时,只能监听 原生 DOM 事件;但是如果用在自定义元素组件上时,也可以监听子组件触发的自定义事件。 -
v-model
v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
使用手法
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>
补充内容
1、 数组的7个方法
pop:删除最后一个元素
push:插入到数组尾部
shift:删除数组的第一个元素
unshift:插入到数组的头部
splice:删除元素
sort:数组排序
reverse:数组翻转
2、数组和对象的遍历
v-for="(item,index) in list"
v-for="(value,key,index) in object"
以上就是vue简单的一些东西,有不足之处希望指出
更多推荐
所有评论(0)