欢迎光临
我的个人博客网站

Vue.js–基础篇

Vue做为当今三大流行框架,如果不懂点,似乎没办法跟别人说做过前端,好吧,三个月的时间内断断续续的把基础内容熟悉并基本上敲了一遍。简单的做下笔记,方便记忆和查询:

    MVVM模式是由经典的软件架构MVC衍生来的。当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

    :el用户指定一个页面中已存在的DOM元素来挂载Vue实例,它可以是HTMLElement,也可以是CSS选择器;

    :Vue提供了许多常用的实例属性与方法,都以$ 开头,比如$el.

    :Vue的生命周期钩子,比较常用的有:

  • created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用。需要初始化处理一些数据时会比较有用。
  • mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。
  • beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

   :使用双大括号{{}}是最基本的文本插值方法;

   :如果有时候就是想输出html,而不是将数据解析后的纯文本,可以使用v-html;

   :如果想显示{{}},而不进行替换,使用v-pre即可跳过这个元素和它的子元素的编译过程,例如:<span v-pre>{{这里的内容是不会被编译的}}</span>

   :在{{}}中,除了简单的绑定属性值外,还可以使用JavaScript表达式进行简单的运算,还可以使用JavaScript表达式进行简单的运算、三元运算等;

   :  Vue.js只支持单个表达式,不支持语句和流控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用Vue白名单内的全局变量,例如Math和Date;

   :  Vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分割等,过滤器应当用于处理简        单的文本转换,如果要实现更为复杂的数据变换,应该使用计算属性。

   :指令是Vue.js模版中最常用的一项功能,它带有前缀v-,比如v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到DOM        上

   :数据驱动DOM是Vue.js的核心理念,所以不到万不得已时不要主动操作DOM,你只需要维护好数据,DOM的事Vue会帮你优雅的处理。

   :v-bind的基本用途是动态更新html元素上的属性,比如id、class等。

   :另一个非常重要的指令是v-on,它用来绑定事件监听器,这样我们就可以做一些交互了;表达式除了方法名,也可以直接是一个内联语句;Vue.js将methods里的   方法也代理了,所以也可以像访问Vue数据那样来调用方法;

   :  Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写,比如v-bind,也可以省略v-bind,直接写一个冒号”:”,v-on可以直接用“@”来缩写;

   :所有的计算属性都以函数的形式写在Vue实例内的computer选项内,最终返回计算后的结果, 每一个计算属性都包含一个getter和一个setter;

   :计算属性还有两个很实用的小技巧容易被忽略:一是计算属性可以依赖其他计算属性;二是计算属性不仅可以依赖当前Vue实例的数据,还可以依赖其他实例的数据;

   :使用计算属性还是methods取决你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。

   :当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,这是一种很友好和常见的用法,一般当条件多于两个时,都可以使用data或computed;

   :  当需要应用多个class时,可以使用数组语法,给:class绑定一个数组,应用一个class列表;

   :使用v-bind:style可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很像直接在元素上写CSS;

   :[v-clock]{display:none;}:是一个解决初始化慢导致页面闪动的最佳实践;

   :v-once也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视        为静态内容。

   :v-show的用法与v-if基本一致,只不过v-show是改变元素的CSS属性display.当v-show表达式的值为false时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式display:none;

   :  当你不想改变数组,想通过一个数组的副本来做过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的数组。

   :Vue提供了一个特殊变量$event,用于访问原生DOM事件;

   : Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上;使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉子时才会触发更新。如果希望总是实时更新,可以用@input来代替v-model。事实上,v-model也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。

   :单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为否时不选;

   :组件在使用data时,和实例稍有区别, data必须是函数,然后将数据return出去;

   :在组件中,使用props来声明需要从父级接收的数据,props的值可以是两种,一种是字符串数组,一种是对象;

   :由于HTML特性不区分大小写,当使用DOM模版时,驼峰命名(cameCase)的props名称要转为短横分割命名。

   :有时候,使用props传递数据,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v-bind来动态绑定props的值,当父组件的数据变化时,也会传递给子组件。

   :父组件模版的内容是在父组件作用域内编译,子组件模版的内容是在子组件作用域内编译;

   :具名Slot:给slot元素指定name后可以分发多个内容,具名slot可以与单个slot共存;

   :Vue.js提供了一个特殊的元素<component>用来动态地挂载不同的组件,使用is特性来选择挂载的组件;

   :Vue提供了另一种定义模版的方式,在<script>标签里使用text/x-template类型,并且指定一个ID,将这个ID赋给tempalate,在<script>标签里,你可以愉快地写HTML代码,不用考虑换行问题;

   :在一些特殊的情况下,我们需要动态的去创建Vue.js 实例,Vue.js提供了Vue.extend和$mount两个方法来手动挂载一个实例;

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue.js–基础篇
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏