2024年10月JS位运算符？Vue.js入门教程（三）双向绑定和数据渲染
⑴JS位运算符？Vue.js入门教程（三双向绑定和数据渲染
⑵之前对js的一些涉及到二进制的运算符一直似懂非懂，看到了就一脸懵逼，还得去控制台算一下。然后最近看算法的时候又看到了这个运算符，这里就简单介绍一下学习这些位运算符的过程。注意：以下运算均不涉及到小数。
⑶先说这句话是什么意思。左移位是二进制的一种运算，就是在不改变二进制数值位长度的前提下，将每位的数字都向左移动，左边移出去的直接丢弃，右边空出来的位置用填充。无符号就是保持符号位不变，即本来是正数，移位后一样为正数。
⑷首先将转为二进制是.然后对其向左移两位.
⑸得到值为.转换为十进制为.即《《=。
⑹然后我们对以上的运算过程做一个处理，将这些二进制转换为我们熟悉的十进制。
⑺对移位后的算式进行合并项可得到^+^+^=(^+^+^)*^，即^+^+^=(^+^+^)*^=*^。由此我们可得出《《=*^=。我们通过计算几个简单的左移位运算，与标准答案进行比较，验证一下这个结论。
⑻在控制台中以上几个算式的结果为
⑼答案完全一致。说明我们的结论是正确的。当然这个结论仅限于那些二进制移位不会左移移出的数字的简单运算。当我们遇到一些简单的可以口算的左移位运算时就可以使用这个结论快速得到结果，如果对于《《这种较复杂的运算你也用这个结论计算，也没有人会介意。
⑽下面我们看一下负数的左移位运算。以-《《为例。首先，我们先复习一下负数如何转换为二进制。负数转换为二进制的步骤有三：
⑾然后对其向左移两位.
⑿得到值为.然后我们将其转换成十进制。
⒀转换为十进制为-.即-《《=-。
⒁刚刚我们计算-的二进制得到的是。我们在控制台验证一下我们得到的这个二进制。
⒂我们比较一下下面几个算式。
⒃是的没错，进行无符号左移位运算时，当两个数的绝对值相等时，其相同位数的移位的绝对值一定相等。
⒄首先将转换为二进制是。然后对其向右移三位。
⒅得到值为.转换为十进制为.即》》=。
⒆然后我们对以上的运算过程做一个处理，将这些二进制转换为我们熟悉的十进制。
⒇这个规律好像不太好总结？
⒈因为是有符号的运算，所以这里不再适用上一小节说的js的特殊处理。先将-转换为二进制。
⒉即-的二进制形式为，然后对其进行有符号右移位运算
⒊移位后得到的值为，是一个负值，我们将其转成十进制。
⒋我们对此结果进行验证。
⒌可见，我们的运算是完全正确的。
⒍这里我们以》》》为例。
⒎首先将转换为二进制是。然后对其向右移三位。
⒏得到值为.转换为十进制为.即》》=。
⒐因为是有符号的运算，所以这里不再适用上一小节说的js的特殊处理。先将-转换为二进制。
⒑即-的二进制形式为，然后对其进行有符号右移位运算
⒒移位后得到的值为，转成十进制为。是不是超级大。因为是无符号右移位运算，所以在左边空出部分不论正负都会填充.
⒓我们对此结果进行验证。
⒔可见，我们的运算是完全正确的。
⒕注意：因为对负数进行无符号右移位运算时，所得结果很大，所以在使用过程中需要格外注意。
⒖疑问：左移位和右移位根本都是只对位置进行了移动，那么对于x》》k=y和y《《k=x中的x等于x，y等于y吗？
⒗不一定。因为我们不能确保移动过程中被丢弃的值均为。但凡有一个被丢弃，就不会相等。而如果被丢弃的都是，那么x===xy===y。如下图所示。
⒘首先将两个数转换为二进制是和。然后对其进行与运算。
⒙负数的与运算与正数并无区别，不做讨论。
⒚首先将两个数转换为二进制是和。然后对其进行与运算。
⒛负数的与运算与正数并无区别，不做讨论。
首先将两个数转换为二进制是和。然后对其进行与运算。
负数的与运算与正数并无区别，不做讨论。
首先将其转换为二进制是。然后对其进行与运算。
将结果（转换为十进制
这里我们再我看几个例子。
从中我们可以看出，位非操作就是对数字加一，然后取负。我们可以写个简单的判断方法来验证。
位运算符运算结果非常有趣，在平时可以多加应用，但是一定要注意可能产生大数的预算，避免产生不必要的BUG。这篇文章只是做了一个简单的介绍。后面有空了会做一下在实际开发中的应用，虽然我可能很久都遇不到。
JavaScript学习指南：JS入门教程
Vue.js入门教程（三双向绑定和数据渲染
既然清楚了原理，那么，接下来进入正题——我知道了vue怎么安装，那么我怎么使用呢？在告诉你基础用法之前，我还是要先告诉你一个情况。可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css/canvas而不是dom。所谓的双向绑定，你可以理解就是把view。（你还不清楚mvc的话，请看第一章和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。vue是通过解析{{文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。列表输出使用v-for，这些v开头加横杠的叫做命令这些命令是可以自定义的。但是那都属于高级操作，我们不用它也完全足够支撑做一个大型项目了。其实你回发现，这里无论是v-for或者是v-什么其他玩意它都深刻的遵循了es的语法。这里不就是一个典型的forin循环吗。不过我们现在都用forof了。你记住这个用法，它就长这样。前后端分离开发的关键在于：后台只提供接口。我们获得的数据多数情况下，仅仅是一个json，而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解，数据的解析在mvc中，是由后端完成的，而html只负责显示。所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。我们前端最厉害的地方不就是处理能看得见的东西吗？
如果没有html作为基础的，学起来还是有一点难度的，javascript简称js，html这门课程如果入门的话不是很难，刻苦点一月到两月就能搞定，有html基础的话，只要继续刻苦一个月左右js就能入门，但是想学到高深那就不容易了，js入门后在继续学可以说也是有些难度的。总之先掌握html，这是一个基础，正如你说话要先从aoe开始一样，html也很容易学的。
THREEJS使用入门
如何在vue中引入THREEJS步骤一、新建threejs组件，ZeusStage.vue步骤二、调用ZeusStage.vue组件
js入门比较容易，但是要深入学习是比较有难度的。js由于语法一般不严格，所以写起来不容易出现错误，甚至可以很随意。不像其他语音，随意写这报错那报错，输出个“helloworld“都很不容易。但是在深入学习js框架，结合html和css的时候，就会发现要掌握的东西太多了。
Vue.js入门教程（十五：如何创建自己的插件
通常，我们不会去接触vue底层的东西，又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的，其实还是插件。插件，你也可以理解为就是一套方法的集合，当我们需要调用它的时候，引入一下就行了。举个例子，比如说，swiper和elementui。一般来说，我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑，但是，网上能搜到了插件不一定能解决我们所有的问题。也就是说，我们剩下%左右的逻辑部分是需要自己处理的，比如说，转化时间，处理字符串等等。这些东西网上是没有现成插件的，需要我们自己来写。此时，如果你每一个组件里面都去定义方法就显得太low了。我们需要自己写一个插件，事半功倍！一般来说，我们自己的js通常会写成下面的两种形式：第一种，声明多个方法。这个做法也叫函数声明，这样做的好处是，声明到全局，你只要引用了它，在页面任意地方都可以使用。但是同样的缺点也很明显，容易引起全局污染，浪费浏览器资源。而且当我方法多的时候，调用起来很不方便。第二种，这是我们最长使用的声明方式，函数表达式。目的就是加载了这个js以后，当我需要使用的时候，直接调用str.xxx()，就可以返回我需要的内容了。并且，方法封装在变量内部，不会引起全局污染，也符合模块化的规则。ok，ok。我们接下来，就要把我们自己的方法定义到vue上去使用。我首先把js放到了项目文件夹中，然后在main.js中引入。调用起来是完全没有问题的。但是，又好像哪里不太对？是的，这样我们仅仅是引入了一个js，并没有把它形成一个js的插件。我们来看看一个标准的js插件的调用形式：为什么他这个可以直接从this上面调用？？？个人理解他的方法应该是被定义到全局的vue对象上面了，这里的this应该指的就是vue本身！如果你看过龙哥前面的教程，你应该知道，当我们引入的插件，是一个对象的时候，应该使用：use方法，可以把一个符合vue标准的对象加载到vue本体上。首先给我们的main.js下面增加一行。然后打开我们自己的js文件，按照下面的方式书写：最后在页面中调用的时候：到此我们的插件已经跟vue融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！
说实话，不好学，没HTMl基础有点难度，JavaScript简称JS，之前的基础就是HTML，HTML这门课程如果入门的话不是很难，刻苦点一月到两月就能搞定，有HTML基础的话，只要继续刻苦一个月左右JS就能入门，但是想学到高深那就不容易了，js入门后在继续学可以说也是有些难度的。总之先掌握HTML，这是一个基础，正如你说话要先从aoe开始一样，HTML也很容易学的。HTML推荐书籍：《《深入浅出HTML和CSS》》JS推荐书籍：《javascript入门经典》这些书籍可以帮助你怎么学习，其实不止看书，你也可以看看视频，多看视频讲解学习可以让你少走很多弯路，节省不少时间。人就是在不断的问题中解决问题，发现新的问题，继续解决问题，这样自己的自学能力和技术能够得到很大的提升，关键就是不懂一定马上问，千万不要随便拖，这样进步才叫快……还有补充一下，学习重在实践，因为只有实践你才能更好的发现自己的问题，一个问题解决了，一次不记得，下次继续做的时候再手打一次，但是别抄之前自己写过的代码，除非你觉得自己这段代码已经掌握了，这样为了节省时间才抄，否则还是练练手最好,，万变不离其宗——熟能生巧……如果你精通了，那就好办了，一个网站可能就被你开发出来，然后就不愁找不到好工作了，至于你认为学到什么地步算精通，这你自己在学习中就可以感受到自己的能力，说的够多了，一时说不完，就这样,最后祝你成功，嘎嘎嘎嘎……
Vue.JS入门篇--列表渲染
查看一下效果，应该很容易得到结果
有时我们可能需要重复一个包含多个节点的块，这时可以用《template》标签包裹这个块。这里的《template》标签只起到语义上的包裹作用，其本身不会被渲染出来。例如：
简单值(primitivevalue)即字符串、数字、boolean等并非对象的值。对于包含简单值的数组，你可用$value直接访问值:
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给v-repeat指令并用它作为将被迭代项的别名:
Vue.js内部对被观察数组的变异方法(mutatingmethods，包括push(),pop(),shift(),unshift(),splice(),sort()和reverse())进行了拦截，因此调用这些方法也将自动触发视图更新。
下面是一个演示的例子，点击按钮的时候数据项会被移除
Vue.js给被观察数组添加了两个便捷方法：$set()和$remove()。你应该避免直接通过索引来设置数据绑定数组中的元素，比如demo.items={}，因为这些改动是无法被Vue.js侦测到的。你应该使用扩展的$set()方法:
$remove()只是splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时，$remove()将在数组中搜索该值并删除第一个发现的对应元素。
当你使用非变异方法，比如filter(),concat()或slice()，返回的数组将是一个不同的实例。在此情况下，你可以用新数组替换旧的数组:
你可能会认为这将导致整个列表的DOM被销毁并重新渲染。但别担心，Vue.js能够识别一个数组元素是否已有关联的Vue实例，并尽可能地进行有效复用。
在某些情况下，你可能需要以全新的对象（比如API调用所返回的对象去替换数组。如果你的每一个数据对象都有一个唯一的id属性，那么你可以使用track-by特性参数给Vue.js一个提示，这样它就可以复用已有的具有相同id的Vue实例和DOM节点。例如：你的数据是这个样子的
那么你可以像这样给出提示:
在替换items数组时，Vue.js如果碰到一个有_uid:’fd’的新对象，它就会知道可以直接复用有同样_uid的已有实例。在使用全新数据重新渲染大型v-repeat列表时，合理使用track-by能极大地提升性能。
你也可以使用v-repeat遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性$key。对于简单值，你也可以象访问数组中的简单值那样使用$value属性。
在ECMAScript中，对于给对象添加一个新属性，或是从对象中删除一个属性时，没有机制可以检测到这两种情况。针对这个问题，Vue.js中的被观察对象会被添加三个扩展方法:$add(key,value),$set(key,value)和$delete(key)。这些方法可以被用于在添加/删除观察对象的属性时触发对应的视图更新。方法$add和$set的不同之处在于当指定的键已经在对象中存在时$add将提前返回，所以调用obj.$add(key)并不会以undefined覆盖已有的值。
v-repeat也可以接受一个整数。在这种情况下，它将重复显示一个模板多次。下面的例子将迭代次。
有时候我们只需要显示一个数组的过滤或排序过的版本，而不需要实际改变或重置原始数据。Vue提供了两个内置的过滤器来简化此类需求：filterBy和orderBy。
如何正确学习JavaScript
JavaScript作为网站前端的核心知识是非常重要的，但是如何学习JavaScript是很多初学者面对的一个难题，下面我说一下个人对于如何学习JavaScript的一点心得，希望能帮到大家。
首先学习基础，尤其是JavaScript与其他语言不同的基础知识。
学习每个编程语言可能都要从基础的变量函数结构等学起，JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方，这些东西是尤其需要我们注意的，比如说自调函数、比如说变量值为空不是null而是undefined的等，这些东西都是和主流的编程的语言如c++、java等是有区别的，所以想要学好JavaScript，这些基础的知识一定要把握好学习好才行。
关于学习JavaScript的进阶
JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西，这些东西都是深入学习JavaScript的难点，简单的说一下JavaScript是基于对象的浏览器脚本语言，但是为了使JavaScript也能够支持面向对象编程，人们就使用了很多的方法来模拟面向对象的的特点，这些就变成了JavaScript的一些难点，比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等，这些东西都是和其他支持面向对象的语言是不同的，所以就导致了一些难点。关于进阶学习JavaScript，还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文，这些东西都是JavaScript比较深入的知识、
最后说明，JavaScript作为前端的核心语言绝对没有没有想象的那么简单，要想学好JavaScript除了以上提到的知识和注意点，还需要的就是多动手和实践，我们都知道网页上的所有特效都是借助JavaScript来实现，那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效，当然学习使用jQuery等JavaScript类库进行开发也十分的重要，但是这绝对不能是取代我们学习JavaScript的方法。
Vue.js入门教程（三双向绑定和数据渲染
既然清楚了原理，那么，接下来进入正题——我知道了vue怎么安装，那么我怎么使用呢？在告诉你基础用法之前，我还是要先告诉你一个情况。可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css/canvas而不是dom。所谓的双向绑定，你可以理解就是把view。（你还不清楚mvc的话，请看第一章和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。vue是通过解析{{文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。列表输出使用v-for，这些v开头加横杠的叫做命令这些命令是可以自定义的。但是那都属于高级操作，我们不用它也完全足够支撑做一个大型项目了。其实你回发现，这里无论是v-for或者是v-什么其他玩意它都深刻的遵循了es的语法。这里不就是一个典型的forin循环吗。不过我们现在都用forof了。你记住这个用法，它就长这样。前后端分离开发的关键在于：后台只提供接口。我们获得的数据多数情况下，仅仅是一个json，而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解，数据的解析在mvc中，是由后端完成的，而html只负责显示。所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。我们前端最厉害的地方不就是处理能看得见的东西吗？