Vue注释(更新中)

顺晟科技

2022-09-13 10:59:27

221

1、Vue概述

1.1 Vue 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

1.2 作者

尤雨溪:Vue.js的创建者
2014年2月，Vue.js正式发布
2015年10月27日，正式发布1.0.0
2016年4月27日，发布2.0的预览版本

1.3 简述

Vue:渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
官网:https://cn.vuejs.org/v2/guide/
易用:熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活:在一个库和一套完整框架之间自如伸缩
高效:20kB运行大小，超快虚拟 DOM

2、Vue过渡之helloworld

2.1 代码

dom操作

 <div id="msg"></div>
 <script type="text/javascript">
   var msg = 'Hello World';
   var div = document.getElementById('msg'); 
     div.innerHTML = msg;
 </script>

jquery操作

 <div id="msg"></div>
 <script type="text/javascript" src="js/jquery.js"></script> 
 <script type="text/javascript">
   var msg = 'Hello World';
   $('#msg').html(msg); 
 </script>

vue操作

 <div id="app"> 
     <div>{{msg}}</div>
 </div>
 <script type="text/javascript" src="js/vue.js"></script> 
 <script type="text/javascript">
 new Vue({
   el: '#app', 
     data: {
     msg: 'HelloWorld' 
     }
 }) 
 </script>

2.2 分析

实例参数分析
- el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
- data:模型数据(值是一个对象)
插值表达式用法
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作
Vue代码运行原理分析
- 概述编译过程的概念(Vue语法→原生语法)

2.3 idea设置vue属性提示

先复制好下面的内容

 @tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped,@keyup.enter,:class,:style,v-show,:key,@keyup,@submit,@submit.prevent,@mouseenter,@mouseleave,
 @mouseout,@mouseover

3、Vue模板剖析

3.1 模板语法概述

如何理解前端渲染?
- 把数据填充到HTML标签中
- 模板+数据=前端渲染

3.2 渲染方式

3.2.1 把字符串渲染到页面上有哪些方式？

利用原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如右图所示。
缺点:不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

 var d = data.weather;
 var info = document.getElementById('info'); 
 info.innerHTML = '';
 for(var i=0;i<d.length;i++){
     var date = d[i].date;
     var day = d[i].info.day;
     var night = d[i].info.night;
     var tag = '';
     tag += '<span>日期:'+date+'</sapn><ul>'; 
     tag += '<li>白天天气:'+day[1]+'</li>';
     tag += '<li>白天温度:'+day[2]+'</li>';
     tag += '<li>白天风向:'+day[3]+'</li>';
     tag += '<li>白天风速:'+day[4]+'</li>' ;
     tag += '</ul>';
     var div = document.createElement('div');
     div.innerHTML = tag;
     info.appendChild(div);
 }

利用模板引擎拼接

基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。
优点:大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点:没有专门提供事件机制。

 <script id="abc" type="text/html"> 
     {{if isAdmin}}
         <h1>{{title}}</h1> 
         <ul>
           {{each list as value i}}
               <li>索引 {{i + 1}} :{{value}}</li>
           {{/each}}
         </ul>
     {{/if}}
 </script>

利用Vue模板语法
文档碎片 document.createDocumentFragment
利用es6 `` 反引号拼接字符串

3.2.2 我们已经用过哪些模板语法了？

插值语法

3.3 Vue模板语法

3.3.1 插值表达式

{{ }}

3.3.2 指令

指令是什么？
- 指令就是一个自定义属性
- Vue中指令都是以 v- 开头

3.3.2.1 v-cloak 指令

插值表达式存在的问题:“闪动”
如何解决该问题:使用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 的元素  
       el: '#app',
       //  data  里面存储的是数据
       data: {
         msg: 'Hello Vue'
       }
     });
 </script>
 </body>
 </html>

3.3.2.2 数据绑定指令

3.3.2.2.1 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>

3.3.2.2..2 v-html 指令

作用：填充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>

3.3.2.2.3 v-pre 指令

作用：填充原始信息

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

 <span v-pre>{{ this will not be compiled }}</span>    
   <!--  显示的是{{ this will not be compiled }}  -->
 <span v-pre>{{msg}}</span>  
   <!--  即使data里面定义了msg这里仍然是显示的{{msg}}  -->
 <script>
     new Vue({
         el: '#app',
         data: {
             msg: 'Hello Vue.js'
         }
     });
 </script>

3.3.2.3 数据响应指令

3.3.2.3.1 如何理解响应式

html5中的响应式(屏幕尺寸的变化导致样式的变化)
数据的响应式(数据的变化导致页面内容的变化)

3.3.2.3.2 什么是数据绑定

数据绑定:将数据填充到标签中

3.3.2.3.3 v-once 指令

作用：只编译一次

显示内容之后不再具有响应式功能

 <span v-once>{{ msg }}</span> 
 <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
 <script>
     new Vue({
         el: '#app',
         data: {
             msg: 'Hello Vue.js'
         }
     });
 </script>

3.3.2.4 双向数据绑定指令

3.3.2.4.1 MVVM设计思想

M(model) : 数据层 Vue 中数据层都放在 data 里面
V(view) ：Vue 中 view 即我们的HTML页面
VM(view-model) ：控制器将数据和视图层建立联系,vm 即 Vue 的实例就是 vm

3.3.2.4.2 什么是双向数据绑定

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

3.3.2.4.3 v-model 指令

作用：实现双向绑定？

3.3.2.4.4 使用场景

v-model是一个指令，限制在 <input>、<select>、<textarea>、components（组件）中使用

 <div id="app">
   <div>{{msg}}</div>
   <div>
     当输入框中内容改变的时候，  页面上的msg  会自动更新
     <input type="text" v-model='msg'>
   </div>
 </div>

上一篇：海康威视觉ISC平台VUE二次开发访下一篇：电子-Vite2-MacUI桌面管理

网站建设

Js

Vue注释(更新中)

1、Vue概述

1.1 Vue 是什么？

1.2 作者

1.3 简述

2、Vue过渡之helloworld

2.1 代码

2.2 分析

2.3 idea设置vue属性提示

3、Vue模板剖析

3.1 模板语法概述

3.2 渲染方式

3.2.1 把字符串渲染到页面上有哪些方式？

3.2.2 我们已经用过哪些模板语法了？

3.3 Vue模板语法

3.3.1 插值表达式

3.3.2 指令

3.3.2.1 v-cloak 指令

3.3.2.2 数据绑定指令

3.3.2.2.1 v-text 指令

3.3.2.2..2 v-html 指令

3.3.2.2.3 v-pre 指令

3.3.2.3 数据响应指令

3.3.2.3.1 如何理解响应式

3.3.2.3.2 什么是数据绑定

3.3.2.3.3 v-once 指令

3.3.2.4 双向数据绑定指令

3.3.2.4.1 MVVM设计思想

3.3.2.4.2 什么是双向数据绑定

3.3.2.4.3 v-model 指令

3.3.2.4.4 使用场景