Vue新手学习笔记:基础知识点整理及示例

作为一个刚毕业的应届生,实话我自学能力不好,因此我选择写文章将我的学习过程,感悟记录下来,慢慢改进提高自学能力。

学习Vue的一些基本语法

MVC和MVVM的关系图解:

官方手册:

https://cn.vuejs.org/v2/guide/

不管学什么,起码要知道自学将要学习的东西是什么,以及一些基本的语法。

在vue的官网上学习语法,同时可以在官方提供的平台上做简单的代码编写,验证。

之前直接去看脚手架视频跟着做,结果一头蒙,又倒回来看基础视频了。。。

顺手贴下手敲的代码链接:

https://github.com/836369078/vue-base/tree/master

html部分

  1. {{ xxx }} 插值表达式:存在闪烁问题,但不会覆盖元素中原本的内容
  2. v-cloak:解决插值表达式闪烁的问题
  3. v-text:没有闪烁问题且覆盖元素中原本的内容,内容当作字符串显示
  4. v-html:没有闪烁问题且覆盖元素中原本的内容,内容当作html显示
  5. v-bind:Vue提供的属性绑定机制  缩写是 :
  6. v-on: Vue提供的事件绑定机制  缩写是 @
  7. v-model:可以实现表单元素和 Model 中数据的双向绑定,只能运用再表单元素中

js部分

  1. new Vue({ }):创建一个Vue实例
  2. el : '  '  :绑定Vue的使用范围DOM
  3. data : {  } :展示的数据
  4. methods : {  } :调用的方法
  5. this:如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名  或  this.方法名来进行访问,这里的this,就表示 我们 new 出来的 VM 实例对象
  6. filters : {  }:定义私有过滤器

事件修饰符:

  1. .stop:阻止冒泡

  2. .prevent:阻止默认行为

  3. .capture:给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发

  4. .self:实现只有点击当前元素时候,才会触发事件处理函数

  5. .once:只触发一次事件处理函数

按键修饰符:

//自定义按键符
把码值为 113 赋给F2键
Vue.config.keyCodes.f2 = 113;
//F2 键抬起时调用add方法
<input type="text" class="form-control" v-model="name" @keyup.f2="add">

还有些Vue内置的比如:

PS:必须焦点在对应的 div 上按键修饰符才会触发

js 里面的键盘事件对应的键码

在Vue中使用class,style样式:

  1. 直接传递一个数组,这里的class需要使用v-bind做数据绑定::class="['thin','italic']

  2. 在数组中使用三元表达式::class="['thin', 'italic', flag?'active':'']

  3. 在数组中使用对象代替三元表达式,提高代码可读性::class="['thin', 'italic', {'active':flag}]

  4. 在为class使用v-bind绑定对象的属性是类名,属性的值是个标识符::class="{red:true, thin:true, italic:false, active:false}"

  5. 在style中上面的方式同样可以使用,在style中同时使用多个对象的属性,如下最后一个例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<style>
  .red{
    color: red;
  }
  .thin{
    font-weight: 200;
  }
  .italic{
    font-style: italic;
  }
  .active{
    letter-spacing: 0.5em;
  }
</style>
<body>
  <div id="app">

    <!-- 第一种使用方式,直接传递一个数组,这里的class需要使用v-bind做数据绑定 -->
    <h1 :class="['thin','italic']">
      这是个很大很大的H1
    </h1>

    <!-- 在数组中使用三元表达式 -->
    <h1 :class="['thin', 'italic', flag?'active':'']">
      这是个很大很大的H1
    </h1>

    <!-- 在数组中使用对象代替三元表达式,提高代码可读性 -->
    <h1 :class="['thin', 'italic', {'active':flag}]">
      这是个很大很大的H1
    </h1>

    <!-- 在为class使用v-bind绑定对象的属性是类名,由于对象的属性可带引号也可不带引号,所以这里没写引号,属性的值是个标识符 -->
    <h1 :class="classObj">
      这是个很大很大的H1
    </h1>

    <!-- 同时使用多个对象的属性 -->
    <h1 :style="[classObj1, classObj2]">
      这是个很大很大的H1
    </h1>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: {red:true, thin:true, italic:false, active:false},
        classObj1: {'font-weight': 200},
        classObj2: {color : 'red'}
      },
      methods: {
        
      },
    })
  </script>  
</body>
</html>

Vue指令值v-for:

  1. 迭代数组:<p v-for="(item, i) in list">{{ i }}----{{ item }}</p>
  2. 迭代对象数组,i 为索引:<p v-for="(item, i) in list">{{ i }}----{{ item.id }}----{{ item.name }}</p>
  3. 循环对象属性,将属性打印,i 为索引:<p v-for="(value, key, i) in user">{{ key }}----{{ value }}----{{ i }}</p>
  4. 迭代数字,注意:如果使用v-for迭代数字的话,count从 1 开始:<p v-for="count in 10">这是第 {{ count }} 次循环</p>

v-if:每次都会重新删除活创建元素,有较高的切换性能消耗

v-show:每次不会重新进行DOM的删除和创建操作,只会切换元素的 display:none样式,有较高的初始渲染消耗

          

Vue中一些方法:

  1. this.list.some((item, i)=>{     }):循环数组,当 return true 时,循环被终止,item为循环的项,i 为索引

  2. this.list.forEach((item, i)=> {     }):循环数组,无法通过 return 来终止,item为循环的项,i 为索引

  3. this.list.filter((item, i)=> {     }):循环数组,return 不终止循环,而是将 return 回来的值组成一个数组,item为循环的项,i 为索引

  4. this.list.splice(i, j):移除数组中的元素,从数组中索引为 i 的开始,移除 j 个

  5. item.indexOf(name) == -1:值为 name 再 item 中第一次出现的索引,如果没找到则返回 -1 ,常用于判断字符串包含关系

  6. item.includes(name) == true:判断 item 中是否包含 name ,包含返回 true,不包含返回 false

  7. month.padStart(maxLength, str):maxLength是指最长长度,str为字符串,指当前值如果长度没达到最长长度,则会在month 前面用 str 来补充,注意,month 只能为字符串,为数字之类的会报错,可以用 toString() 方法转为字符串

  8. month.padEnd(maxLength, str):maxLength是指最长长度,str为字符串,指当前值如果长度没达到最长长度,则会在month 后面用 str 来补充,注意,month 只能为字符串,为数字之类的会报错,可以用 toString() 方法转为字符串

过滤器:

Vue允许自定义的过滤器,过滤器被分为公有过滤器和私有过滤器可被用于一些常见文本的格式化,过滤器可以被用在两个地方:mastache 插值表达式( {{   }} )和 v-bind 表达式

filters 中定义的为私有过滤器,当私有过滤器与公共过滤器同时存在且名字相同时,有先调用私有过滤器

PS:过滤器的第一个参数永远是管道符( | )前面的值,且可以多个过滤器同时使用

function 方法的参数可以通过设置默认值,避免传值为空

使用 ` (Tab键上面的那个键)把值包起来,再通过${ }赋值,可以使代码看的更加清晰

过滤器要放在 var vm = new Vue({  })前面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ msg | msgFilter('疯狂') | testFilter }}</p>
  </div>

  <div id="app2">
    <p>{{ msg | msgFilter('疯狂~~~') }}</p>
  </div>

  <script>
    //公有过滤器
    //定义一个 Vue 全局过滤器,名字叫 msgFilter
    //过滤器的第一个参数永远是管道符 | 前面的值
    Vue.filter('msgFilter',function(msg,arg){
      //字符串 replace 方法,第一个参数可以写字符串,还能写正则
      return msg.replace(/单纯/g,arg);
    })

    Vue.filter('testFilter',function(msg, str ="aaa"){
      return `${msg}=================${str}`;
    })

    var vm = new Vue ({
      el: '#app',
      data: {
        msg: '曾经我也是一个单纯的男孩,单纯的我,傻傻的问,谁是这个世界上最单纯的男人',
      },
      methods: {
        
      },
    })

    var vm2 = new Vue ({
      el: '#app2',
      data: {
        msg: '曾经我也是一个单纯的男孩,单纯的我,傻傻的问,谁是这个世界上最单纯的男人',
      },
      methods: {
        
      },
      filters: {
        //私有过滤器
        msgFilter: function(msg,arg) {
          //字符串 replace 方法,第一个参数可以写字符串,还能写正则
          return msg.replace(/单纯/g,arg);
        }
      }
    })
  </script>
</body>
</html>

自定义指令:

公有定义:

    HTML
    <input type="text" class="form-control" v-model="keyword" v-focus v-color="'blue'" >

    JS
    //使用 Vue.directive 定义全局指令 v-focus
    //其中:参数1:指令 的名称,注意,在定义的时候,指令的名称前面不要加 v- 前缀
    //但是:在调用的时候,必须在指令名称前加上 v- 前缀来进行调用
    //参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数在特定的阶段,执行特定的函数
    Vue.directive('focus', {
       //每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
       bind: function (el) {
           //注意在每个函数中,第一个参数永远时el,表示被绑定了指令的那个函数,这个 el 参数时原生的 js 对象
           //在元素刚绑定了指令的时候,还没有插入到 DOM 中去,这时候调用 focus 方法没有作用
           //因为一个元素,只有插入 DOM 之后,才能获取焦点
           // el.focus()
        },

       // inserted 表示元素插入到 DOM 中的时候会执行的函数,只执行一次
       inserted: function (el) {
          el.focus()
       },

       //当VNode更新的时候,会执行函数,可能会触发多次
       updated: function (el) {

       }
    })


    Vue.directive ('color', {
      //样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定又了一个内联样式
      //将来元素肯定会显示到页面中,这时候,浏览器渲染引擎必然会解析样式,应用给这个元素
      //和样式相关的操作,一般都可以在 bind 中执行
      bind: function(el, binding) {
        el.style.color = binding.value
      },

      inserted: function (el) {

      },

      updated: function (el) {

      }
    })

私有定义:

    var vm2 = new Vue ({
      el: '#app2',
      data: {
        // dt: new Date(),
      },
      directives: {
        'fontweight': {
          bind: function(el, binding) {
            el.style.fontWeight = binding.value,
          }
        }
      },  
    })

如果说函数只打算在 bind 和 update 上,可以进行简写,简写后两个方法上都有函数

    var vm2 = new Vue ({
      el: '#app2',
      data: {
        // dt: new Date(),
      },
      directives: {
        'fontweight' : function(el, binding) {
          el.style.fontWeight = binding.value;
        }
      },  
    })

binding 主要属性:

binding.name:返回参数名

binding.value:返回参数值,如果是算式,会计算,比如:1+1,返回值会为 2

binging.expression:返回参数值的字符串形式,比如:1+1,返回值为 1+1

Vue的生命周期函数:

测试用代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <h3 id="h3">{{ msg }}</h3>
    <input type="button" value="修改msg" @click="msg='No'" >
  </div>

  <script>
    var  vm = new Vue({
      el : '#app',
      data : {
        msg: 'ok',
      },
      methods: {
        show () {
          console.log('执行了show方法')
        }
      },  
      //初始化阶段
      beforeCreate() {
        //生命周期函数,表示实例完全创建出来之前,执行函数
        //注意:在beforeCreate声明周期函数执行的时候,data 和 methods中的数据都没初始化
        // console.log(this.msg);
        // this.show();
      },
      created() {
        //生命周期函数,在 create 中,data 和 methods中的数据都初始化好了
        //如果要使用 data 和 methods 最早只能在 create 中
        // console.log(this.msg);
        // this.show();
      },
      beforeMount() {
        //生命周期函数,表示模板已经在内存中编译完成,但是尚未把模板渲染到页面中
        //在beforMount执行的时候,页面中的元素还没被真正替换,只是之前写的模板字符串
        // console.log(document.getElementById('h3').innerHTML);
      },
      mounted() {
        //生命周期函数,表示内存中的模板已经真实的挂载到页面中,用户已经能看到渲染好的页面了
        //注意:mounted是实例创建期间的最后一个生命周期函数,表示实例已经被完全创建好了
        //此时如果没有其他操作,这个实例就静静的躺在我们的内存中,一动不动
        //如果要通过某些插件操作页面上的 DOM 节点,最早要在 mountrd 中进行
        //只要执行完了 mounted 就表示整个 Vue 实例被初始化完毕,此时组件已经脱离了创建阶段,到了运行阶段
        // console.log(document.getElementById('h3').innerHTML);
      },

      //运行阶段
      beforeUpdate() {
        //生命周期函数,表示我们的界面还没被更新,但是数据已经被更新
        //当执行 beforeUpdate 的时候,页面数据还是旧的,但是 data 中的数据是最新的,页面尚未和最新数据同步
        // console.log("界面内容:" + document.getElementById('h3').innerHTML);
        // console.log("data中的数据:" + this.msg);
      },
      updated() {
        //生命周期函数,updated事件执行的时候,表示页面和data数据已经保持同步了
        console.log("界面内容:" + document.getElementById('h3').innerHTML);
        console.log("data中的数据:" + this.msg);
      },
    })
  </script>
</body>
</html>

重要:vue-resource 实现 get,post,Jsonp 请求:

除了 vue-resource 还有 `axios` 的第三方包实现数据请求

  1. 官方文档:https://github.com/pagekit/vue-resource
  2. 常见的数据请求类型?  get  post jsonp
  3. 测试的URL请求资源地址:(万能测试地址)
        get请求地址: http://jsonplaceholder.typicode.com/users
        post请求地址:http://jsonplaceholder.typicode.com/users
        jsonp请求地址(主要用于跨域请求):http://jsonplaceholder.typicode.com/users
        可以参考官方文档 HTTP Requests/Response 中的说明
  4. Vue.http.options.root:使用全局变量配置根路径
    注意:如果用全局配置启用了根域名,则每次用 http 请求时, url 路径应该为相对路径,前面不能带 / ,如果带了则不会启用根路径拼接,两种方法可以在 getGetInfo() 方法中进行对比,官方文档的 Configuration 中有说明
  5. Vue.http.options.emulateJSON:使用全局变量配置请求发送格式
    可以在 getPostInfo() 方法中进行对比
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-resource-1.3.4.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="get请求" @click="getGetInfo">
    <input type="button" value="post请求" @click="getPostInfo">
    <input type="button" value="Jsonp请求" @click="getJsonpInfo">
  </div>

  <script>
    //如果用全局配置启用了根域名,则每次用 http 请求时, url 路径应该为相对路径
    //前面不能带 / ,如果带了则不会启用根路径拼接
    Vue.http.options.root = 'http://jsonplaceholder.typicode.com/';
    Vue.http.options.emulateJSON = true;
    var vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        //发起 get 请求
        getGetInfo() {
          // this.$http.get('http://jsonplaceholder.typicode.com/users').then(function (result) {
          //   //通过 result.body 拿到 http 请求
          //   console.log(result.body);
          // })
          this.$http.get('users').then(function (result) {
            //通过 result.body 拿到 http 请求
            console.log(result.body);
          })
        },
        //发起 post 请求
        //通过 post 第三个参数设置提交类型为普通表单格式
        getPostInfo() {
          //第一个参数 url ,第二个参数事要传递的数据, 第三个参数是发送的格式
          // this.$http.post('users', {}, { emulateJSON: true }).then(result => {
          //   console.log(result.body)
          // })
          this.$http.post('users', {}).then(result => {
            console.log(result.body)
          })
        },
        //发起 Jsonp 请求
        getJsonpInfo() {
          this.$http.post('users').then(result => {
            console.log(result.body)
          })
        }
      },
    })
  </script>
</body>

</html>

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页