JavaWeb 学习笔记（Day02）之Vue

一、快速入门

1. 语法格式

(1) 编写<script>标签来引入vue.js文件，代码如下：

html 复制代码

<script src="js/vue.js"></script>

(2) 在js代码区域定义vue对象,代码如下：

html 复制代码

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

在创建vue对象时，有几个常用的属性：

el: 用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。

(3) 在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

html 复制代码

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

2. 整体代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

二、Vue指令

1. 常用指令

HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

(1) v-bind 和 v-model

① 我们需要给<a>标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码：

html 复制代码

<a v-bind:href="url">链接1</a>

在上述的代码中，v-bind指令是可以省略的，**但是:不能省略，**所以第二个超链接的代码编写如下：

html 复制代码

<a :href="url">链接2</a>

Q：<a>和</a>之间的 "链接1" 和 "链接2" 是什么？

A： <a>和</a>之间的 "链接 1""链接 2" 是超链接的显示文本 ，它的语法格式很简单：直接在<a>开始标签与</a>结束标签之间，书写需要展示的文字即可，属于 HTML 的普通文本嵌套写法，没有额外特殊语法要求。

② v-model：在表单元素上创建双向数据绑定。什么是双向？

vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化。

③ 双向绑定一定是使用在表单项标签上的。编写如下代码：

html 复制代码

<input type="text" v-model="url">

打开浏览器，我们修改表单项标签，发现vue对象data中的数据也发生了变化，如下图所示：

(2) v-on

① 语法格式

给第一个按钮，通过v-on指令绑定单击事件，代码如下：

html 复制代码

 <input type="button" value="点我一下" v-on:click="handle()">

v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下：

html 复制代码

<input type="button" value="点我一下" @click="handle()">

② 我们需要在vue对象的methods属性中定义事件绑定时需要的函数，代码如下：

javascript 复制代码

 methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}

③ 完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

(3) v-if 和 v-show

① 语法格式

v-if：

html 复制代码

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

v-show：

html 复制代码

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>

② 完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

(4) v-for

① 语法格式

html 复制代码

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

html 复制代码

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}}:{{变量名}}
</标签>

② 演示

html 复制代码

 <div id="app">
     <div v-for="addr in addrs">{{addr}}</div>
     <hr>
     <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

2. 案例

如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

(1) 步骤

使用v-for的带索引方式添加到表格的<tr>标签上
使用{{}}插值表达式展示内容到单元格
使用索引+1来作为编号
使用v-if来判断，改变性别和等级这2列的值

(2) 实现

html 复制代码

 <tr align="center" v-for="(user,index) in users">
     <td>{{index + 1}}</td>
     <td>{{user.name}}</td>
     <td>{{user.age}}</td>
     <td>
         <span v-if="user.gender == 1">男</span>
         <span v-if="user.gender == 2">女</span>
     </td>
     <td>{{user.score}}</td>
     <td>
         <span v-if="user.score >= 85">优秀</span>
         <span v-else-if="user.score >= 60">及格</span>
         <span style="color: red;" v-else>不及格</span>
     </td>
</tr>

三、生命周期

1. vue的生命周期

指的是vue对象从创建到销毁的过程。

2. 八个阶段

每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

3. mounted

代码如下：

html 复制代码

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>