2. 技术
    3. vue数据绑定指令

    vue数据绑定指令

    技术2022-07-10  157

    指令

    1.什么是指令

    本质就是自定义属性（data-xxx）Vue中指定都是以 v- 开头

    2.v-cloak

    防止页面加载时出现闪烁问题–vue是先显示插值表达式，然后迅速替换。

    v-cloak指令的用法 1、在style中提供样式

    [v-cloak]{ display: none; }

    2、在插值表达式所在的标签中添加v-cloak指令 v-cloak背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

    <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style> <body> <div id="app"> <!-- 2、 让带有插值语法的标签 添加 v-cloak 属性 在 数据渲染完场之后，v-cloak属性会被自动删除， v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签 也就是对应的标签会变为可见 --> <div v-cloak>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 ，元素挂载的位置，值可以是css选择器或者DOM元素 el: '#app', // data 里面存储的是数据，模型数据，值是一个对象 data: { msg: 'Hello Vue' } }); </script> </body> </html>

    3.v-text

    v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题如果数据中有HTML标签会将html标签一并输出注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值 <div id="app"> <!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法 一般属性中不加 {{}} 直接写 对应 的数据名 --> <p v-text="msg"></p> <p> <!-- Vue 中只有在标签的 内容中 才用插值语法 --> {{msg}} </p> </div> <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>

    4.v-html

    用法和v-text 相似 但是他可以将HTML片段填充到标签中

    可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

    它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

    <div id="app"> 　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 --> <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> --> 　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> --> </div> <script> 　　let app = new Vue({ 　　el: "#app", 　　data: { 　　　　message: "<span>通过双括号绑定</span>", 　　　　html: "<span>html标签在渲染的时候被解析</span>", 　　　　text: "<span>html标签在渲染的时候被源码输出</span>", 　　} }); </script>

    5.v-pre

    显示原始信息跳过编译过程

    跳过这个元素和它的子元素的编译过程。

    一些静态的内容不需要编译加这个指令可以加快渲染

    <span v-pre>{{ this will not be compiled }}</span> <!-- 显示的是{{ this will not be compiled }} --> <span v-pre>{{msg}}</span> <!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->

    6.v-once

    只编译一次，显示内容后不再具有响应式功能 v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。

    执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

    <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js --> <span v-once>{{ msg}}</span>

    7.双向数据绑定

    当数据发生变化的时候，视图也就发生变化当视图发生变化的时候，数据也会跟着同步变化

    8.双向数据绑定–v-model

    v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用。 <div id="app"> <div>{{msg}}</div> <div> 当输入框中内容改变的时候， 页面上的msg 会自动更新 <input type="text" v-model='msg'> </div> </div>

    mvvm

    MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM-ViewModelm model 数据层 Vue 中 数据层 都放在 data 里面 v view 视图 Vue 中 view 即 我们的HTML页面 vm （view-model） 控制器 将数据和视图层建立联系 vm 即 Vue 的实例 就是 vm

    MVVM优点 也可以说是Vue的优点 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

    低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。
    Processed: 0.011, SQL: 9