zoukankan      html  css  js  c++  java
  • 前端框架之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>
    View Code

    步骤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>
    View Code

     

    二、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>
    View Code

    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>
    View Code

    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>
    View Code

     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>
    View Code

     

     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>
    View Code

     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>
    View Code

     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>
    View Code

    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双向绑定的优势!   -->
    View Code

    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>
    View Code

    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>
    View Code

    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>
    View Code

    12、 mounted(存放 所有html加载完毕之后,立即自动执行的事件)

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

    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;
    
          })
        }
      }
    View Code

    三、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>
    View Code

    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>
    View Code

    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>
    View Code

    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
    View Code

    四、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>
    View Code

    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>
    View Code

    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
        }
      ]
    })
    View Code

    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>
    View Code

    通过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)                // 使用插件
    View Code

    在组件里引入

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

    在组件里使用

    <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>
    View Code
    <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>
    View Code

     五、知识总结

    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>
    View Code

    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>
    View Code

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

  • 相关阅读:
    vim 颜色主题设置
    给vim安装YouCompleteMe
    linux的主题与图标
    arch点击硬盘无法挂载
    arch安装完成之后不能使用笔记本自带的无线网卡
    curl的使用
    arch优化开机
    seo成功案例的背后秘密
    网站seo整站优化有什么优势
    企业站如何做长尾关键词seo优化
  • 原文地址:https://www.cnblogs.com/sss4/p/7844394.html
Copyright © 2011-2022 走看看