小言_互联网的博客

vue基础复习

376人阅读  评论(0)
vue实例

我们可以将data域写在外面,然后将他再放入vue实例上,但如果你将data域 写在vue实例下面,此时vue实例已经加载完毕了,所以就不会管用,会报错。不过和也是多此一举,没什么用。
使用 Object.freeze(data),只会渲染一次,就不会改变了,感觉和用v-once一样。
最主要的是使用vue实例里面的值,是这样使用的:

    <script type="text/javascript">
      var data = { message: 444 }

      var app = new Vue({
        el: '#app',
        data: data
      })
      console.log(app.$data === data)
      console.log(app.$data.message === data.message)
      console.log(app.message === data.message)
    </script>

ps:三个等号和两个等号的区别
NaN类型
然后就是生命周期钩子函数,还有就是关于页面的渲染问题,是用template还是用render函数还是用outer html。

vue模板语法

就是绑定值,绑定html文本,绑定属性,或者在大胡子花括号里用js表达式都行。
除了正常指令外,还可以指令还可以动态绑定,也就是v-on:[data数据],data数据是我们自己想传进去的想绑定的属性。有点特别需要注意的地方,就是这个data
数据一定要有,要不就会报错,还有就是大小写的问题。
还有就是缩写和简写的小问题。
计算属性
计算属性可以动态的的改变一些数据然后显示到网页上,他和方法还是有些不同的,而且和watch也有些不同,不过这个不同还需要我去感受。计算属性也可以setter,也就是说返向修改,只要是你想。
侦听属性,我还没怎么用过——当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。也就是可以异步axios。

class与style的绑定

用v-bind绑定class,绑定style。

条件渲染

哇,原来有v-else-if。
然后就是用key管理复用的元素,也就是说,vue自动智能复用,你不想复用,就给他一个key值。
数组的更新很重要,vue监听数组的更新,也就是小胖说的编程,会触发视图的更新:下面的方法。push、pop、shift、unshift、reverse、sort、splice。
下面方法不会触发视图更新,也就是说不会对原来的数组进行修改。
filter()可以按照你传入的条件函数进行过滤
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end)。
match()方法,据说match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
但是我不会用)只知道字符串使用这个方法,不知道它的返回值是什么,是一个查找函数,可这样写this.StringName.match(/a/)。就是查找a的位置。
给数组的其中一个元素赋值和改变数组的长度是不能响应的,我们可以用其他方式代替。具体方式不写了。适用set和splice方法。
还可以添加对象,最开始的时候说vue实例化后,就监听不到新创建的data元素了,现在也可以了。
在组件上使用v-for,必须要有key值,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。所以说,我们要使用props。
我试验了在外面遍历,但无法给组件传入数组在组件内遍历,有可能是props问题。

v-on

v-on就是绑定事件,包括js和方法,就可以用事件修饰符。
还可以绑定按键。
还有系统修饰符,也就是说只有这些修饰符摁下去的时候才会执行其他按钮的事件,也可以用exact进行精确地控制。
系统修饰符必须写在按键修饰符前面才有效果,否则都没效果.
exact修饰符没有位置要求。

v-model

刚学完,没什么特别的点

然后最后就是组件基础了,看一看,然后就可以了。

组件可以复用
组件可以往里面传值
组件只能有一个根元素
组件的data必须设为函数
使用方法,抛出值
至于绑定v-model,也是个死套路。
但是现在思考关于方法,关于绑定方法有什么用,现在啥用没有,只能说在组件里面写方法,可以影响到外面。
顺便可以抛出值。就是这样了。
还有就是slot插槽

如果我们从以下来源使用模板的话,这条限制是不存在的:

转载:https://blog.csdn.net/qq_37989076/article/details/101209524
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场