Vue快速入门-个人笔记

Vue实战

1 Vue入门

下载Vue.js

//开发版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue第一个入门应用

    
    
    



    

        {{msg}}  {{username}}
        

        
            {{username}}
            
{{msg}}
        
    

    

# 总结：
1.Vue实例中的el属性，代表Vue作用范围，日后在Vue的范围内都可以使用Vue语法！
2.Vue实例中的data属性，代表给Vue实例绑定一些数据，绑定的数据可以通过{{变量名}}的形式取出来！
3.在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用响应的方法以及逻辑运算！
4.el属性汇总可以书写任意的css选择器【jquery选择器】，但在Vue开发中推荐使用id选择器！！

data中复杂对象的取值



    
    
    



    

        
 {{msg}} 
        
 {{user.name}}
        
 {{list[0]}} 
        
{{duixiang_list[0].name}}
    

    

1.1 v-text

v-text用来获取data中的数据，把数据以文本形式渲染到指定标签内部，类似于js中的innertext

    {{msg}}
    

# 总结：
1.{{}}插值表达式和v-text获取数据的差别在于
	a.使用v-text会把标签中原有的数据覆盖，使用插值表达式的形式不会覆盖标签原有数据
	b.使用v-text可以避免在网络环境较差的时候出现插值闪烁

1.2 v-html

v-html用来获取data中的数据将数据中含有html标签先解析在渲染到指定标签的内部，类似于js中的innerHTML

    {{alink}}lalala
    

    lalala

1.3 v-on事件绑定

1. 在Vue中绑定事件是通过v-on完成的，v-on:事件名 如v-on:click(change)
2. v-on:事件名的赋值语句是当前时间触发调用的函数名
3. 在Vue中事件的函数定义到methods:{}中
4. 在vue中定义的事件中this值得就是当前的实例，日后可以再事件中通过使用this获取vue实例中相关数据

    
    

        

        
年龄：{{age}}
        

        
    

Vue事件的简化语法

# v-on:click = "xxxx"
# @click = "xxxx"


    
{{age}}
    
    

Vue事件的两种写法

        {{count}}
        
    
    
    

# 总结：
 1. 在Vue中事件定义存在两种写法 
 一种是 函数名:function(){}
 一种是 函数名(){}

Vue中事件参数传递

    {{count}}
    

# 总结：
	1.在使用事件时，可以直接在事件调用给出事件进行参数传递，在事件定义出通过定义对应变量接收传递的参数。

复习案例1 v-text v-html以及事件绑定

    
    
    {{msg}}

    {{age}}

    {{arr[0]}}

    {{user}}


    
    

    
    
    
    

    
    

    

1.4 v-show v-if v-bind

    
    
欢迎来到阴阳师！
    
欢迎来到阴阳师！
 

    
    

    
    
永生之海风云再起

    

    
    
    

    
    

    
    

1.5 v-for

v-for:作用就是用来对数据或者对象进行遍历的（数组就是对象的一种）

    {{user.name}} {{user.age}}
    
    

    
    {{value}}:{{key}}:{{index}}

    
    

        

            {{index}} {{a}}
        
    

    
    

        

            {{user.index}} === {{user.name}} === {{user.age}} === {{user.content}}
        
    

# 总结
在使用v-for的时候一定要加入:key方便vue做重用排序的唯一key

1.6 v-model双向绑定

v-model:作用用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现双向的数据绑定

什么叫做双向绑定

文本框中数据发生变化，data中的值也发生变化。

data中的值发生变化，文本框中的数据也发生变化。

    
    
    

    {{message}}
    

    

# 总结:
1. v-model使用可以实现数据的双向绑定
2. 所谓双向绑定 表单中的数据导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化

# MVVM架构
Model:数据 VUE实例中绑定数据
VM：ViewModel 监听器
View：页面

记事本案例

<div id = "app">
    <input type="text" v-model="msg"> <input type="button" value="添加到记事本" @click="save">
    <br>
    <ul>
        <li v-for="item,index in lists">
            {{index+1}} {{item}} <a href="javascript:;" @click="delRow(index)">删除</a>
        </li>
    </ul>

    <br>
    <span>总数量：{{lists.length}} 条  </span><input type="button" value="删除所有" v-show="lists.length!=0" @click="delAll">
</div>
<!--
    1.完成记事本查询所有思路：1）将所有数据绑定为Vue实例 2）遍历Vue实例中数据到页面
    2.添加 1) 添加按钮去绑定事件 2）在事件中获取输入框中数据 3）将获取到的数据放入到list里面
    3.删除
    4.删除所有    总数量
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",   //element 用来给Vue定义一个作用范围
        data: {
            lists:["阴阳师神乐新皮肤上线","sp山风降临平安京"],
            msg:"",
        },   //用来给Vue实例定义一些相关数据
        methods:{
            save(){//添加到记事本
                console.log(this.msg);
                this.lists.push(this.msg); //文本框中的数据push到list里面
                this.msg = ''; //清空文本框中的数据
            },
            delRow(index){//删除一条记录
                //根据下标删除数组中的某个元素
                this.lists.splice(index,1); //参数1代表删除的下标从哪个下标开始删除  参数2代表删除几个元素
            },
            delAll(){ //删除所有数据
                this.lists = [];
            }
        }
    });
</script>

1.7 事件修饰符

修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制
# 常用的事件修饰符
.stop
.prevent
.capture
.self
.once
.passive

stop事件修饰符

用来阻止事件冒泡

prevent事件修饰符

用来阻止标签的默认行为

 百度

1.8 按键修饰符

作用：用来与键盘按键事件绑定在一起，用来修饰特定的按键事件的修饰符。

# 按键修饰符
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

enter回车

用来触发回车按键之后触发的事件

2 Axios 异步使用

Axios是一个异步请求技术，核心作用是用来在页面中发异步请求，并获取对应数据在页面中的渲染，跟Ajax相似

2.1 Axios第一个程序

Axios官方网站

安装：

2.1.1 GET方式的请求

<div id="app">

</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    //发送GET方式请求
    axios.get("http://localhost:8080/user/findAll").then(function(response){
        console.log(response.data)
    }).catch(function(err){
        console.log(err);
    });
    const app = new Vue({
        el: "#app",   //element 用来给Vue定义一个作用范围
        data: {},   //用来给Vue实例定义一些相关数据
        methods: {}
    });
</script>


///输入参数

//发送GET方式请求
    axios.get("http://localhost:8080/user/findAll?name=xiaochen").then(function(response){
        console.log(response.data)
    }).catch(function(err){
        console.log(err);
    });

2.1.2 POST方式的请求

<script>

    axios.post("http://localhost:8080/user/save",{
        username:"xiaochen",
        age:23,
        email:"[email protected]",
        phone:15363150846
    }).then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    })

    const app = new Vue({
        el: "#app",   //element 用来给Vue定义一个作用范围
        data: {},   //用来给Vue实例定义一些相关数据
        methods: {}
    });
</script>

2.1.3 Axios并发请求

并发请求：将多个请求在同一时刻发送到后端服务接口，最后再集中处理每个请求的响应结果

<script>

    //并发请求
    //1.创建一个查询所有的请求
    function findAll(){
        return axios.get("http://localhost:8080/user/findAll?name=xiaochen");
    }
    //2.创建一个保存的请求
    function save(){
        return axios.post("http://localhost:8080/user/save",{
            username:"xiaochen",
            age:23,
            email:"[email protected]",
            phone:15363150846
        });
    }

    //3.并发执行
    axios.all([findAll(),save()]).then(
        axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理
            console.log(res1.data);
            console.log(res2.data);
        })
    ); //用来发送一组请求

    const app = new Vue({
        el: "#app",   //element 用来给Vue定义一个作用范围
        data: {},   //用来给Vue实例定义一些相关数据
        methods: {}
    });
</script>

2.1.4 VUE结合Axios实现天气查询

<div id="app">
    <input type="text" v-model="name" @keyup.delete="shows" @keyup.enter="searchCity"/>
    <input type="button" value="搜索"  @click="searchCity"/><br>
    <span  v-for="city in hotCitys">
        <a href="" @click.prevent="searchCitys(city)">
            {{city}}
        </a>&nbsp;&nbsp;
    </span>
    <hr>
    <span v-show="isShow">{{name}}，今天的天气是：{{message}}</span>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",   //element 用来给Vue定义一个作用范围
        data: {
            name:"",
            hotCitys:["北京","上海","深圳","广州","天津"],
            message:"",
            isShow:false,
        },   //用来给Vue实例定义一些相关数据
        methods: {
            searchCity(){
                //获取输入的城市信息
                console.log(this.name);
                let _this = this;  //把外部的this赋值给内部的this
                //发送axios请求
                axios.get("http://localhost:8080/city/find?name="+this.name).then(function(response){
                    console.log(response.data.message);
                    _this.message=response.data.message;
                    _this.isShow=true;
                }).catch(function(err){
                    console.log(err);
                });
            },
            searchCitys(name){
                this.name = name;
                this.searchCity();
            },
            shows(){
                this.isShow = false;
            }
        }
    });
</script>

VUE CLI使用

CLI --> 命令行

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用脚手架之后我们开发的将是一个完整的系统（项目）

VUE 优势

• 通过vue-cli交互式项目脚手架，boostrap，css，js，jquery等通过命令行直接安装依赖

安装nodejs

创建vue脚手架第一个项目