当前位置： 首页 > news >正文

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

news 来源：原创 2024/5/3 17:54:28

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

学习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>

 

相关文章：

  • IDEA搭建SpringBoot项目，以及结合 Restful 风格进行编码
  • docker 命令
  • Dockerfile 简单例子
  • RESTful接口开发规范以及注意事项
  • docker 部署springBoot项目
  • kubernetes yaml文件解析
  • 代码重构规划
  • Vue新手学习笔记：vue-cli框架
  • Windows7+Windows10原版镜像集合
  • linux 安装 maven
  • Gitlab external_url 路径问题及解决方案
  • Gitlab 之 结合 Docker 持续集成
  • Vue 新手学习笔记：动画效果
  • Gitlab 之 命令行提交代码到 git
  • Ant 安装，配置文件编写与使用
  • ----------
  • CSS 提示工具(Tooltip)
  • Fundebug计费标准解释：事件数是如何定义的？
  • HTML中设置input等文本框为不可操作
  • laravel 用artisan创建自己的模板
  • Terraform入门 - 3. 变更基础设施
  • Transformer-XL: Unleashing the Potential of Attention Models
  • Vue全家桶实现一个Web App
  • vue自定义指令实现v-tap插件
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 分布式熔断降级平台aegis
  • 诡异！React stopPropagation失灵
  • 精彩代码 vue.js
  • 容器服务kubernetes弹性伸缩高级用法
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 如何正确配置 Ubuntu 14.04 服务器？
  • 手机app有了短信验证码还有没必要有图片验证码？
  • 微信小程序设置上一页数据
  • 用element的upload组件实现多图片上传和压缩
  • 正则学习笔记
  • 翻译 | The Principles of OOD 面向对象设计原则
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • 如何在招聘中考核.NET架构师
  • #include到底该写在哪
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • （二）斐波那契Fabonacci函数
  • （九十四）函数和二维数组
  • （每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理 第13章 项目资源管理（七）
  • （四）搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (转)Groupon前传：从10个月的失败作品修改，1个月找到成功
  • .bat批处理（五）：遍历指定目录下资源文件并更新
  • .Net core 6.0 升8.0
  • .NET delegate 委托 、 Event 事件,接口回调
  • @ConditionalOnProperty注解使用说明
  • @PreAuthorize注解
  • @取消转义
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛（白虎组）
  • [BZOJ] 2427: [HAOI2010]软件安装
  • [C/C++]_[初级]_[关于编译时出现有符号-无符号不匹配的警告-sizeof使用注意事项]
  • [C++]指针与结构体