前端框架之Vue.js

前言：

前端主流框架有Vue、react、angular，目前比较火因为Vue比较容易学习，运营起来比较快速；

Vue是什么呢？

是一个基于MVVM架构的，前端框架；

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。

它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

个人理解： HTML标签显示内容和Vue对象中的变量是一致的；

一、简单使用

步骤1 引入Vue.js文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>

步骤2 创建HTML标签

步骤3 实例化Vue对象，并传参设置对象属性；

参数介绍：

el属性：该属性的值必须为 最外层HTML标签的id名称，这样绑定之后就可以在#app标签中也可以应用Vue对象的属性和指令了；

data属性:

在data中Vue中声明变量（注意只有 data属性中声明的变量在Vue中才可以使用）

步骤4、将Vue对象中声明的变量渲染到HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>  <!--1、 引入Vue.js 、-->
</head>
<body>
<div id="app">                       <!--2、创建HTML标签-->
    <p>{{temp1}}</p>                       <!-- 6、把Vue中声明的变量渲染到 HTMK标签 -->
    <b>{{temp2}}</b>
</div>
</body>
<script>
    new Vue({                         // 3、实例化1个实例化 Vue对象
        el:'#app',  // 传入1个为el的属性（注意：1、该属性的值必须为 最外层HTML标签的 id名称，这样绑定之后就可以在#app标签中应用Vue的属性和指令了）
        data:{                        // 5、传入2个为data的属性，该属性保存Vue的变量
            temp1:'Hello world !', //  6、在data中Vue中声明变量（注意只有 data属性中声明的变量在Vue中才可以使用）
            temp2:'Hel  lo girl !'
        }
    })
</script>
</html>

二、Vue指令介绍

除了通过{{变量名}}，把Vue对象声明的变量渲染到HTML中之外，还可以通过指令的方式对DOC元素（HTML标签）赋值，或其他操作；

1、v-html="variable" 渲染标签变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
 
<body>
<div id="app">
    <div v-html="ele1"></div>   <!--渲染标签变量 -->
    <b></b>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            ele1:'<a href="http://www.baidu.com">跳转</a>'
        }
    })
</script>
</html>

2、v-text='variable ' 渲染文本字符串变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
 
<body>
<div id="app">
    <div v-text="temp"></div>   <!--渲染文本字符串 -->
    <b></b>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            temp:'你好！'
        }
    })
</script>
</html>

3、v-show 显示和隐藏（通过display来控制显示与隐藏，真实标签不会被删除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
    <div v-show="ok">我是青年</div>  <!-- 根据布尔值 显示或者隐藏渲染效果-->
    <div v-show="ok1">我是坏人</div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            ok:true,
            ok1:false
        }
    })
</script>
</html>

4、v-if/else 通过判断语句控制显示与隐藏（和v-show的区别，标签会被插入、删除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{temp1?666:444 }}</p>   <!--Vue支持三元表达式的形式做变量渲染 -->
    <p v-if="yes">yes</p>     <!--Vue的变量渲染支持  if 和else判断 -->
    <p v-else>flase</p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            yes:true
        }
    } )
</script>
</html>

5、v-for 遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            下标：{{index}}   <!-- 遍历Vue对象中声明的变量，第2个值为 item -->
            数值：{{item}}     <!-- 遍历Vue对象中声明的变量，第1个值为 index -->
        </li>
    </ul>
    <ul>
        <li v-for="(value,key) in obj">
            {{value}}           <!--遍历字典 第1个值为 字典的值和 Python正好相反 -->
            {{key}}             <!--遍历字典 第2个值为 字典的键和 Python正好相反 -->
        </li>
    </ul>
 
    <ul>                    <!--Vue 遍历嵌套类型数据 -->
        <li v-for="item in obj2">  <!-- 注意不要加括号（） -->
            {{item.name}}      <!--对象的name-->
            {{item.sex}}
            {{item.age}}
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [11, 22, 33, 44, 55, 66],
            obj: {name: '小三', sex: '女', age: 18},
            obj2: [{name: '小三', sex: '女', age: 18}, {name: '小四', sex: '女', age: 28}],
        }
    })
</script>
</html>

6、v-bind:标签属性=‘ 变量’ Vue动态操作标签的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!---v-bind 操作标签的属性 -->
    <a v-bind:href='url' v-bind:class='cla' v-text="text" style="text-decoration: none"></a>
</div>
</body>
<script>
   vm= new Vue({
        el:'#app',
        data:{
            url:"http://www.baidu.com",
            cla:'person',
            text:'百度一下',
        }
    })
     setTimeout(function () {  //setTimeout  设置2秒钟后修改  Vuel对象中的变量
        vm.url='http://www.le.com'  //如果修改了 Vuel对象中声明的变量，页面中的效果也会动态改变
        vm.text='乐视一下'
    },2000)
</script>
</html>

7、v-on:click="事件(args)="事件(args)"Vue为标签绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点我有饭吃" v-on:click="showme(args)">   <!-- v-on:click绑定事件,支持传入参数-->
 
    <input type="button" value="点我有饭吃" @click="showme(args)">   <!-- @:click绑定事件,也支持传入参数-->
</div>
</body>
<script>
 
new Vue({
    el:'#app',
    data:{
        args:'不吃'
    },
    methods:{showme:function (a) {
        alert(a)
    } }
})
</script>
</html>

8、v-model数据双向绑定（所见即所得）

我们在前端页面form 标签就是为了向后台提交数据，有了v-model 再也不用寻找到input标签再去获取val值了，

如果我们接收到了后台的数据，赋值给Vue变量，页面标签显示的内容也更新了，这就是v-model双向绑定的优势所在；

把视图（HTML标签显示内容）和model数据（Vue中声明的变量）进行双向绑定，通过视图可以改变数据，通过数据也可以改变视图；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="myapp">
    <input type="text" v-model="showtemp">
    <p>{{showtemp}}</p>
    <p>{{showtemp}}</p>
    <input type="button" v-on:click="showme" value="点击我">  <!--显示层数据和model层数据一致，输入的内容改变变量自动改变；-->
 
    <select v-model="sel">                        <!--select选中那个option，sel变量被赋值为那个option的value  -->
        <option value="1" selected>111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
</div>
</body>
<script>
    new Vue({
        el:'#myapp',
        data:{
            showtemp:'', // model层数据和显示层数据一致，input标签输入的内容改变 showtemp变量内容改变；
            sel:'1'
        },
        methods:{showme:function () {
            alert(this.sel)
        }}
    })
</script>
</html>
 
<!--MVVM框架的优势 -->
 <!--Vue中很大的一个特性，数据的双向绑定
  优势1：我们在前端页面form 标签就是为了向后台提交数据，有了v-model 再也不用寻找到input标签再去获取val值了
  优势2：如果我们把后台的数据，赋值给Vue变量，页面标签显示的内容也更新了，v-model双向绑定的优势！   -->

9、Vue三元表达式的形式做变量渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{temp1?666:444 }}</p>   <!--Vue支持三元表达式的形式做变量渲染 -->
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            temp1:true
        }
    } )
</script>
</html>

10、修改Vue data属性中的变量（页面效果动态改变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{temp1}}</p>
        <b>{{temp2}}</b>
    </div>
</body>
<script>
    vm=new Vue({
        el:'#app',
        data:{
            temp1:'大大大大',
            temp2:'小小小小' ,
        }
 
    })
    setTimeout(function () {  //setTimeout  设置2秒钟后修改  Vuel对象中的变量
        vm.temp1='小小小小'  //如果修改了 Vuel对象中声明的变量，页面中的效果也会动态改变
        vm.temp2='大大大大'
    },2000)
</script>
</html>

11、Vue中变量支持数值运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
    <p>{{temp1}}</p>
    <p>{{temp1}}</p>
    <p v-text='temp0+temp1'></p>  <!--Vue支持数字运算 -->
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            temp0:100,
            temp1:1
        }
    })
</script>
</html>

12、 mounted（存放所有html加载完毕之后，立即自动执行的事件）

mounted:function () {    // mounted自动加载showme 函数
    this.showme()
  },

13、methods（存放事件触发后执行的函数）

  methods: {
    showme: function () {
      var url = "./static/hotcity.json";
      var self = this;
      axios.get(url).then(function(respose){
          self.arr = respose.data.data.hotCity;
 
      })
    }
  }

三、Vue前后端数据交互（Axios）

无论使用什么前端框架和后端进行交换是不可避免的，例如jQuery使用ajax，Vue也有和后端交换的方法Axios；

1、 axios.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点我" v-on:click="showlist">
    <ul>
        <li v-for="item in lists">
            {{item.cityCode}}
            {{item.cityName}}
        </li>
    </ul>
 
</div>
</body>
<script>
 
new Vue({
    el:'#app',
    data:{
        lists:[]
    },
    methods:{showlist:function () {
        url='./hotcity.json';
        var self = this;                      // 由于Vue对象，是类实例化的，所以this是局部对象不是windows对象，赋值给self；
        axios.get(url)
    .then(function (res) {
        self.lists=res.data.data.hotCity     //self 现在是 showlist函数中的局部this;
 
    }).catch(function (error) {
 
})
    } }
})
 
</script>
</html>

axios.get(url,{params:{username:'zhanggen'} })带参数的get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点我" v-on:click="showlist">
    <ul>
        <li v-for="item in lists">
            {{item.cityCode}}
            {{item.cityName}}
        </li>
    </ul>
 
</div>
</body>
<script>
 
new Vue({
    el:'#app',
    data:{
        lists:[]
    },
    methods:{showlist:function () {
        url='./hotcity.json';
        var self = this;                   // 把new创建的Vue对象this， 赋值给self变量，在回调函数中才能通过sel变量获取 Vue对象中声明的变量；
        axios.get(url,{params:{username:'刘德华'}  })    //params:{}指get请求携带的参数
    .then(function (res) {
        self.lists=res.data.data.hotCity                   //self 现在是 showlist函数中的局部this;
 
    }).catch(function (error) {
 
})
    } }
})
 
</script>
</html>

2、 axios.post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="axios.js"></script>
    <script src="vue.js"></script>
</head>
<body>
<div id="myapp">
    <p>姓名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="pwd"></p>
    <p><input type="button" value="登录" v-on:click="login" ></p>
</div>
</body>
<script>
   a= new Vue({
        el: '#myapp',
        data: {
            username: '',
            pwd: ''
        },
        methods: {
            login: function () {
                var url='http://127.0.0.1:8000/api/'
                 axios.post(url,
                    {
                        name: this.username,
                        password: this.pwd
                    },
                    {
                        'headers':{'Content-Type': 'application/x-www-form-urlencoded'}
                    }).then(function (res) {
                                alert(res)
                }).catch(function (error) {
 
                })
 
            }
        }
    })
 
</script>
</html>

Django后端接收

from django.shortcuts import render,HttpResponse
import json
def api1(request):
        print(request.method)
        if request.method=='POST':
            obj = HttpResponse('ok')
            obj['Access-Control-Allow-Origin'] = "*"
            print(request.POST)
        return obj

四、Vue的运行平台 node.js

1、node.js介绍

Node.js 可以用JavaScript写一个服务端的服务器，是一个基于 Chrome V8 引擎的 JavaScript 后端运行环境，Vue框架也是基于Node.js运行的；

Node.js 的包管理器 npm（类似于linux的yum），是全球最大的开源库生态系统。

类似于：

Python可以用Django创建服务端给别人提供数据、php可以在Apache创建服务端、Java可以使用Tomcat构建服务端一样；

官网：http://nodejs.cn/

Node.js的应用场景：

由于Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，适用于开发聊天工具、电子商务等高并发app;

银角补充：websock 是http协议的弟弟，都是基于TCP协议，不同于http协议的是websock使用的长连接，并且连接需要经过握手+验证；如果想要装逼（Magic strings）

2、安装node.js平台并创建Vue项目

2.1 登录官网：

http://nodejs.cn/download/

2.2 选择适配操作系统：

2.3 检查是否安装成功：node -v

2.4 通过脚手架创建Vue项目

全局安装脚手架：npm install vue-cli -g

创建基于webpack模板的项目： D: vue init webpack myproject

进入项目安装依赖包：cd myproject npm install （该环节会比较慢）

2.5 启动项目：npm run dev 或 npm start ( 以上环节可能会报错，以项目启动成功为最终目的)

四、基于node.js平台开发Vue项目

Vue非常火的原因是可以快速开发单页面应用( 1个网站只有1个页面，通过点击这个页面的菜单加载 1个组件)

项目目录结构介绍

1、node_models目录

存放npm下载的插件

2、src目录

assets目录

　　存放静态图片

components目录

　　存放网页组件，在此目录下创建新组件

router目录

　　index.js （为组件设置访问路径）

app.vue （根组件所有组件的入口）

　　所有组件的根组件，为所有组件设置路由和组件关系，把所有组件整合渲染到首页；

main.js

　　核心文件，和项目最外层index.html默认首页是组合关系，为默认首页创建Vue对象（只能创建1个Vue对象）；

4、index.html

项目最外层index.html作为1个div标签，把根组件和所有组件中所有内容放在index里面；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myproject</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5、package.json

批量安装插件

小结：

基于node.js使用Vue创建单页面应用思路：

1、在components目录下创建组件（.vue结尾的文件）

<template>
<div>
  刘娟
</div>
</template>
 
<!--
export default： 对外开放1个接口，在组件中export 导出了，才能在router目录的index.js文件里 导入！
  name        ： 组件名称
  data ()     ：函数（对于组件来说 data 必须是函数）
  methods     ：写其他函数
 
 -->
 
<script>
export default {
  name: 'liujuan',
  data () {
    return {
      msg: '我相信你是好的朋友'
    }
  }
}
</script>
 
<style scoped>
</style>

2、在router目录下的index.js中导入新组件，并为组件设置访问url生成路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入components目录下的 zhanggen组件
import zhanggen from '@/components/zhanggen.vue'
// 为新创建的组件设置URL
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'zhanggen',
      component: HelloWorld
    },
    {
      path: '/zhanggen/',
      name: 'SSD',
      component: zhanggen
    }
  ]
})

3、通过根组件把组件和链接展示到首页（<router-link to="/">你</router-link>）

<!--App.vue是1个根组件，所有的组件都要通过根组件配置 路由和组件关系
 它包含三部分
    template（写html代码）
    script（写js代码）
    css（写css代码）  -->
 
<!-- <router-view/>用来建立 组件和之间的路由关系 -->
 
<template>
  <div id="app">
    欢迎来到老男孩
    <router-link to="/">你</router-link>
    <router-link to="/zhanggen/">好</router-link>
     <router-view/>
  </div>
</template>
                                     <!--javescript代码 -->
<script>
export default {
  name: 'app'
}
</script>
 
                                     <!--css代码 -->
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

通过package.json批量安装插件

1、以管理员身份运行cmd cd 项目目录 npm install axios(插件名称)

2、展开node_modules目录，查看安装的插件名称（插件源）

3、在package.json文件引入插件源中的插件名称

4、使用

在src目录下main.js中

import axios from 'axios'  // 导入第3方插件
Vue.use(axios)                // 使用插件

在组件里引入

<script>
import axios from 'axios'
</script>

在组件里使用

<script>
import axios from 'axios'   //引入安装好的axios插件
</script>

<script>
import axios from 'axios'   //引入安装好的axios插件
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '我相信你是好的朋友',
      arr:[],
    }
  },
  mounted: function () {    // mounted自动加载showme 函数
    this.showme()
  },
  methods: {
    showme: function () {
        var url = "./static/hotcity.json" ;
        var self = this ;
        axios.get(url).then(function(respose) {
          self.arr = respose.data.data.hotCity;
 
      })
    }
  }
}
</script>

<template>
<div>
  this is a div elements.
  <ul>
    <li v-for="item in arr">
      姓名：{{item.name }}
      年龄：{{item.age}}
      性别：{{item.sex}}
    </li>
  </ul>
  <div>
  <p>姓名：<input type="text" v-model="username"> </p>
  <p>年龄：<input type="text" v-model="age"> </p>
   <p>性别：<input type="text" v-model="sex"> </p>
  <input type="button" value="添加" v-on:click="add">
  </div>
</div>
</template>
 
<!--
export default： 对外开放1个接口
  name        ： 组件名称
  data ()     ：函数（对于组件来说 data 必须是函数）
  methods     ：写其他函数
 
 -->
 
<script>
export default {
  name: 'zhenggen',
  data () {
    return {
      msg: '我相信你是好的朋友',
      arr: [],
      username:'',
      age:'',
      sex:''
 
    }
  },
  mounted: function () {
    this.showlist()
  },
  methods: {
    showlist(){   //定义函数 showlist(){}
       this.arr=[
         {name:"日天",age:"18",sex:'femele'},
          {name:"日地",age:"12",sex:'femele'},
          {name:"日空气",age:"14",sex:'femele'},
       ]
    },
    add(){   //arr.push({}) 添加元素
      this.arr.push({name:this.username,age:this.age,sex:this.sex } )
    }
  }
}
</script>
 
<style scoped>
  ul li{
    list-style-type:none;
  }
</style>

五、知识总结

1、前后端分离：

经过对Vue的一些学习得知Vue可以通过组件构建单页面应用，并且可以通过路由在当前页做页面的跳转，还可以使用axios插件（ajax）向后获取和提交数据；

那么Django后台return的响应，再也不需要响应redirect和模板渲染了，只需要提供1个API接口（url），给前端、APP 返回json数据即可（1个APi适配多中应用），

这种前后端搭配模式叫做前后端分离；

例如

前端代码运行在node.js平台上，域名 https://www.le.com；（让客户访问）

前端启动起来之后，向后端获取数据 https://api.le.com；（给前端提供数据）

2、Vue项目

可以把node.js中的Vue项目，分为3层;

1层index.htmm包含所有组件的内容，src目录下的main.js为index.html实例化创建vue对象

2层根组件app.vue

<template>
  <div id="app">
    欢迎来到老男孩
    <router-link to="/">首页</router-link>
    <router-link to="/zhanggen/">课程</router-link>
    <router-link to="/liujuan/">Luffy学位</router-link>
     <router-view/>
  </div>
</template>
 
注释：
1、<router-link to="路由中的path">首页</router-link>，最终会生成1个a标签，用户点击那个a标签；
 
2、用户点击哪个a标签，就在 <router-view/>中渲染哪个组件；

3层router目录下的index.js承上启下为各组件生成访问路径，让根组件调用；

4层 components目录下创建各个组件

3、Vue插件扩展

跟Python的pip 类似，如果在项目开发中需要使用其他插件，使用npm去网络上自动下载，下载成功后后存放在node_modeule站点包目录下，使用import导入；

4、关于JavaScript的this关键字

1.初步认识

js 函数中的 this关键字代指Window全局对象，类中的 this关键字代指类的对象；

<script>
//1、js 函数中的 this代指Window全局对象
    function zhanggen() {
        alert(this)
    }
    zhanggen()
 
//2、js 类中的 this代指 类的对象
function Foo() {
        this.name='egon'
    }
obj= new Foo()
alert(obj.name)
 
</script>

2、进阶认识

如果函数被对象.函数执行，那么函数中的this代指该对象本身

如果在自执行函数中 this代指 window 对象;

this可以被赋值，由于this 被赋值为 that,那么即使在自执行函数中也是 userinfo对象

<script>
userinfo={
    name:'alex',
    age:18,
    show:function () {    //userinfo  是1个字典对象
//        alert(this.age)  //this是userinfo对象
        var that = this;
        (function () {
          console.log(this)  //window对象
          console.log(that)  // that 还是userinfo对象
        })()
    }
}
userinfo.show()
//如果函数 被对象.函数执行，那么函数中的this代指该对象本身
//如果在自执行函数中  this代指 window 对象;
//this可以被赋值，由于this 被赋值为 that,那么即使在自执行函数中也是 userinfo对象
</script>

大刚博客：http://www.cnblogs.com/zhaodagang8/