vue框架 - 技术栈

框架

什么是框架

盖高楼大厦，框架结构

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

把很多基础功能已经实现（封装了）

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

举例：操作网页

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

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

前端框架

javaScript是原生的

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

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

后端Java框架

mybatis--jdbc

spring......

vue.js

优点

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

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

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>{{message}}aaa</p>

v-html

作用是设置元素的 innerHTML

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

内部支持写表达式

{{}}，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事件