1、vue上手
概念:vue是一个用于构建用户界面的渐进式框架
vue的两种使用方式:
1、vue的核心包开发
场景:局部模块改造
2、vue核心包&vue插件工程化开发
场景:整站开发
1、创建实例
核心步骤
1、准备容器(盒子)
2、引包(官网)-开发版本/生产版本
3、创建vue实例 new vue()
4、指定设置项->渲染数据
el指定挂载点、data提供数据
例如:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
-
- <div id="app">
- <!-- 1、准备容器 -->
- {{msg}}
- </div>
- <!-- 2、引包 -->
- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
- <script>
- // 3、创建实例
- const app=new Vue({
- // 通过el来配置选择器
- el:'#app',
- data:{
- // 通过data提供数据
- msg:'hello world'
- }
- })
- </script>
- </body>
- </html>
复制代码 运行效果如下:
2、插值表达式
插值表达式是一种vue的模板语法
作用:利用表达式举行插值,渲染到页面中
表达式:是可以被求值的代码,JS引擎会将其计算出一个效果
语法:{{表达式}}
留意点:
1、使用的数据必须存在
2、支持的是表达式,而非语句,比如if for...
3、不能在标签属性中使用{{ }}插值
3、vue的相应式特性
数据的相应式处置惩罚,也就是数据厘革后,视图自动更新
如何访问或修改呢,data中的数据,最终都会被添加到实例上,也就是成为实例的属性,因此通过实例.属性名即可访问与修改
2、vue指令
vue会根据不同的指令,针对标签实现不同的功能
指令:带有v-前缀的特殊标签属性
1、v-html
例如:
此中v-html指令就是设置DOM元素的innerHTML,该指令可以解析内容中的标签
2、v-show
控制元素表现隐蔽
语法:v-show="表达式" 表达式值true表现,false隐蔽
本质上是在利用css属性中的display:none来举行隐蔽的
场景:频繁切换表现隐蔽的场景
3、v-if
控制元素表现隐蔽(条件渲染)
语法:v-if="表达式" 表达式值true表现,false隐蔽
根据判定条件,控制元素的创建与移除
4、v-else & v-else-if
辅助v-if举行判定渲染
语法:v-else v-else-if="表达式"
留意:需要紧贴着v-if使用
5、v-on
作用:注册事件=添加监听+提供逻辑处置惩罚
语法:
v-on:事件名=‘’内联语句‘’
内联语句,也就是js代码语句
v-on:事件名=‘’methods中的函数名‘’
或者将v-on替换为@,一种简写方式
method是vue实例中的设置项,内部可以装函数,如果需要访问data设置项的数据,需要使用实例.属性名或者是this来举行访问修改
* 调用参数
如果v-on中调用了函数,可以在函数名后加上括号来举行调用参数
6、v-bind
作用:动态设置html的标签属性->src\url\title...
语法:v-bind:属性名=''表达式''
7、v-for
作用:基于数据循环,多次渲染整个元素
遍历数组的语法:
v-for="(item,index) in 数组"
item为每一行,index为数组下标
* key
key属性="唯一标识"
作用:给列表项添加的唯一标识。便于vue举行列表项的正确排序复用
8、v-model
作用:给表单元素使用,双向数据绑定->可以快速获取或设置表单元素内容
数据厘革,视图自动更新
视图厘革,数据自动更新
语法:v-model='变量'
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |