前端随心记---------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。

前端随心记---------vuejs基础学习2.0

原文：https://www.cnblogs.com/hudunyu/p/11420791.html