zoukankan      html  css  js  c++  java
  • 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两个方法来手动挂载一个实例;

  • 相关阅读:
    redis 误删dump.rdb 解决方案
    Redis 初级应用
    .net core 依赖注入
    Android 基础总结
    hander用法笔记
    百万条数据快速查询优化技巧参考(优化并不是绝对,具体得根据业务实际情况)
    网站收藏
    自定义MVC HtmlHelpe之分页
    asp.net 页面请求原理
    Two Sum
  • 原文地址:https://www.cnblogs.com/cby-love/p/14094161.html
Copyright © 2011-2022 走看看