vue相关笔记

最新推荐文章于 2022-07-19 16:35:57 发布
最新推荐文章于 2022-07-19 16:35:57 发布
阅读量76 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52682005/article/details/122335327
版权

面试问题

如何依次发送promise请求?

Vue2

什么vue

vue是一款用于构建用户界面的渐进式js框架
vue可以自底向上逐层的应用
简单应用:秩序一个轻量小巧的核心库
复杂应用:可以引入各式各样的Vue插件

vue特点

1.组件化模块 提高代码复用率/让代码更好维护
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率
3.虚拟DOM,diff算法

vue Api

Cookbook

Awesome Vue

官方整理的比较有用的包

初识vue

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识Vue</title>
  <script src="vue.js"></script>
</head>

<body>
  <!-- 
    初识vue
    1.想让vue工作,必须创建一个vue实例,且要传入一个配置对象
    2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
    3.root容器里的代码被称为vue模板

   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>
      hello {{name}}
    </h1>
    <h1>
      我的年龄是:{{age}}
    </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    // 创建Vue实例
    new Vue({
      el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
      data: { // data中用于存储数据,数据供el指定的容器去使用,值暂时写成一个对象
        name: 'world1111',
        age: '18',
      }
    })
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识Vue</title>
  <script src="vue.js"></script>
</head>

<body>
  <!-- 
    初识vue
    1.想让vue工作,必须创建一个vue实例,且要传入一个配置对象
    2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
    3.root容器里的代码被称为vue模板
    4.vue实例和容器是一一对应的
    5.真实开发中只有一个vue实例,并且会配合组件一起使用
    6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
    7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
    注意区分:js表达式和hs代码(语句)
          1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
            (1).a
            (2).a+b
            (3).demo(1)
            (4).x===y?'a':'b'
          2.js代码(语句)
            (1).if(){}
            (2).for(){}


   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>
      hello {{name.toUpperCase()}}
    </h1>
    <h1>
      我的年龄是:{{age}}
    </h1>
  </div>
  <div id="root">
    <h1>
      hello {{name.toUpperCase()}}
    </h1>
    <h1>
      我的年龄是:{{age}}
    </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    // 创建Vue实例
    new Vue({
      el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
      data: { // data中用于存储数据,数据供el指定的容器去使用,值暂时写成一个对象
        name: 'world1111',
        age: '18',
      }
    })
    new Vue({
      el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
      data: { // data中用于存储数据,数据供el指定的容器去使用,值暂时写成一个对象
        name: 'world1111',
        age: '18',
      }
    })
  </script>
</body>

</html>

模板语法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识Vue</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    vue模板语法有2大类
    1.插值语法
        功能:用于解析标签体内容
        写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
    2.指令语法
      功能:用于解构标签(包括:标签属性,标签体内容,绑定事件...)
      举例:v-bind:href='xxx'或简写为 :href='xxx',xxx同样要写js表达式
      且可以直接读取到data中的所有属性
      备注:vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子

   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好, {{name}} </h3>
    <hr />
    <h1>指令语法</h1>
    <a v-bind:href="school.url">点击跳转 {{school.name}} </a>
    <a :href="school.url">点击跳转</a>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        name: 'jack',
        school: {
          name: 'xx',
          url: 'http://www.baidu.com',

        }
      }
    })
  </script>
</body>

</html>

数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识Vue</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    Vue中有两种数据绑定的方式
    1.单向绑定(v-bind):数据只能从data流向页面
    2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
        备注
        1 双向绑定一般都应用在表单类元素上(如:input,select这类拥有value值的)
        2 v-model:value可以简写成v-model,因为v-model默认收集的就是value值
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <!-- 普通写法 -->
    单项数据绑定: <input type="text" v-bind:value='name'>
    双项数据绑定: <input type="text" v-model:value='name'>
    <!-- 简写 -->
    单项数据绑定: <input type="text" :value='name'>
    双项数据绑定: <input type="text" v-model='name'>
    <!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 -->
    <!-- <h2 v-model:x='name'>你好啊</h2> -->
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        name: '123'
      }
    })
  </script>
</body>

</html>

el和data的两种写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    data与el的2种写法
    1.el有两种写法
    (1)new Vue时候配置el属性
    (2) 先创建Vue实例,随后在通过vm.$mount('#root')指定el的值
    2.data有2种写法
    a 对象式
    b 函数式
      如何选择:目前那种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
    3.一个重要原则
          由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了

   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>你好, {{name}} </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    // el的两种写法
    // const v = new Vue({
    //   // el: '#root',//第一种写法
    //   data: {
    //     name: '城市'
    //   }
    // })
    // console.log(v);
    // v.$mount('#root')//第二种写法 挂载

    // data的两种写法
    new Vue({
      el: '#root',
      // data的第一种写法:对象式
      // data: {
      //   name: '是在'
      // }
      // 第二种写法 函数式
      // data: function () {
      data() { //简写
        console.log('this', this) // 此处的this是vue实例对象
        return {
          name: 'sss'
        }
      }
    })
  </script>
</body>

</html>

Vue中的MVVM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
MVVM模型
a M:模型(model):data中的数据
b V:视图(View):模板代码
c VM:视图模型(ViewModel):Vue实例
观察发现
      a data中所有的属性,最后都出现在了vm身上
      b vm身上所有的属性及Vue原型上所有属性,在Vue模型中都可以直接使用

   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>学校名称: {{name}} </h1>
    <h1>学校地址: {{address}} </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    const vm = new Vue({
      // el: '#root',
      data: {
        name: 'xxxxx',
        address: 'xxxx'
      }
    })
    vm.$mount('#root')
  </script>
</body>

</html>

回顾Object.defineProperty方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript">
    let number = 18
    let person = {
      name: 'zs',
      sex: 'man'
    }
    Object.defineProperty(person, 'age', {
      // value: 18,
      // enumerable: true, //控制属性是否可以枚举,默认值为false
      // writable: true, //控制属性是否可以被删除,默认值为false
      // configurable: true, //控制属性是否可以被删除,默认值是false
      // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
      // get: function () {
      get() {
        console.log('触发了');
        return number;
      },
      // 当有人修改person的age属性时,set函数(setter)就会被调用,且会受到修改的具体指

      set(value) {
        console.log('有人修改了age属性,且值时', value);
        number = value;
      }

    })
    console.log(Object.keys(person));
  </script>
</body>

</html>

何为数据代理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) -->
  <script type="text/javascript">
    let obj1 = {
      x: 100
    }
    let obj2 = {
      y: 200
    }
    Object.defineProperty(obj2, 'x', {
      get() {
        return obj1.x
      },
      set(value) {
        obj1.x = value
      }
    })
  </script>
</body>

</html>

Vue中的数据代理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    a Vue中的数据代理
        通过Vm对象来代理data对象中属性的操作(读/写)
    b Vue中数据代理的好处
        更加方便的操作data中的数据
    c 基本原理
          通过Object.defineProperty()把data对象中所有属性添加到VM上
          为每一个添加到Vm上的属性,都指定一个getter/setter
          在getter/setter内部去操作(读/写)data中对应的属性
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>学校名称: {{name}} </h2>
    <h2>学校地址: {{address}} </h2>

  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    let data = {
      name: 'sgg',
      address: 'hfkjy'
    }
    const vm = new Vue({
      el: '#root',
      data
    })
    // vm._data=options.data=data
  </script>
</body>

</html>

力扣每日一题

a res为啥*10?为了去比x大一位
b ~~啥意思?~运算符的本质是取反，在js中是一个针对32位的操作。

~x会先把x转成32位的整数，如果x是number类型的数据，则直接进行转换，否则先转换成32位整数，如果转换失败，则x变成NaN，~NaN会变成-1.这里的转换不是单纯地使用parseInt进行转换，而是类似于js的隐式转换，比如true等于1，false等于0，例如~true会等于-2，这说明true被转换成了1而不是NaN.
~的本质运算为（假设是8位）：1=》00000001那么~1=>11111110=-2.(-2的表示为100000010=》11111101+1=11111110)，我们知道x和~x相加等于-1.因为相加后等于11111111（10000001=》11111110+1=11111111），也就是-1。
最后~的其中一个用处是~~doubleNumber等于整数，也就是说~~可以用于取整。~对浮点型进行了截断。用0|x也是可以的。

简单的说就是类似于!!这种的两次取反,不同的是这边是用来取整

c 在运行中判断是否符合条件,如果符合返回0
d x除10是让x每次都小一位
e Math.pow(底数,几次方)

var reverse = function(x) {
let res=0;
while(x){
    res=res*10+x%10;
    if(res>Math.pow(2,31)-1||res<Math.pow(-2,31))return 0;
    x=~~(x/10)
}
return res;
};

a parseInt:取整,去首位0
b split:将数字分为字符串数组
c join:将字符串数组拼串
d 判断是否为负数 如果为负 取负
e 判断是否在范围内

/**

  • @param {number} x
  • @return {number}
    */
    var reverse = function(x) {
    let res=parseInt(x.toString().split(’’).reverse().join(’’));
    if(x<0){
    res=-res;
    }
    return res>Math.pow(2,31)-1||res<Math.pow(-2,31)?0:res;
    };
七日七长生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue相关笔记vuex等等
10-10
VUE相关技术笔记,包含vue 简介.VUEX.Mysql.vue-router.webpack.babel,以及后台前端数据库关联等
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
去除多余的0；正则表达式：去掉数字（整数、小数）前面多余的零
i_am_a_div的博客
10-21 4411
方案1： 来源：http://zhidao.baidu.com/question/277893180.html 如果是整数：去掉整数前的零 例如：0098765--->98765 如果是小数：去掉小数前的零 例如：000.333--->0.333 再例如000.00--->0.00 <input onblur="b=this.value;b=(b+'').replace(/^0+\./g,'0.');b.match(/^0+[1-9]+/)?b=b.replace(/
vue中限制input输入框第一位数字不能以0开始
蓝天⊙白云的博客
07-12 3161
vue中限制input输入框第一位数字不能以0开始。
elementui el-input组件限制只能输入数字且小数点为3位、只有一位小数点、0开头后面不是小数点则以数字替换、自动补全
DarlingYL的博客
07-19 3737
elementui el-input组件限制只能输入数字且小数点为3位、只有一位小数点、0开头后面不是小数点则以数字替换、自动补全
input输入框第一位如果是0 在失去焦点的时候把第一位去除
xiaoleiv9的博客
07-11 942
直接上代码 带上注释自己看吧
尚硅谷vue课程笔记整理
05-30
尚硅谷vue课程笔记整理
vue学习笔记
11-22
vue学习笔记，刚开始学习vue，接触了一些基础，整理一下。
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
v-model.number的坑,自动清除小数点后的0
qq_45838276的博客
02-15 4051
<el-input v-model.number="NumberA" type="number"></el-input> 注意：如果该input框输入的是0.01，则最终所绑定的NumberA为0，v-model.number会将0.0后面自动清除，然后会把该数据改为0；
v-model指令的修饰符——v-model.number-数字类型 & v-model.trim-过滤首尾空白 & v-model.lazy-失去焦点更新
热门推荐
weixin_44867717的博客
10-21 2万+
v-model指令的修饰符——v-model.number-数字类型 & v-model.trim-过滤首尾空白 & v-model.lazy-失去焦点更新 1、v-model.number-数字类型 使用修饰符.number可以将输入的数据转换为Number类型，否则虽然你输入的是数字.但它的类型其实是String，比如在数字输入框时非常有用： .number如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： 这通常很有用，因为即使在 type="n
去除 字符串前的0
枫叶
07-06 1070
/**     * 削除0     * @param targetObject 削除対象     * @return 削除0後対象     */    private String _replaceZero(String targetObject) {
input只允许输入正整数，第一位是0自动删除
weixin_38152494的博客
12-12 2400
$(document).on('input','input',function(){ let val = $(this).val(); //只能输入数字 val = val.replace(/\D/g, ""); //输入大于0的数字时候自动清空前面的0 if (val > 0) { ...
三种方法去除数字前0
weixin_42506340的博客
07-28 2877
三种方法去除数字前0 ‘00000010’.lstrip(‘0’) ‘10’ str(int(‘0000010’)) ‘10’ s = ‘000010’ s[:-1].lstrip(‘0’) + s[-1]
vue自定义指令-对输入框数字的限制，输入框的数字前面不能输入多余的0，例如00123， 00.12类型的数字
D321xiaoding的博客
03-25 2257
限制数字前面不能输入多余的0，例如00123 00.12 import Vue from 'vue' Vue.directive('number', { bind(el) { el.onkeyup = () => { if (el.value) { if (parseInt(el.value) == parseFloat(el.value) && !el.value.includes('.')) { if (paeseI
js去除数字前的0
马旭的专栏
07-24 2万+
var num = '01'; alert(~~num); z 这里(~~str)就能去处数字前面的0；
尚硅谷 vue2 笔记
最新发布
06-20
### 回答1： 尚硅谷的Vue2笔记是学习Vue技术的好帮手。这份笔记详细地介绍了Vue的基本概念和使用方法，包括Vue的属性、指令、事件、计算属性、过滤器、组件等等。通过阅读这份笔记，我们可以了解Vue的整个生命周期，并且学习如何在Vue中绑定数据、响应事件、使用组件化等等。另外，笔记中也提到了Vue的MVVM模式、路由、状态管理、Ajax等进阶使用方法，以及Vue的一些注意点和优化技巧，这些非常实用且有助于深入学习和应用Vue技术。 总体来说，尚硅谷的Vue2笔记内容丰富、清晰易懂，适合初学者和中级开发者使用，是学习Vue技术的一份不错资料。需要注意的是，笔记中的代码及部分内容可能存在过时和不准确的情况，需要和Vue官方文档及其他权威资料进行比较和验证。 ### 回答2： 尚硅谷的Vue2笔记是一份非常全面和深入的Vue学习资料，它涵盖了Vue框架的基本概念和重要特性，包括Vue的组件化开发、指令、路由、Vuex状态管理、axios网络请求等。该笔记不仅注重理论知识的讲解，而且注重实战应用。它提供了大量的示例代码和练习项目，帮助学习者理解和掌握Vue的核心概念和技术。 在Vue2笔记中，作者从Vue的基本概念和MVVM架构模式开始讲解，然后逐步深入介绍了Vue的各种特性和用法，如组件、生命周期、计算属性、watch、事件处理、槽位、指令等等。特别是在组件化开发方面，作者详细介绍了组件之间的通信方式、props和$emit的使用、slot插槽的应用等等，这些都是Vue组件化开发中非常重要的概念。 除了组件化开发之外，Vue2笔记还详细介绍了Vue的路由、状态管理和网络请求等其他关键特性。在路由方面，作者讲解了Vue-Router的基本使用和路由守卫的应用，让学习者能够掌握Vue应用的页面导航和权限控制。在状态管理方面，作者讲解了Vuex的设计思想和使用方法，使学习者能够在复杂的应用中更好地管理和共享状态。在网络请求方面，作者介绍了axios库的使用和封装方法，帮助学习者更好地理解Vue应用中的数据请求和展示。 总的来说，尚硅谷Vue2笔记对于学习Vue框架的人来说是一份非常优秀的教材。它详细介绍了Vue的各个方面，并提供了丰富的练习项目，帮助学习者更好地掌握Vue的核心技术和应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值