用法三
var $input = $("input"); $input.keyup(function () { $.ajax({ url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据 type:'get', dataType:'jsonp', //jsonp格式访问 data: {word: $input.val()}, }) .done(function(data){ console.log(data); }) .fail(function() { alert('服务器超时，请重试！'); }); }) .... <body> <input type="text"> </body>通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
服务器返回的数据会自动传给回调的匿名函数的参数data.
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是ajax与jsonp的使用详解的详细内容，更多请关注php中文网其它相关文章！
这次给大家带来Vue 2.0内部指令，使用Vue 2.0内部指令的注意事项有哪些，下面就是实战案例，一起来看一下。
1.Vue.js介绍
当前前端三大主流框架：Angular、React、Vue。React前段时间由于许可证风波，使得Vue的热度蹭蹭地上升。另外，Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具，与其说是一个MVVM框架，不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程，即保持状态和视图的同步，状态也可以说是数据吧；而其组件化的理念与React则一样，即“一切都是组件，组件化思想方便于模块化的开发，是前端领域的一大趋势。
2.内部指令
2-1.v-if v-else v-show：前两者一般配合使用，v-show的效果类似于v-if。
实例如下：
<body> <p id="app"> <p v-if="flag">if</p> <p v-else>else</p> <p v-show="flag">show</p> </p> </body> <script> var vm= new Vue({ el:"#app", data:{ flag:true } }); </script>DOM结构中，三个p标签中的内容是否显示在页面中取决于flag的布尔值属性。当flag为true时，if和show都会显示，else也不会存在于DOM结构中。v-if和v-show的不同体现在：v-if是根据条件的值判断是否加载，可以减轻服务器的压力，但是缺点是当改变条件的值，页面又要加载一次；v-show则无论条件的值是否为true，都会加载（若条件为true，则display属性设置为其默认属性，反之，设置为none）
2-2.v-for 循环指令
实例如下：
<body> <p id="app"> <ol> <li v-for="b in b">{{b}}</li> </ol> </p> </body> <script> var vm= new Vue({ el:"#app", data:{ b:['a','b','c',1,2] } }); </script>页面会显示5个li，插值的效果是li会显示与数组b一 一对应的元素，v-for有点类似于for in循环
2-3 v-text v-html 文本（html字符串）指令
<body> <p id="app"> <p v-text="msgText"></p> <p v-html="msgHtml"></p> </p> </body> <script> var vm= new Vue({ el:"#app", data:{ msgText:"China", msgHtml:"<span>中国</span>" } }); </script>可以联想到jquery的text()、html()。到现在，你会发现前面都是利用插值操作，即{{}}，这种做法会在一定程度上影响性能。
2-4 v-on 绑定事件监听器
实例如下：
<body> <p id="app"> <button v-on:click="Hi()">Button</button> </p> </body> <script> var vm= new Vue({ el:"#app", methods:{ Hi:function(){ alert("Hello World!") } } }); </script>同理，类比jquery的on()方法，绑定事件用的，实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作，如mouseout、mouseover等等。
2-5 v-bind指令
实例如下：
<body> <p id="app"> <a v-bind:style="{color:'red'}" :src="message">{{message}}</a> </p> </body> <script> var vm = new Vue({ el: "#app", data: { message: "前端工程师" } }); </script>效果为a标签显示红色，且其src属性为vm.message。v-bind指令主要用于设置html标签的属性，其简写形式为 v-bind：——>：
2-6 v-model 数据双向绑定指令
实例如下：
<body> <p id="app"> <p>{{message}}</p> <input type="text" v-model="message"> </p> </body> <script> var vm = new Vue({ el: "#app", data: { message: "前端工程师" } }); </script>当input输入的值发生变化时，p标签包含的内容也会随之变化，且与前者保持一致。
2-7 v-pre 指令
实例如下：
<body> <p id="app"> <p>{{message}}</p> <p v-pre>{{message}}</p> </p> </body> <script> var vm = new Vue({ el: "#app", data: { message: "前端工程师" } }); </script>第一个p标签输出“前端工程师”，而第二个p标签则会跳过vue编译，输出原始值，即{{message}}。
2-8 v-cloak指令
v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行，且其须要与css一起使用
2-9 v-once指令
v-once指令的作用是只有当DOM树第一次渲染时起作用。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是Vue 2.0内部指令的详细内容，更多请关注php中文网其它相关文章！
这次给大家带来前端开发中的多列布局实现方法，前端开发中的多列布局实现的注意事项有哪些，下面就是实战案例，一起来看一下。
多列布局
相关文章
精彩导读
热门资讯
关注我们
