zoukankan      html  css  js  c++  java
  • vue系列---------vuejs基础学习2.0

    Vue指令的学习  :相关资料:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

      v-html:可以把HTML标签当成标签解析,内部没有做实体转义操作,但是这个存在危险,除非数据都是可信的,由于后台模型变量的数据都是后台返回的,数据都是提交,数据存在危险性,默认情况下,不会执行html代码,而会当成普通的字符串,专业的术语,进行转义实体转换。

      v-if:控制元素地显示或者隐藏。 指令的值一般来说是一个boolean类型的值,或者是一个条件表达式。v-slse会找和自己最近的if匹配。

      v-show:控制元素的显示或者隐藏 。

      v-if  和 v-show 之间的差异 :

    相同点:都是控制元素的显示或者隐藏。

    不同点:vf-if 不显示的时候,直接移除。v-show 元素的display 属性值。

    页面的闪烁问题?

    页面闪烁是由于页面加载的时候,我们可以看到vuejs插值表达式。代码从上往下执行,执行的过程中,先执行html代码,后执行vuejs代码,先执行html浏览器不认识插值表达式,则会原封不动的显示。

    解决方案:1.将引入的vuejs代码发在头部,自己的js代码放在尾部。(强烈不建议,js阻塞下面代码执行,通常头部引入代码。尾部引入js)

         2.不使用插值表达式,提供指令可以完成操作。

         例如:<h2  v-text="title"></h2>  v-text指令用于解决页面闪烁问题,可以把模型变量的值赋值给元素的innerHTML属性  ,  插值表达式提供js运行环境 ,指令也提供了js运行环境里面的值应该是js数据类型 1.模型变量 2.字符串 。

         3.使用 v-clock 指令。

     <style>
            /*属性选择器 1. 页面加载的时候,凡是使用 v-cloak指定的原始都会隐藏 2. vuejs解析完成后,会移除 v-cloak*/
            /*很少使用*/
            /*// 一般不会过分的去关注页面的闪缩问题,还是习惯使用 插值表达式*/
            [v-cloak]{
                display: none;
            }
        </style>
    
    
    
    <div id="box">
    
        <p v-cloak>{{ title }}</p>
    
        </div>

    在视图中哪些东西可以收集数据?

    1.表单控件   2.事件event事件对象。

    v-model负责收集表单控件的数据,把数据传递到模型变量里面去。

    v-model的修饰符?对模型收集的数据做处理。1,去除空格  2,期望收集数字类型

    例如修饰符:v-model.trim  去除空格     v-model.number 数字类型

    通过new一个实例vm实现模型到视图的变化, 通过vm实现视图到模型的变化。由vue.js可以实现双向数据绑定,无需DOM操作。

    扩展:如果实现劫持:还可以使用es6里面的Proxy构造函数,  

    相关资料:http://es6.ruanyifeng.com/#docs/proxy

    面试题:vuejs底层是如何实现双向数据绑定?  

    vuejs利用es5 里面的一个API ,Object.definePropery()。

    vuejs底层借助API可以实现双向数据绑定 Object.definePropery()。

    指导思想:是依赖于模型变量的劫持实现的,给模型变量设置了getter和seter方法,也可以这样vuejs代理模型,以后对模型变量进行操作,都必须先经过vuejs提供的getter和setter。

          

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    SSH框架总结(框架分析+环境搭建+实例源码下载)(转)
    用PowerMockito来mock私有方法(转)
    Mockito简介(转)
    统治世界的十大算法
    ThreadLocal用法和实现原理(转)
    在Eclipse中使用JUnit4进行单元測试(0基础篇)
    libgdx, mouse 关节
    sprintf,你知道多少?
    北京簋街 美食全然攻略 + 簋街好吃的夜宵去处-----店铺介绍大全
    codeforces-148D-Bag of mice-概率DP
  • 原文地址:https://www.cnblogs.com/hudunyu/p/11420791.html
Copyright © 2011-2022 走看看