一、Vue基础

1、介绍

　　Vue是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有的项目整合。兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。Vue.js 不支持 IE8 及其以下 IE 版本。

2、Vue.js安装

　　安装有三种方式，一种直接下载开发版本，第二种CDN链接，国外有比较稳定的两个CDN，第三种官方命令工具，可用于快速搭建大型单页应用。开发学习还是建议第一种，Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

  1. unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
  2.  
  3. cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

第三种安装就是利用淘宝npm(大于3.0)镜像下载：

升级淘宝镜像:

  1. npm install cnpm -g #升级cnpm或者安装
  2. cnpm install npm -g  #升级npm
  3. npm -v  #查看版本
  1.  cnpm install vue  #安装最新版本

第四种命令行工具，可以用于快速搭建大型单页应用

  1. cnpm install --global vue-cli  # 全局安装 vue-cli
  2.  
  3. vue init webpack my-project    # 创建一个基于 webpack 模板的新项目  这里需要进行一些配置，默认回车即可

进入项目，安装依赖包并运行：

  1. cd my-project
  2. cnpm install
  3. cnpm run dev

3、Vue.js目录结构

  1. build    项目构建(webpack)相关代码
  2. config   配置目录，包括端口号等。我们初学可以使用默认的
  3. node_modules  npm 加载的项目依赖模块
  4. src 我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件 assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件
  5. static  静态资源目录，如图片、字体等
  6. test   初始测试目录，可删除
  7. index.html  首页入口文件，你可以添加一些 meta 信息或统计代码啥的
  8. package.json   项目配置文件
  9. .xxxx文件    这些是一些配置文件，包括语法配置，git配置等

src/APP.vue:

  1. <!-- 展示模板 -->
    <template>
  2.   <div id="app">
  3.     <img alt="Vue logo" src="./assets/logo.png">
  4.     <HelloWorld msg="Welcome to Your Vue.js App"/>
  5.   </div>
  6. </template>
  7. //导入组件
  8. <script>
  9. import HelloWorld from './components/HelloWorld.vue'
  10.  
  11. export default {
  12.   name: 'app',
  13.   components: {
  14.     HelloWorld
  15.   }
  16. }
  17. </script>
  18. //样式代码
  19. <style>
  20. #app {
  21.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  22.   -webkit-font-smoothing: antialiased;
  23.   -moz-osx-font-smoothing: grayscale;
  24.   text-align: center;
  25.   color: #2c3e50;
  26.   margin-top: 60px;
  27. }
  28. </style>

初始化项目，将src/components/HelloWorld.vue修改为以下代码：

  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.     <p>
  5.       For a guide and recipes on how to configure / customize this project,<br>
  6.       check out the
  7.       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
  8.     </p>
  9.     <h3>Installed CLI Plugins</h3>
  10.     <ul>
  11.       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
  12.       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
  13.     </ul>
  14.     <h3>Essential Links</h3>
  15.     <ul>
  16.       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
  17.       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
  18.       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
  19.       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
  20.       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
  21.     </ul>
  22.     <h3>Ecosystem</h3>
  23.     <ul>
  24.       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
  25.       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
  26.       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
  27.       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
  28.       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
  29.     </ul>
  30.   </div>
  31. </template>
  32.  
  33. <script>
  34. export default {
  35.   name: 'HelloWorld',
  36.   data() {
  37.    return  {
  38.       msg: '欢迎来到前端世界！'
  39.     }
  40.   }
  41. }
  42. </script>
  43.  
  44. <!-- Add "scoped" attribute to limit CSS to this component only -->
  45. <style scoped>
  46. h3 {
  47.   margin: 40px 0 0;
  48. }
  49. ul {
  50.   list-style-type: none;
  51.   padding: 0;
  52. }
  53. li {
  54.   display: inline-block;
  55.   margin: 0 10px;
  56. }
  57. a {
  58.   color: #42b983;
  59. }
  60. </style>

src/components/HelloWorld.vue

 4、Vue.js起步

使用vue.js实现HelloWorld，在使用之前我们先用dom实现hello world：(index.html)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World</title>
  6. </head>
  7. <body>
  8.     <div id="app"></div>
  9.     <script>
  10.         var dom = document.getElementById("app");
  11.         dom.innerHTML = "Hello World!"
  12.     </script>
  13. </body>
  14. </html>

接下来用Vue.js实现同样的目标：index.html:

  1.     <meta charset="UTF-8">
  2.     <title>Hello World</title>
  3.     <!-- 引入vue.js的库 -->
  4.     <script src="./vue.js"></script>
  5. </head>
  6. <body>
  7.     <div id="app">{{content}}</div>
  8.     <script>
  9.         // var dom = document.getElementById("app");
  10.         // dom.innerHTML = "Hello World!"
  11.         // 创建Vue实例，接受参数
  12.         var app = new Vue({
  13.             el: '#app',
  14.             data: {
  15.                 content:'Hello World!!!'
  16.             }
  17.         })
  18.     </script>
  19. </body>
  20. </html>

如果想要让它延时2秒在显示出来，那么我们用dom应该怎样操作呢？

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World</title>
  6.     <!-- 引入vue.js的库 -->
  7.     <script src="./vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">{{content}}</div>
  11.     <script>
  12.         var dom = document.getElementById("app");
  13.         dom.innerHTML = "Hello World!";
  14.         setTimeout(function() {
  15.             dom.innerHTML = "Bye Bye World!";
  16.         },2000)
  17.         // 创建Vue实例，接受参数
  18.         // var app = new Vue({
  19.         //     el: '#app',
  20.         //     data: {
  21.         //         content:'Hello World!!!'
  22.         //     }
  23.         // })
  24.     </script>
  25. </body>
  26. </html>

用Vue实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World</title>
  6.     <!-- 引入vue.js的库 -->
  7.     <script src="./vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">{{content}}</div>
  11.     <script>
  12.         // 创建Vue实例，接受参数
  13.         var app = new Vue({
  14.             el: '#app',
  15.             data: {
  16.                 content:'Hello World!!!'
  17.             }
  18.         });
  19.         setTimeout(function() {
  20.             app.$data.content = "Bye Bye World!"
  21.         },2000)
  22.     </script>
  23. </body>
  24. </html>

这样书写vue的代码不再关注dom操作对象啦，而是关注数据操作。

5、使用vue.js实现todoList

　　v-for实现遍历：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <!-- 引入vue.js的库 -->
  7.     <script src="./vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <input type="text"/>
  12.         <button>提交</button>
  13.         <!-- v_for遍历数组 -->
  14.         <ul>
  15.             <li v-for="item in list">{{item}}</li>
  16.         </ul>
  17.     </div>
  18.     <script>
  19.         var app = new Vue({
  20.             el:'#app',
  21.             data: {
  22.                 list: ['第一课的内容','第二课的内容','第三课的内容']
  23.             }
  24.         })
  25.     </script>
  26. </body>
  27. </html>

index.html

现在将数组清空，变成空数组，这样来运行：

button绑定事件 ：

数据都没有啦，现在我们的目的就是在输入框输入数据，然后数据在下面的li标签中显示，那么现在就来利用vue来实现代码（button绑定事件）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <!-- 引入vue.js的库 -->
  7.     <script src="./vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <input type="text"/>
  12.         <!-- 在标签中绑定点击事件，有个方法，方法一定要写在vue实例中，有个叫methods的键值对里 -->
  13.         <button v-on:click="handleBtnClick">提交</button>
  14.         <!-- v_for遍历数组 -->
  15.         <ul>
  16.             <li v-for="item in list">{{item}}</li>
  17.         </ul>
  18.     </div>
  19.     <script>
  20.         var app = new Vue({
  21.             el:'#app',
  22.             data: {
  23.                 list: []
  24.             },
  25.             methods: {
  26.                 handleBtnClick: function() {
  27.                     alert('click');
  28.                 }
  29.             }
  30.         })
  31.     </script>
  32. </body>
  33. </html>

 v-model数据的双向绑定：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <!-- 引入vue.js的库 -->
  7.     <script src="./vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <!-- v-model数据的双向绑定，在浏览器控制台对app.$data.inputValue进行赋值，然后浏览器的输入框也会显示一样的值 -->
  12.         <input type="text" v-model="inputValue"/>
  13.         <!-- 在标签中绑定点击事件，有个方法，方法一定要写在vue实例中，有个叫methods的键值对里 -->
  14.         <button v-on:click="handleBtnClick">提交</button>
  15.         <!-- v_for遍历数组 -->
  16.         <ul>
  17.             <li v-for="item in list">{{item}}</li>
  18.         </ul>
  19.     </div>
  20.     <script>
  21.         var app = new Vue({
  22.             el:'#app',
  23.             data: {
  24.                 list: [],
  25.                 inputValue: '',
  26.             },
  27.             methods: {
  28.                 handleBtnClick: function() {
  29.                     // list中是空值，因此向list中添加值，添加的值是输入框的内容
  30.                     this.list.push(this.inputValue)
  31.                     // 提交将输入框的值弹出来
  32.                     // alert(this.inputValue);
  33.                     // 每次点击按钮，都将input框的值赋值为空
  34.                     this.inputValue = ""
  35.                 }
  36.             }
  37.         })
  38.     </script>
  39. </body>
  40. </html>

index.htmlindex.html

我们操作的都不是dom对象，都是对数据进行操作，这种操作被称为MVVM模式，

传统的开发模式MVP模式：Model层：数据层。Presenter层：呈现层，View层：视图层接下来利用Jquery实现MPV开发模式的TodoList。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList Jquery</title>
  6.     <script src="./jquery.js"></script>
  7. </head>
  8. <body>
  9.     <!-- V层 视图 -->
  10.     <div>
  11.         <input type="text" id="input" />
  12.         <button id="btn">提交</button>
  13.         <ul id="list"></ul>
  14.     </div>
  15.     <script>
  16.         // MPV模式
  17.         // P层  控制器通过控制dom操作改变视图，控制ajax请求  M层这里没有，就是操作ajax数据层
  18.         function Page() {
  19.  
  20.         }
  21.  
  22.         $.extend(Page.prototype, {
  23.             init: function() {
  24.                  this.bindEvents()
  25.             },
  26.             bindEvents: function() {
  27.                 var btn = $('#btn');
  28.                 btn.on('click', $.proxy(this.handleBtnClick,this))
  29.             },
  30.             handleBtnClick: function() {
  31.                 var inputElem =  $("#input");
  32.                 var inputValue =inputElem.val();
  33.                 var ulElem = $("#list");
  34.                 ulElem.append('<li>'+ inputValue +'</li>');
  35.                 inputElem.val("");
  36.             }
  37.         })
  38.         var page = new Page();
  39.         page.init();
  40.  
  41.     </script>
  42. </body>
  43. </html>

jquery.html

MVVM设计模式图：我们不用关心dom是如何实现的，我们只需要关注View层以及Model层。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <!-- 引入vue.js的库 -->
  7.     <script src="./vue.js"></script>
  8. </head>
  9. <body>
  10.     <!-- V层 -->
  11.     <div id="app">
  12.         <!-- v-model数据的双向绑定，在浏览器控制台对app.$data.inputValue进行赋值，然后浏览器的输入框也会显示一样的值 -->
  13.         <input type="text" v-model="inputValue"/>
  14.         <!-- 在标签中绑定点击事件，有个方法，方法一定要写在vue实例中，有个叫methods的键值对里 -->
  15.         <button v-on:click="handleBtnClick">提交</button>
  16.         <!-- v_for遍历数组 -->
  17.         <ul>
  18.             <li v-for="item in list">{{item}}</li>
  19.         </ul>
  20.     </div>
  21.     <script>
  22.         // MVVM设计模式
  23.         // VM层实现数据变化，标签的显示也发生变化，自动实现。
  24.         // M层，对数据进行操作  我们基本需要关注M层  面向数据进行编程
  25.         var app = new Vue({
  26.             el:'#app',
  27.             data: {
  28.                 list: [],
  29.                 inputValue: '',
  30.             },
  31.             methods: {
  32.                 handleBtnClick: function() {
  33.                     // list中是空值，因此向list中添加值，添加的值是输入框的内容
  34.                     this.list.push(this.inputValue)
  35.                     // 提交将输入框的值弹出来
  36.                     // alert(this.inputValue);
  37.                     // 每次点击按钮，都将input框的值赋值为空
  38.                     this.inputValue = ""
  39.                 }
  40.             }
  41.         })
  42.     </script>
  43. </body>
  44. </html>

MVVM设计模式代码

6、前端组件化

　　前端组件化，就是将整个部分是由每一个组件拼接起来的，这样的便于维护。有点像我们生活中拼积木一样，将一个一个的积木拼接起来，组件化就像我们的积木一样，拼接成一个大型项目。

7、使用组件化思想修改TodoList

全局组件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <script src="./vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <input type="text" v-model="inputValue"/>
  11.         <button v-on:click="handleBtnClick">提交</button>
  12.         <ul>
  13.             <todo-item v-bind:content="item"
  14.                        v-for="item in list">
  15.             </todo-item>
  16.         </ul>
  17.     </div>
  18.     <script>
  19.         Vue.component("TodoItem", {   // 组件化
  20.             props: ["content"],
  21.             template: "<li>{{content}}</li>",
  22.         });
  23.  
  24.         var app = new Vue({
  25.             el:'#app',
  26.             data: {
  27.                 list: [],
  28.                 inputValue: '',
  29.             },
  30.             methods: {
  31.                 handleBtnClick: function() {
  32.                     this.list.push(this.inputValue);
  33.                     this.inputValue = ""
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38. </body>
  39. </html>

　　组件化与绑定值，这是Vue提供的全局组件，将item与content绑定起来，然后必须将props绑定的值添加到列表中，最后用组件template模板键值对对应需要添加的值。

局部组件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <script src="./vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <input type="text" v-model="inputValue"/>
  11.         <button v-on:click="handleBtnClick">提交</button>
  12.         <ul>
  13.             <todo-item v-bind:content="item"
  14.                        v-for="item in list">
  15.             </todo-item>
  16.         </ul>
  17.     </div>
  18.     <script>
  19.         // Vue.component("TodoItem", {
  20.         //     props: ["content"],
  21.         //     template: "<li>{{content}}</li>",
  22.         // });
  23.         var TodoItem = {
  24.             props: ["content"],
  25.             template: "<li>{{content}}</li>",
  26.         }
  27.  
  28.         var app = new Vue({
  29.             el:'#app',
  30.             components: {
  31.                 TodoItem: TodoItem
  32.             },
  33.             data: {
  34.                 list: [],
  35.                 inputValue: '',
  36.             },
  37.             methods: {
  38.                 handleBtnClick: function() {
  39.                     this.list.push(this.inputValue);
  40.                     this.inputValue = ""
  41.                 }
  42.             }
  43.         })
  44.     </script>
  45. </body>
  46. </html>

对比一下全局组件，局部组件需要将组件注册到Vue实例中去，这样也能实现全局组件的功能。

 8、简单的组件间传值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoList</title>
  6.     <script src="./vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <input type="text" v-model="inputValue"/>
  11.         <button v-on:click="handleBtnClick">提交</button>
  12.         <ul>
  13.             <!-- 副组件 -->
  14.             <todo-item :content="item"
  15.                        v-bind:index="index"
  16.                        v-for="(item,index) in list"
  17.                        @delete="handleItemDelete">
  18.             </todo-item>
  19.         </ul>
  20.     </div>
  21.     <script>
  22.         // Vue.component("TodoItem", {
  23.         //     props: ["content"],
  24.         //     template: "<li>{{content}}</li>",
  25.         // });
  26.         // 子组件
  27.         var TodoItem = {
  28.             props: ["content","index"],
  29.             template: "<li @click='handleItemClick'>{{content}}</li>",
  30.             methods: {
  31.                 handleItemClick: function() {
  32.                     this.$emit("delete",this.index);
  33.                 }
  34.             }
  35.         }
  36.  
  37.         var app = new Vue({
  38.             el:'#app',
  39.             components: {
  40.                 TodoItem: TodoItem
  41.             },
  42.             data: {
  43.                 list: [],
  44.                 inputValue: '',
  45.             },
  46.             methods: {
  47.                 handleBtnClick: function() {
  48.                     this.list.push(this.inputValue);
  49.                     this.inputValue = ""
  50.                 },
  51.                 handleItemDelete: function(index) {
  52.                     this.list.splice(index,1);
  53.  
  54.                 },
  55.             }
  56.         })
  57.     </script>
  58. </body>
  59. </html>

　　副组件传过来的index就会被子组件的props接受，子组件被点击的时候，触发delete事件，同时把this.index作为参数传给副组件，副组件正好监听delete事件，他就会去执行handleItemDelete这个方法，这个方法就会拿到子组件传递过来的值。

01-Vue.js基础的更多相关文章

  1. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  2. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  3. 使用eclipse初步学习vue.js基础==》v-for的使用 ②

    一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...

  4. Vue.js基础拾遗

    本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...

  5. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  6. Vue.js 基础快速入门

    Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...

  7. Vue.js基础语法（三）

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...

  8. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  9. 记录21.07.22 —— Vue.js基础（一）

    VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...

  10. 一份不错的vue.js基础笔记！！！！

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

随机推荐

  1. Servlet还有学习的必要吗？（手工搭建Servlet）

    前言 在初学Java web的时候,就曾听到过这样一种说法: java Web的演变过程大概可以分为4个阶段: jsp + Servlet + jdbc spring + struts2+ hiber ...

  2. TypeScript躬行记（3）——类

    类是对对象的抽象,描述了对象的特征和行为,而对象就是类的实例.ES6引入了类的概念(相关内容可参考ES类和ES6类的继承两节),TypeScript在此基础上,不仅根据ES7等规范完善了类的语法,还添 ...

  3. django路由匹配层

    目录 orm表关系如何建立 一对多 多对多 一对一 django请求生命周期流程图 路由层 路由的简单配置 Django路由匹配规律 分组 无名分组 有名分组 反向解析 路由分发 名称空间 伪静态 虚 ...

  4. 一个我经常用到的采集网页数据抓取网页获取数据的PHP函数类

    class get_c_str { var $str; var $start_str; var $end_str; var $start_pos; var $end_pos; var $c_str_l ...

  5. Android 自定义吐司通知

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...

  6. Android 上下文菜单 ContextMenu

    public class MainActivity extends Activity { private ListView listView; @Override protected void onC ...

  7. 用百度大脑技术让AI做回新闻主播！

    实现效果: 利用百度新闻摘要能力和微信小程序,快速抽取新闻摘要内容并进行语音播报,让AI做回新闻主播!本文主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货哦!! 想了解pytho ...

  8. 一键删除数据库所有的外键约束-FOREIGN_KEYS

    DECLARE @ESQL VARCHAR(1000);DECLARE FCursor CURSOR --定义游标FOR (SELECT  'ALTER TABLE '+O.name+' DROP  ...

  9. windows客户端访问FTP服务器

    客户端访问FTP服务器步骤: 首先双击此电脑,在弹出的窗口输入如下信息 刚安装完的FTP服务器只有一个pub目录,因为这里是使用匿名用户登录的 FTP服务器默认的匿名目录在/var/ftp/pub/下 ...

  10. 2019年腾讯PHP程序员面试题目分享

    有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群​jq.qq.com 1. php 的垃圾回收机制 PHP 可以自动进行内存管理,清除 ...