Vue简单快速入门_小洛1.8vue-CSDN博客

1.Vue简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。

2.Vue的使用

2.1在WebStorm 里创建项目创建js包引入vue.js文件

引用vue.js文件

<script type="text/javascript" src="../js/vue.js"></script>

2.2在body里创建div标签

<div id="ceshi">
{{msg}}
</div>

2.3编写js代码

<script>
    let ceshi=new Vue({
//el为引用div的id 该标签下的所有元素都可以使用Vue中的成员
        el:"#ceshi",
       
 data:{
            msg: "sss"
        }

    })
</script>

运行结果

3.Vue指令方法使用

3.1 v-text 和v-html 使用方法

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="add">
    <span>{{msg}}</span>
    <!--v-test 与v-html都会覆盖span里的内容-->
    <span v-text="msg">221</span>
    <span v-html="msg">1111</span>
    <!--v-tets 不能解析html    v-html可以解析-->
    <span v-text="mmm"></span>
    <span v-html="mmm"></span>
</div>
</body>
<script>
    let add=new Vue({
        el:"#add",
        data:{
            msg:"wwww",
            mmm:"<font color='red'>sssssss</font>"
        }
    })

</script>
</html>

在运行结果中可以看出

3.2 v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="sss">
    <span>{{msg}}</span>
    <!--v-on:缩写为@-->
<button @click="on">点击</button>

</div>
</body>
<script>
    let  sss=new Vue({
        el:"#sss",
        data:{
msg:"caicaica"
        },
        methods:{
            on(){
                //this表示vue对象
                this.msg="蔡徐坤"
            }
        }
    })
</script>
</html>

运行结果

点击按钮之后

v-on:click=”on“ 可以写为 @click=“on” 意思为点击事件 methods 里写点击事件发生情况

3.3 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="aaa">
    <ul>
        <!--for(数据类型 b:数组){}-->
        <li v-for="item in hobby">
            {{item}}
        </li>
    </ul>
    <table width="200px" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in users">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button @click="deleteUser(item.name)">删除</button>
                <button >编辑</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    let ww=new Vue({
        el:"#aaa",
        data:{
            hobby:["好吃","好喝","好色","好赌"],
            users:[
                {"name":"王桑","age":16,"sex":"女"},
                {"name":"刘桑","age":19,"sex":"男"},
                {"name":"sss","age":15,"sex":"男"}
            ]
        },
        methods:{
            deleteUser(name){
                alert(name);

            },
            fun(){
                console.log("sss")
            }
        }
    })
</script>
</html>

v-for = “（值 , 索引）in 目标元素”

v-for = "值 in 目标结构"

可以遍历数组、对象、数字、字符串（可遍历结构）

v-for的临时变量不能用到v-for范围以外谁需要循环循环添加给谁加v-for

上述代码中 v-for的值为 item 所以<td>标签要用 item.name

3.4v-show v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="sssss">
<img src="图片切换/images/logo.png" v-show="age>18&&age<20"/>
    <hr>
    <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
    <img src="图片切换/images/01.jpg" v-if="age>18&&age<22"/>
    <button @click="fun">点击</button>
</div>
</body>
<script>
    let sssss=new Vue({
        el:"#sssss",
        data:{
            age:18
        },
        methods:{
            fun(){
                this.age++
            }
        }
    })
</script>
</html>

点击之后

再次点击之后

v-show通过style中disable来控制标签的显示和隐藏 v-if:通过删除和创建标签来控制

在js方法中先写了age=18 在 v-show中给了age判断如果不在判断区间图片就是隐藏

在v-if中如果超过了if里面的判断语句就会自动删除

3.5v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="mmm">
<!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
<input type="text" v-model="name">
{{name}}
<button @click="dj">dianji</button>
</div>
</body>
<script>
    let mm=new Vue({
        el:"#mmm    ",
        data:{
          name:"王桑"
        },
        methods:{
            dj(){
                this.name="mingmei"
            }
        }
    })
</script>
</html>

点击之后

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

在我们进行点击事件时 name发生改变同时因为v-model=“name” 在引用v-model标签的model 也同时跟着改变

3.6v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="bind">
    <!--如何让img标签中src属性引用vue对象中的数据-->
    <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

    <!--v-bind: 缩写为: -->
    <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

    <button @click="fun">点击</button>
</div>
</body>
<script>
    let bind=new Vue({
        el:"#bind",
        data:{
            age:18,
            imgUrl:"图片切换/images/01.jpg",
            title:"111",
            flag:true
        },
        methods:{
            fun(){
                this.imgUrl="图片切换/images/10.jpg";
                this.title="好看"
            }
        }
    })
</script>
</html>

v-bind 可以使img标签引用js中的数据

<img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

缩写为

<img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

class="flag?'a':''"

为三元运算符

3.7 使用axios

使用axios 要先引用axios.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>111111</title>
    <!--    <link rel="stylesheet" href="css/reset.css" />-->
    <!--    <link rel="stylesheet" href="css/tianindex.css" />-->
</head>
<body>
<div class="wrap" id="app">

            <button class="input_sub" @click="searchWeather">
                搜 索
            </button>
    <table width="500" border="1">
        <tr>
            <th>学生编号</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
        </tr>
        <tr v-for=" s in students">
            <td>{{s.sid}}</td>
            <td>{{s.sname}}</td>
            <td>{{s.sage}}</td>
        </tr>
    </table>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<!-- 官网提供的 axqios 在线地址 -->
<script src="../js/axios.min.js"></script>
<!-- 自己的js -->
<script>
    let app=new Vue({
        el:"#app",
        data:{
            student:"1",
            studentVo:{},
            students:[],

        },
        methods:{
            searchWeather(){
                axios.get("http://localhost:8080/student/findAll").then(result=> {

                    this.students = result.data.data.records
                  //  console.log(this.students)
                  /*  this.studentVo = this.students[0]
                    console.log(this.studentVo.sid);*/
                })
            }
        }
    })
</script>