前端修炼——vue.js库使用！

内容概述：ajax、vue.js 库使用

Ajax

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

可以实现局部刷新或者说无刷新

接口：服务器和客户端数据的交换

jquery 中操作元素的自定义属性用 attr() 方法

Ajax的作用

在某一个html网页中，通过另外一个url地址获取服务器的数据，得到数据之后做界面的局部刷新

JS代码和python代码不一样，python可以操作数据库，js不可以

使用了Ajax就可以让前后端完全分离

后台不用再处理任何和html相关的东西

后台只处理数据即可

让后台和前台的各自的工作更加独立一些

Ajax的使用

前提: Ajax需要运行在服务器的环境下，因此不能以file的方式打开html文件了

方法

$.ajax({})
$.ajax({
        url: '/change_data',
        type: 'GET',
        dataType: 'json',
        data:{'code':300268}
        success:function(dat){
        	alert(dat.name);
        },
        error:function(){
            alert('服务器超时，请重试！');
        }
    });

1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步

<!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>Document</title>
    <style>
        body {
            margin: 0px;
        }
        img {
            width: 100%;
        }
        .p01 {
            text-align: center
        }

    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var btn01 = $('#link01')
            var btn02 = $('#link02')
            var p = $('#p01i')

            btn01.click(function(){
                $.ajax({
                    url:'/data.json',
                    type:'get',
                    dataType:'json',
                    success:function(dat){
                        var data01 = dat[0]
                        var str = '姓名：'+ data01.name +'&nbsp;&nbsp;&nbsp;性别：' + data01.gender
                        p.html(str)
                    }

                })
            }) 
            btn02.click(function(){
                $.ajax({
                    url:'/data.json',
                    type:'get',
                    dataType:'json',
                    success:function(dat){
                        var data01 = dat[1]
                        var str = '姓名：'+ data01.name +'&nbsp;&nbsp;&nbsp;性别：' + data01.gender
                        p.html(str)
                    }

                })
            }) 

        })   
    </script>
</head>
<body>
    <img src="images/banner02.jpg" alt="哈哈哈">
    <p id="p01">姓名：张三&nbsp;&nbsp;&nbsp;性别：男</p>
    <p class="p01"><a href="/freshtest001.html" id="link01">第一页</a>&nbsp;&nbsp;&nbsp;<a href="/freshtest002.html" id="link02">第二页</a></p>
</body>
</html>

Vue

前端三大框架：Angular.js、React.js、Vue.js

Vue的基本使用
一旦Vue对象托管了某一个HTML容器，那在这个容器中的子元素就可以很方便使用Vue对象中的数据和方法

指令操作，操作标签

插入值：

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<span>Message: {{ msg }}</span>

如果是标签的属性要使用值，就不能使用“Mustache”语法，需要写成使用v-bind指令：
<a v-bind:href="url" v-bind:title='tip'>百度网</a>
插入的值当中还可以写表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">链接文字</a>

指令：

指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。

v-bind 简写：

v-on 简写 @

v-if, v-else, v-else-if, v-show

vue.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>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ sTr }}</p>
        <p>{{ iNum+15 }}</p>
        <p>{{ bIsok?"YES":"NO" }}</p>
        <p>{{ sTr.split('').reverse().join('') }}</p>
        <a v-bind:href="sUrl">小姐姐图片链接</a>
        <br><br>
        <input type="button" value="反转" v-on:click='fnReverse'><br><br>
        <!-- v-bind  和 v-on  可以 简写成下面的形式 -->
        <a :href="sUrl">小姐姐图片链接</a>
        <br><br>
        <input type="button" value="反转" @click='fnReverse'>

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                sTr:'hello,world',
                iNum:10,
                bIsok:true,
                sUrl:'http://www.jandan.net/ooxx'
            },
            methods:{
                fnReverse:function(){
                    this.sTr  = this.sTr.split('').reverse().join('')
                }
            }  

        })  
    </script>
</body>
</html>

class 绑定

<!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>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .big{
            font-size: 30px;
        }

        .red{
            color: red;
        }    
    </style>
</head>
<body>
    <div id="app">
        <p :class="{big:isBig,red:isRed}">这是第一个段落</p>
        <!-- 三元表达式写法 -->
        <p :class="[isBig?'big':'',isRed?'red':'']">这是第二个段落</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                isBig:false,
                isRed:true
            }
        }  
    </script>
</body>
</html>

条件渲染

<!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>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-if 要和 v-else 在一起 -->
        <h1 v-if="bIsok">这是使用 v-if 的 h1</h1>
        <h2 v-else>这是使用 v-else 的 h2</h2>

        <h3 v-show="bIsok">这是使用 v-show 的h3</h3>

        <div v-if="sCode=='A'">A</div>
        <div v-else-if="sCode=='B'">B</div>
        <div v-else-if="sCode=='C'">C</div>
        <div v-else>NOT A/B/C</div>

    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
               bIsok:false,
               sCode:'D'
            }
        })
    </script>
</body>
</html>

前端修炼——vue.js库使用！

Ajax

Vue

插入值：

指令：

class 绑定

条件渲染

猜你喜欢