• 新开篇关于vue


    参考链接:http://cn.vuejs.org/v2/guide/instance.html

     

     

    了解vue组件的生命周期:

     

    1.beforeCreate 即将创建

     

    2.created 创建

     

    3.beforeMount  即将挂载

     

    4.mount。挂载

     

    5.beforeUpdate 即将更新

     

    6.updated 更新

     

    7.beforeDestory 即将摧毁

     

    8.destoryed 消灭

     

    上述方法都能够在 el 方法同层内进行重写

     

     

    构造器方法  new Vue()  

    扩展方法 Vue.extend()

     

    属性以及方法

    属性: 属性的任何设置都会影响到原始数据

    对象.$属性 就等于其属性  只不过是用来防止混淆的

    对象.$方法 也是同样

     

     

     

     

    关于vue的模板语法

    插值: 使用{{}}方法插入值

    html: v-html 进行标签修饰即可

    属性绑定 v-bind:需要绑定的属性 = “被绑定属性”

     

     

    关于vue过滤器部分

    该部分可以在filters方法内进行写入,

    也能够在computed内使用计算属性(计算属性能够在后期进行了解)进行过滤

     

    关于vue计算属性

    计算属性在标签中也是实用{{}}来进行调用,然后在computed方法内进行实现,以及return进行过滤。此处的computed方法专门用于存储方法

    *计算方法能够实现的,methods也能够实现。然而他们的不同在于计算属性是基于其依赖缓存,即传入参数不变,方法不会掉用,而是使用缓存进行返回

    $watch方法 ,在watch内声明的属性在发生变化之后能够实现其后实现的方法,即属性变化,方法即被掉用,参见watch.html

     

    关于计算属性setter

    类似于oc内的get set方法,能够在方法的set get内进行数据处理

    同时,属性也要在computed内进行方法的重写

     

    关于观察watchers

    用于监视设定的属性,属性改变后即会触发相关方法进行处理。

     

    关于html与css,class的绑定

    class

    对象语法绑定:使用v-bind方法进行class绑定,可以与对象进行绑定,包括复杂对象

    数组语法绑定:类似于对象绑定,只不过对象变为数组

    组件绑定:即上述两种方式在组件上的应用

     

    css

    使用v-bind:style 方式进行绑定css属性

    对象语法绑定<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

    数组语法绑定<div v-bind:style="styleObject"></div>

    styleObject对象由data内进行声明

    自动添加前缀

     

    关于条件渲染v-if

    普通v-if <h1 v-if="ok">Yes</h1> ok需要返回布尔值 

    <template>中的v-if template标签酱整个需要条件 渲染的部分都包含起来进行判断,然后决定其内部的全部标签的渲染

    v-else 使用后得到类似于if 的条件渲染效果

    v-else-if 使用后得到类似于elseif条件渲染效果

    key控制条件渲染的复用 :key值设置成同样或者未设置,组件将被复用,ke设置成不一样时,组件将被重新初始化,并且无保存

    v-show于v-if:show方法大体与if相同,但是不支持template标签。并且if为惰性,未执行部分时不会进行编译,但show的话,所有情况都会编译保留,对于不同的情况只是作出简单的css切换

     

    关于列表渲染v-for

    基本用法:<li v-for="todo in todoList" ><div>{{todo.message}}</div></li>

    template用法:该用法类似于template的if版本,能将多个标签进行列表渲染

    对象迭代:同样能够对对象内的各个属性进行for,参数能够包含参键值,键名与索引

    整数迭代:for n in 10

    组件使用 : 暂时未能明白

    另:数组更新检测办法:

    变异方法会引起视图更新,非变异方法则不会引起视图的更新,(变异方法会引起原数据的变化,非变异方法则是对数据的副本进行操作),另外一种选择则是使用计算属性

     

     

    关于事件处理器

    监听事件  <button v-on:click="counter += 1">增加 1</button>

    方法事件处理器:将处罚方法写在methods内

    内联处理器方法:带有参数传值的方法事件处理器

    事件修饰符:查看api

    按键修饰符:查看api

    按钮修饰符:查看api

     

     

    关于表单控件绑定:v-model

    基础用法

    文本:直接使用{{}}方法

    多行文本:将data属性设置为数组即可

    复选框:v-model同值时,将data属性设置为数组就可以完成复选

    单选按钮:input的type设置为radio,然后v-model相同就可以设置为单选按钮

    选择列表

    单选列表:data绑定bind到一个字符串类型

    多选列表:data绑定bind到一个数组类型

    动态选项:将data内的数组使用v-for方式在标签上列表渲染就可以得到,当然value也要进行数据绑定

    绑定value:大致就是使用v-model 与value进行配合使用

    复选框:进行复杂的数据绑定

    单选按钮:同复选框

    选择列表设置:即进行value的数据绑定,但是绑定的为对象

    修饰符与组件:暂时未能明白

     

     

     示例代码部分

     

     

  • 相关阅读:
    flash聊天接口文档
    javascript的灵活性
    控件呈现顺序(3)
    javascript弱类型语言
    javascript对象的易变形
    控件生命周期(1)
    看过的最好的js教程
    一个asp.net学习资源
    C#_WinForm捕获未处理的异常
    WebBrowser 加载网页
  • 原文地址:https://www.cnblogs.com/thxios/p/6497978.html
Copyright © 2020-2023  润新知