vue框架

框架

什么是框架

盖高楼大厦,框架结构

框架结构就是大厦主体,基本功能

把很多基础功能已经实现(封装了)

框架:在基础语言之上,对各种基础功能进行封装,方便开发者,提高开发效率

举例:操作网页

现在:点击一个按钮 触发事件,获取要操作的标签,在对标签内容进行操作

框架:操作网页时,程序员只关注要操作的内容即可,对标签内容的更新等操作,都由框架完成

前端框架

javaScript是原生的

vue.js 是一个js框架,不是代替js的,是对js进行了封装。

UI框架:将前端常用的一些组件(表格,表单,消息提示)进行封装(对html和css进行了封装)

后端Java框架

mybatis--jdbc

spring......

vue.js

优点

体积小,效率高,双向数据绑定 m v vm ,生态丰富,学习成本低

1.在head标签中导入vue.js

<script src="js/v2.6.10/vue.min.js"></script>

2.vue模板

复制代码
<body>
    <div id="app">
        {{ message }}<!-- {{}}插值表达式,可以获取data中的值 -->
    </div>
    <script>
        /* 创建一个vue对象 */
        var app = new Vue({
            el: '#app', //绑定挂载点,可以使用其他的选择器,建议使用id选择器,不能使用body,html与vue对象绑定
            data: {//定义数据,可以定义多个
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

3.Vue 指令

指令带有前缀 v- 开头,以表示它们是 Vue 提供的特殊属性。

v-text

作用是设置标签的文本内容

默认写法会替换全部内容,使用差值表达式可以替换指定内容

内部支持写表达式

<p v-text="message">aaa</p>

<p>{{message}}aaa</p>

v-html

作用是设置元素的 innerHTML

内容中有 html 结构会被解析为标签

内部支持写表达式

<p v-html="message">aaa</p>

{{}},v-html,v-text的区别

{{message}}插入一个值,不影响标签中的其他内容

v-html="message",v-text="message"会覆盖标签中的其他内容

{{message}},v-text="message"不能解析内容中html标签

v-html="message"可以解析内容中html标签

v-on

作用是为元素绑定事件

事件名不需要写 on 指令可以简写为@

绑定的方法定义在 methods 属性中,可以传入自定义参数

在vue中声明函数,使用this关键字访问data中的数据

复制代码
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test1()" />

methods:{
    test(a,b){
        alert(a);
    },//两方法之间用逗号隔开
    test1(){
        
    }
}
v-model

v-model="变量" 把表单元素的value值 绑定到vue对象data中,当输入框值发生改变时,自动更新到数据中

绑定的数据<---->表单元素的值 双向数据绑定

复制代码
<input type="text" v-model="message"/>
//message需要在vue对象的data中定义
v-show

修改元素的 display,实现显示隐藏

指令后面的内容,最终都会解析为布尔值

值为 true 元素显示,值为 false 元素隐藏

数据改变之后,对应元素的显示状态会同步更新

复制代码
<img v-show="isShow" src="img/3.jpg" />//isShow为true,图片显示
<img v-show="age>18" src="img/3.jpg" />//age为15小于18图片隐藏

data:{
    isShow:true,
    age:15
}
v-if

隐藏标签时,直接将标签从网页删去,大量操作开销较大,显示时需要重新创建标签,效率低

显示状态表达式的值为 true,元素存在于 dom 中,为 false,从 dom 中移除

频繁的切换 v-show,反之使用 v-if,前者的切换消耗小

v-if 可以和 v-else 联合使用 两个必须紧挨着

复制代码
<img :src="img" v-if="isshow" />
<img src="img/2.jpg" v-else />

data: {
    img:"img/1.jpg",
	isshow:true
}
v-bind

v-bind:标签属性名 = "变量" 可以动态改变属性的值,只需在js中改变变量的值即可

完整写法是 v-bind:属性名

简写的话可以直接省略 v-bind,只保留 :属性名

复制代码
<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle"  :src="imgSrc" />

data:{
    imgSrc:'img/1.jpg',
    imgTitle:"鼠标放上会显示的提示"
}

我们可以传给 v-bind:class 一个对象,以动态地切换 class:

复制代码
<div v-bind:class="{ active: isActive }"></div>
//为true时设置的样式显示,为false时不显示
data:{
    isActive :true
}
v-for

作用是根据数据生成列表结构

数组经常和 v-for 结合

使用语法是(item,index)in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上是响应式的

为循环绑定一个 key 值 :key="值" 尽可能唯一

复制代码
<li v-for="item in array">
    {{item}}省
</li>
<li v-for="(item,index) in array">
    {{index+1}}{{item}}省
</li>

<li v-for="(item,index) in objects">
    {{index+1}}{{item.name}}{{item.age}}
</li>

data:{
    array:['陕西','山西','河南'],
    objects:[
        {name:'admin',age:23},
        {name:'jim',age:22}
    ]
}

Vue生命周期

生命周期图示

Vue 实例 --- Vue.js (vuejs.org)

vue对象的生命周期钩子函数,在生命周期的每个阶段提供一个函数,供我们执行某些需要的操作

beforeCreate(){}

vue对象创建之前

created(){}vue

对象创建完成

beforeMount(){}

vue对象与标签绑定之前

mounted(){}

vue对象与标签绑定之后

mounted是常用的,当vue对象创建成功,与标签绑定成功后执行我们想要的操作

类似于之前的onload事件

相关推荐
慧一居士19 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead21 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js