袁凤鸣的博客 | Fleeming's Blog Front-end Dev Engineer

Vuejs2.0学习笔记

2017-09-21
袁凤鸣
vue

Vuejs2.0学习笔记


按照慕课网的Vuejs2.0的学习视频零基础实践的一个demo如下:
演示页面:袁凤鸣 | Vuejs2.0购物车demo
仓库地址:https://github.com/yfming93/vuejs

同时感谢慕课网讲师 河畔一角 分享的学习资料
使用vue2.0实现购物车和地址选配功能

(一)、基本配置命令介绍

  • cnpm install vue --save 是将软件安装到dependencies里面,--save-dev是安装到devDependencies里面

    --save是将软件安装到开发里面去,在package.json文件中的devDependencies

  • Mac 电脑终端配置运行如下:

     MingodeMacBook-Pro:~ Mingo$ cd /Users/Mingo/Desktop/VueShoppingCart
     MingodeMacBook-Pro:VueShoppingCart Mingo$ ls
        address.html	cart.html	css		data		img		js
     MingodeMacBook-Pro:VueShoppingCart Mingo$ npm init
        This utility will walk you through creating a package.json file.
        It only covers the most common items, and tries to guess sensible defaults.
           
        See `npm help json` for definitive documentation on these fields
        and exactly what they do.
           
        Use `npm install <pkg>` afterwards to install a package and
        save it as a dependency in the package.json file.
           
        Press ^C at any time to quit.
        package name: (vueshoppingcart) VueShoppingCart
        Sorry, name can no longer contain capital letters.
        package name: (vueshoppingcart) vuejs
        version: (1.0.0)
        description: 这是袁凤鸣的第一个Vuejs2.0开发的购物车程序。
        entry point: (index.js)
        test command:
        git repository:
        keywords: vueshopping
        author: 袁凤鸣
        license: (ISC)
        About to write to /Users/Mingo/Desktop/VueShoppingCart/package.json:
           
        {
            "name": "vuejs",
            "version": "1.0.0",
            "description": "这是袁凤鸣的第一个Vuejs2.0开发的购物车程序。",
            "main": "index.js",
            "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1"
            },
            "keywords": [
                         "vue,shopping"
                         ],
            "author": "袁凤鸣",
            "license": "ISC"
        }
           
           
        Is this ok? (yes) y
           
           
        ╭─────────────────────────────────────╮
                                             
           Update available 5.3.0  5.4.2    
             Run npm i -g npm to update      
                                             
        ╰─────────────────────────────────────╯
           
     MingodeMacBook-Pro:VueShoppingCart Mingo$ sudo npm i -g npm
        Password:
        /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
        /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
        + npm@5.4.2
        added 21 packages, removed 111 packages and updated 19 packages in 282.892s
           
           
        ╭─────────────────────────────────────╮
                                             
           Update available 5.3.0  5.4.2    
             Run npm i -g npm to update      
                                             
        ╰─────────────────────────────────────╯
           
     MingodeMacBook-Pro:VueShoppingCart Mingo$ sudo npm i -g npm
        Password:
        /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
        /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
        + npm@5.4.2
        updated 1 package in 8.177s
     MingodeMacBook-Pro:VueShoppingCart Mingo$ npm -v
        5.4.2
     MingodeMacBook-Pro:VueShoppingCart Mingo$ npm install vue --save
        npm notice created a lockfile as package-lock.json. You should commit this file.
        npm WARN vuejs@1.0.0 No repository field.
           
        + vue@2.4.4
        added 1 package in 3.255s
     MingodeMacBook-Pro:VueShoppingCart Mingo$ npm install vue-resource --save
        npm WARN vuejs@1.0.0 No repository field.
           
        + vue-resource@1.3.4
        added 22 packages in 21.824s
     MingodeMacBook-Pro:VueShoppingCart Mingo$ ls -l -a
        total 96
        drwxr-xr-x  14 Mingo  staff   476  9 19 14:41 .
        drwx------+ 74 Mingo  staff  2516  9 19 14:35 ..
        -rw-r--r--@  1 Mingo  staff  6148  9 19 14:41 .DS_Store
        drwxr-xr-x   7 Mingo  staff   238  9 19 14:39 .idea
        -rwxr-xr-x@  1 Mingo  staff   363  8 31 00:57 .project
        -rwxr-xr-x@  1 Mingo  staff  9550  8 31 00:57 address.html
        -rwxr-xr-x@  1 Mingo  staff  8622  8 31 00:57 cart.html
        drwxr-xr-x@  6 Mingo  staff   204  8 31 00:57 css
        drwxr-xr-x@  5 Mingo  staff   170  8 31 00:57 data
        drwxr-xr-x@  8 Mingo  staff   272  8 31 00:57 img
        drwxr-xr-x@  5 Mingo  staff   170  9 19 14:12 js
        drwxr-xr-x  26 Mingo  staff   884  9 19 14:41 node_modules
        -rw-r--r--   1 Mingo  staff  5900  9 19 14:41 package-lock.json
        -rw-r--r--   1 Mingo  staff   389  9 19 14:41 package.json
     MingodeMacBook-Pro:VueShoppingCart Mingo$
    

(二)、Vue 1.0 和 2.0 区别

从 Vue 1.x 迁移【参照官方文档】

  • methods负责声明方法 方法的调用写在mounted
    Vue1.0ready Vue2.0mounted
    • 生命周期mounted其实可以换成created吧,本例用created也行
    • ready 替换,使用新的 mounted 钩子函数替代。应该注意的是,使用 mounted 并不能保证钩子函数中的 this.$eldocument 中。为此还应该引入 Vue.nextTick/vm.$nextTick。例如:

          mounted: function () {
              this.$nextTick(function () {
                // 代码保证 this.$el 在 document 中
              })
          }
      
  • 2.0
    • 使用图片 v-bind:src=""
    • $index已经删除 ` v-for(item,index)`使用索引
    • 2.0 不再支持用$delete删除
    • 2.0 取消了标签内 属性={{ }} 功能
  • 给图片动态绑定需要用 v-bind:src=xx.xxvue2.0src:{{xx.xx}} 是无效的
    • Mustache既双大括号{{}} 不能在 HTML 属性中使用,应使用 v-bind 指令,相当于html的自定义属性。v-bind:src=""
      Mustache内部可以使用 JS 表达式,如{{ number + 1 }}
      。在方法里使用this.$http.get().then()可以使用vue-resource

(三)、语法讲解

  • v-for 用于循环

    循环。主要用于表格,<li> 标签。去循环一个数组。【凡是看到列表就推荐使用v-for
    使用for渲染商品时,若想加索引如下 (限vue2.0)

       v-for="(item,index) in productList"
        在商品名字处 {{item.productName+index}}
    
  • filter 过滤器:

    过滤器,格式化数据。主要对接口返回的字段进行业务转换,数据进行格式化如后台返回金额19数字。页面显示:¥19.00元

  • 写在实例Vue内部的是局部过滤器,

         new Vue({
           filters:{
           formatMoney: function (value){
               return "$"+value.toFixed(2);
            }
          }
         })  - 写在外部的是全局过滤器(value:默认值 ,type参数)
    
         Vue.filter("money", function (vaule, type) {
             return "¥" + vaule.toFixed(2) + type;
         }) 
    

    eg: 例如:
    <div class="item-price">{ { item.productPrice | formatMoney('元') }}</div>

    注意: 全局的过滤器不要加s

  • v-text 文本渲染

    {{}}功能一样。但是{{}}在第一次页面Vue木有初始化完成会在页面上显示{{}}字符。故文本渲染多用v-text

    • 注意:v-text里用过滤器filter会失效,原因是在vue2.0里 管道符|只能用在mousetachev-bind中。
  • v-show 控制显示隐藏。

    控制显示隐藏。dom是存在的。仅仅加display block: display none

  • v-if 控制显示隐藏

    控制显示隐藏。如果dom不显示,整个dom则没有不存在。

  • v-model 双向数据绑定

    主要在表单中使用,比如文本框,下拉框,单选,复选,textarea
    v-model是一个双向的功能。文本框输入以后,模型也会发生改变。反之模型改变了文本框也会改变。

  • v-bind 绑定属性

    给一个dom元素添加属性 v-bind:class=”” 等价于 :class=”“
    绑定属性。给一个dom元素添加属性。【比如:在做图片的渲染过程中,如果图片的src地址是动态的,那么就需要v-bind去绑定src属性,去给这个src赋值。】。凡是样式变化的可用v-bind动态去操作class 【不要在原生的class里面去使用{{}}改变class
    v-bind添加class属性,属性值只能为objarr

    • 不同的绑定方式:

        v-bind:class="{ }"; //绑定 class 时 “”中是{} 或者 []
        v-bind:src="";
      
  • v-on 事件绑定

    • 【v-on:同等于@】 比如:@click="" 同等于v-on:click=""是支持表达式的(一元表达式、三元表达式)
  • component 组件

    在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。


(四)、语法对比

  • 循环遍历:

      (1)js:obj.forEach(function(value,index){});
      (2)jQuery:$.each(function(index,value){});
      (3)vue2.0:<i v-for="(value,index) in arr"></i>
    
  • es6的箭头函数的this指向外部,里面用 this调用外部的变量和方法。
  • jsslicesplice的差别:
    都是截取数组,slice重新创建一个数组,splice在原先是数组的基础上

(五)、语法技巧

  • 自动计算: v-model="item.b" 直接可以{{item.a*item.b}}
  • toFixed有精度缺失(四舍五入),所以价格一般有后台传入
  • 这个{{}}花括号 页面刚出来的时候 会出现~~ 这个怎么去掉呢?
    • 在整个控制模块上加 v-cloak 例如: <div id="app" v-cloak></div>
  • data中没有需要使用的数据使,使用set注册。

    vue.set(object, key, value)全局注册
    this.$set(object, key, value)局部注册

  • 数据中是否存在某一属性,可以用此方法,typeof item.checked==‘undefined’

    • 如果不存在可以全局注册一个Vue.set(item,"checked",true);
      或者局部注册一个this.$set(item,"checked",true)
  • vue里面,全局的Vue.set和局部的$.set什么区别?
    • 全局的set就是在data里面创建,$.set可以在遍历item里面创建
  • 删除: 通过indexOf获取索引,var index = this.productList.indexOf(this.curProduct);
    然后 splice(index,1)从当前位置开始删除一个元素
  • 对于文本框这样的值,是通过v-model绑定的,v-model具有双向数据绑定功能,通过+改变数量,那么文本框的值会相应的去发生变化
    但是变量{{ }}是不会实时改变的
  • 表达式使用data变量不要加thisv-for 循环可以控制循环的数量
  • computed,filters区别是什么?什么时候使用computed,什么时候使用filters
    • 我个人理解:computed是主要对数据进行实时操作,比如删除,插入等。 而filters主要是格式化数据。
  • _this 的使用 _this.addRess=res.result; 什么时候应该用_thisthis
    • this,在vue实例中指向vue的实例,var vm = new Vue(){}中的 this 指向 vm;而在 forEach() 函数中 this 的指向发生了改变,不再指向vue实例,所以在使用 forEach() 这个函数之外,先用 _this = this 储存vue实例。不会改变this指向,用this,会改变this指向,例如 forEach(),外部储存this然后在内部用 _this
  • 凡是在指令里面(在页面视图里面)一定不要使用this,因为当前的指令的作用域已经是th``is了,直接操作即可。若再去加this作用域就发生变化了,故this就无法取得当前变量了。只有在Vue的实例的过程中函数里面去使用this,此时的this就是当前的Vue实例data里面的变量。

(六)、插件使用注意

  • 和后台数据交互用vue-resource,但是已经不被官方推荐,推荐使用axios作为ajax请求库
  • vue-resoure插件主要用于数据交互 方面
    this.$http.get("请求 地址",{请求参数}).then(function(res)){ 取数据 });
  • 函数内部this指向改变了,使用vue resource方法之前要定义一个内部变量_this保存this

  • this.$http.{请求方式}('请求地址'{请求的数据}).then(function (res){})
    返回的数据并不是真正的数据 ,而是由vue封装的,全部包括 bodyheader等 通常数据被包装在了res.body里面
    【最好打开浏览器调试看看,我的测试时数据在 res.data里面】

(七)、调试和其他

  • 谷歌浏览器中command + option + i打开审查元素
  • 单页面用:vue-router;项目足够复杂用:vuex;构建系统用:build
  • webstormes6语法报错,解决方法:

    • 打开 Settings => Languages & Frameworks => Javascript
      Javascript Language version 改为 ECMAScript 6

(八)、常见业务总结

  • 对于v-for循环的 类似卡片的选中效果
    可以配合 v-bind@click使用,巧妙运用下标index,如:

    <li v-for="(address, index) in filterAddress" v-bind:class="{'check':index == curentIndex}" @click="curentIndex = index">

  • 固定UI业务选中效果
    配合 v-bind@click 然后设置一个固定值在``@click`中改变,如:

       <div class="shipping-method-wrap">
         <div class="shipping-method">
           <ul>
             <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">
               <div class="name" >标准配送</div>
               <div class="price">Free</div>
             </li>
             <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">
               <div class="name" >高级配送</div>
               <div class="price">180</div>
             </li>
           </ul>
         </div>
       </div>
    
  • 常见错误



如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏博主

上一篇 WebStorm 注册码

请科学上网看评论 😂

Enjoy music ?
Search
    Content