VUE01

头像
纯洁的麦兜
    阅读 10 分钟

    什么是VUE

    1. 什么是: 第三方开发的基于MVVM设计模式的渐进式的纯前端js框架

    (1). 第三方: 下载

    (2). 基于MVVM: 稍后重点讲

    (3). 渐进式: 非常容易和其它技术融合，可逐步在项目中使用vue，而不要求必须整体替换！

    (4). 纯前端js: 不需要任何后端技术，就可独立开发和运行

    (5). 框架:

    a. 什么是: 已经包含部分核心功能的半成品代码，缺少个性化定制。

    b. 为什么: 避免重复编码

    c. 原生DOM  vs  jQuery  vs  Vue

    ![]image.png

    1. 何时: 今后绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发

    比如: 美团，饿了么，淘宝，知乎，大众点评，微博...

    二. 如何使用VUE

    1. 下载: 2种:

    (1). 简单: 去官网下载vue.js文件，引入网页中——适合于初学者入门(3天)

    cn.vuejs.org

    (2). 复杂: 通过脚手架代码使用——综合，标准化，适合公司开发之用(2天)

    1. 第一个vue程序: 3步:

    (0). 也需要先引入vue.js

    <script src="js/vue.js">

    (1). 先定义增强版界面: (HTML+CSS)

    a. 要求1: 整个界面要用一个唯一的父元素包裹起来,习惯上都用<div id="app">

    b. 要求2: 找到界面中将来可能发生变化的位置，用{{自定义变量名}}特殊语法标记出来

    c. 要求3: 找到界面中可以点击的位置绑定事件处理函数: @事件名="自定义处理函数名"

    (2). 创建一个Vue类型的对象来监视页面中的内容

    (3). 在Vue中定义好页面所需的一切资源: 变量+事件处理函数

    a. 页面所需的所有变量，都必须保存在data属性中，且以对象属性形式保存

    b. 页面所需的所有事件处理函数，都必须保存在methods属性中，且以对象方法形式保存

    1. 示例: 使用vue实现点击+/-按钮，修改数量:

    1_first_jq.html

    <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <script src="js/jquery-1.11.3.js"></script>

</head>

<body>

 <button>-</button><span>0</span><button>+</button>

 <script>

 //点+ 数量+1

 //DOM 4步

 //1. 查找触发事件的元素

 //查找内容中包含+的button元素

 $("button:contains(+)")

 //2. 绑定事件处理函数

 .click(function(){

 //3. 查找要修改的元素

 //本例中: 查找当前按钮的前一个元素span

 var $span=$(this).prev();

 //4. 修改元素

 //4.1 取出元素的旧内容，并转为整数

 var n=parseInt($span.html());

 //4.2 计算新值: 将n+1

 n++;

 //4.3 将新值再放回去

 $span.html(n);

 });

 //点- 数量-1

 //DOM 4步

 //1. 查找触发事件的元素

 //查找内容中包含-的button元素

 $("button:contains(-)")

 //2. 绑定事件处理函数

 .click(function(){

 //3. 查找要修改的元素

 //本例中: 查找当前按钮的后一个元素span

 var $span=$(this).next();

 //4. 修改元素

 //4.1 取出元素的旧内容，并转为整数

 var n=parseInt($span.html());

 //4.2 计算新值: 

 //如果n>0，才能-1

 if(n>0){

 n--;

 }

 //否则什么也不干

 //4.3 将新值再放回去

 $span.html(n);

 });

 </script>

</body>

</html>

    运行结果:
    image.png

    2_first_vue.html

    <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <script src="js/vue.js"></script>

</head>

<body>


 <!--1. 先定义增强版界面（HTML+CSS）

 要求1: 整个界面要用一个唯一的父元素包裹起来,习惯上都用<div id="app">

 要求2: 找到界面中将来可能发生变化的位置，用{{变量名}}特殊语法标记出来

 本例中: 点+/-号，span元素的内容会发生变化

 要求3: 找到界面中可以点击的位置绑定事件处理函数

 //本例中: 点button +，执行+1(add)操作, 点button -, 执行-1(minus)操作

 -->

 <div id="app">

 <button @click="minus">-</button>

 <span>{{n}}</span>

 <button @click="add">+</button>

 </div>

 <script>

 //2. 创建一个Vue类型的对象来监视页面中的内容

 //问题: 监视哪儿？

 //解决: 用el属性:"选择器"，为new Vue指明要监视的范围。el是element的缩写，指要监视的元素

 new Vue({

 el:"#app", //new Vue只负责id为app的div内的元素

 //3. 在Vue中定义好页面所需的一切资源: 变量+事件处理函数

 //3.1 页面所需的所有变量，都必须保存在data属性中，且以对象属性形式保存

 data:{

 //因为界面上需要一个变量n，所以这里需要些一个n支持页面

 n:0 //起始值为0

 },

 //3.2 页面所需的所有事件处理函数，都必须保存在methods属性中，且以对象方法形式保存

 methods:{

 //因为界面上需要两个事件处理函数add和minus

 //所以这里需要定义两个方法

 add(){//add:function(){

 //vue中的事件处理函数不需要做任何DOM操作，只需要专心操作data中的变量即可

 //强调: vue中methods中的方法要使用data中的变量，必须加this.

 this.n++

 //结果: new Vue会自动将n变量的新值放到页面上

 },

 minus(){//minus:function(){

 //如果当前n>0，才n--

 if(this.n>0){ this.n-- }

 }

 }

 })

 </script>

</body>

</html>

    运行结果:
    image.png

    MVVM设计模式:

    1. 什么是: 对前端代码的重新划分
    2. 为什么:
      (1). 旧的前端代码分为三部分:
      a. HTML: 仅包含网页内容的静态代码
      b. CSS: 仅包含网页样式的静态代码
      c. JS: 负责一切网页内容、属性和样式的变化
      (2). 问题：
      a. HTML和CSS缺少程序必要的要素: 没有变量，没有分支，没有循环，HTML和CSS几乎生活不能自理！任何一点变化，都要靠js来完成
      b. js要负责HTML和CSS中几乎所有变化，导致大量重复的代码和繁琐的步骤！
    3. MVVM如何重新划分前端代码: 依然3部分:
      (1). 界面(View): 增强版的HTML+CSS
      a. HTML中可以使用变量了
      b. HTML中可以使用分支和循环了
      (2). 模型对象(Model): 专门保存界面所需的所有变量和事件处理函数的对象
      a. 专门保存界面所需的一切变量的对象，称为data
      b. 专门保存界面所属的一切事件处理函数的对象，称为methods
      (3). 视图模型(ViewModel): 一种专门自动将模型对象中的数据和函数与界面中保持同步 的特殊的程序
      image.png

    Vue框架如何实现MVVM设计模式的: Vue的绑定原理

    (1). 引入vue.js时，其实是引入了一种类型Vue
(2). 如果向使用vue框架做开发，必须都要创建new Vue()对象
(3). new Vue()刚创建时，先把模型对象的data和methods中的数据引入到new Vue()对象中。
a. 先将data中的原变量隐姓埋名，半隐藏，再自动给data中每个变量请访问器属性(保镖)冒名顶替。结果: 今后，在任何位置只要使用变量，其实使用的都是访问器属性，已经不可能直接使用原变量了！
b. 在每个变量的访问器属性中的set函数中，都内置了一个通知函数。
c. 结果: 将来只要试图修改访问器属性表示的变量时，都会触发set中的通知，来通知整个框架，哪个变量被修改了！
d. 然后，new Vue()会将methods中的事件处理函数，全部打散。导致methods中的所有事件处理函数，变成直接隶属于new Vue()对面的方法！
e. 结果: 
    1). methods中的函数要想使用new Vue()中访问器属性表示的变量，必须加this.
    2). methods中的函数中的this，默认都指向当前new Vue()对象
(4). 当new Vue()的data，methods和访问器属性都创建完毕后，new Vue()开始扫描el属性所指向的页面区域
a. 扫描过程中，只会将可能发生变化的元素保存在一个集合中。
这个仅保存可能变化的少量的元素的集合，称为虚拟DOM树
b. 首次扫描时，new Vue()会将data中的变量值首次自动更新到对应的元素上
c. 今后new Vue()中任何一个变量一旦别修改，都会自动触发set函数中的通知函数，通知函数就会向虚拟DOM树发送通知.
d. 一旦虚拟DOM树接到某个变量发生变化的通知之后，就会重新扫描"虚拟DOM树"，快速找到受本次变量变化影响的元素。并用变量的新值，自动更新元素的内容。
![image.png](/img/bVcKCw4)

    5. 总结:

    vue的绑定原理: 访问器属性+虚拟DOM树

    1. 虚拟DOM树的优点:
      (1). 小: 只包含可能变化的元素。
      (2). 遍历查找快
      (3). 修改效率高: 只修改受影响的元素。不受影响的元素，一点儿也不改！
      (4). 避免重复编码: 已经封装了增删改查操作！程序员无需手动编写增删改查代码。
    2. 总结: vue功能的开发步骤: 3步
      (1). 先创建增强版的界面
      (2). 再创建new Vue()对象,其中el:指向new Vue()要监控的区域
      (3). 在new Vue()对象内定义模型对象data和methods
      a. 所有界面所需的变量都放在data中
      b. 所有界面所需的事件处理函数都放在methods中
    总结:
    1. MVVM: 界面View+模型Model+视图模型ViewModel
    2. Vue绑定原理: 访问器属性+虚拟DOM树

    变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

    1. 虚拟DOM树优点:

    (1). 小: 只包含可能变化的元素。
    (2). 遍历查找快
    (3). 修改效率高: 只修改受影响的元素。
    (4). 避免重复编码: 已封装DOM增删改查代码

    1. Vue功能3步:

    (1). 先创建增强版的界面:
    a. 可能变化的元素内容用{{自定义变量名}}标记
    b. 触发事件的元素用@click="自定义处理函数名"标记
    (2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
    (3). 在new Vue()对象内定义模型对象data和methods
    a.界面所需的所有变量都放在data中
    b.界面所需的所有事件处理函数都放在methods中

    一. 绑定语法:  

    学名 Interpolation 插值语法、填空

    1. 问题: 旧DOM和jq中，程序中的变量虽然发生了变化，但是界面不会自动更新，必须依靠js手工将变量的新值更新到页面，导致大量重复的增删改查操作！
    2. 解决: VUE中让HTML中也支持变量了！做到程序中的变量变化，HTML界面中的显示自动变化！
    3. 什么是绑定语法: 让HTML中也支持变量的一种专门的语法格式
    4. 何时: 只要HTML中有的元素内容需要随变量自动变化时，都要用绑定语法
    5. 如何: <元素>xxxx{{自定义变量名}}xxxx</元素>
    6. 原理: 当new Vue()扫描页面时，只要扫描到{{}}这种语法，就会将{{}}中的js变量或表达式的值计算出来，再替换{{}}的位置最终显示给用户。
    7. {{}}中可以放什么，不能放什么？和ES6的模板字符串${}规定是完全一样的！

    (1). 可以放: 变量，运算，三目，有返回值的函数调用，创建对象，访问数组元素

    (2). 不能放: 程序结构(分支和循环)，也不能放没有返回值的函数调用！

    1. 示例: 使用{{}}将程序中的变量值加工后，显示到界面上

    1_{{}}.html

    <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <script src="js/vue.js"></script>

</head>

<body>

 <!--1. 先做界面-->

 <div id="app">

 <h3>用户名:{{uname}}</h3>

 <!--如果 性别==1，就显示"男",否则 就显示"女"-->

 <h3>性别:{{sex==1  ?   "男"   :       "女"}}</h3>

 <!--        单价 x 数量 按2位小数四舍五入-->

 <h3>小计:¥{{(price*count).toFixed(2)}}</h3>

 <!--新建日期对象，保存毫秒数，并转为当地时间的字符串格式-->

 <h3>下单时间: {{

 new Date(orderTime).toLocaleString()

 }}</h3>

 <h3>今天星期{{week[new Date().getDay()]}}</h3>

 </div>

 <script>

 //2. 创建new Vue()对象监控id为app的区域

 new Vue({

 el:"#app",

 //3. 创建模型对象保存页面所需的所有变量

 data:{

 uname:"dingding",

 sex:1,//性别

 price:12.5,//单价

 count:5,//数量

 orderTime:1595296375921,//下单时间

 week:["日","一","二","三","四","五","六"]

 //     0    1    2    3    4    5   6

 //               ↑

 //               2

 //new Date().getDay()

 //创建日期对象

 //并自动获得当前系统时间

 //           获得星期对应的数字

 }

 })

 </script>

</body>

</html>

    运行结果:
    image.png

    二. 指令: 13种

    1. 问题: {{}}可让元素的内容随变量自动变化，但是页面中可能发生变化的不止是内容！元素的属性和样式也可能发生变化！但是{{}}只支持内容变化，不支持属性值和样式变化！
    2. 解决: 指令
    3. 什么是: 指令就是为HTML元素添加更多新功能的特殊属性！
    4. 何时: 今后只要希望给HTML添加更多新功能，比如分支，循环等等，都要用指令来实现
    5. 包括:

    (1). v-bind:

    a. 什么是: 专门让属性值也能根据变量值自动变化

    b. 何时: 今后只要希望属性值也能根据变量值自动变化时，都用v-bind

    c. 如何: <元素 v-bind:属性名="变量或js表达式">

    d. 强调: 一旦使用了v-bind，""中就不要再加{{}}了！""就承担了{{}}的作用！

    e. 简写: 其实今后v-bind: ，只需要写:即可！v-bind可省略 ！

    <元素 :属性名="变量或js表达式">

    f. 原理: 当new Vue()扫描到v-bind: 或 : 时会自动计算""中的变量值或js表达式的值，将计算后的新值，作为该属性的属性值！

    g. 示例: 根据pm25的数值显示不同的图片

    2_v-bind.html

    <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <script src="js/vue.js"></script>

</head>

<body>

 <!--1. 做界面-->

 <div id="app">

 <!--想实现根据空气质量pm25的数值，修改页面中img元素显示的人物表情-->

 <!--

 //如果pm25<100，则使用img/1.png

 pm25<100  ?'img/1.png':

 //否则如果pm25<200，则使用img/2.png

 pm25<200?'img/2.png':

 //否则如果pm25<300，则使用img/3.png

 pm25<300?'img/3.png':

 //否则，其它情况，都使用img/4.png

 'img/4.png'

 -->

 <h3>空气质量: {{

 pm25<100?'img/1.png':

 pm25<200?'img/2.png':

 pm25<300?'img/3.png':

 'img/4.png'

 }}</h3>

 <!--<img v-bind:src="-->

 <img :src="

 pm25<100?'img/1.png':

 pm25<200?'img/2.png':

 pm25<300?'img/3.png':

 'img/4.png'

 " alt="">

 </div>

 <script>

 //2. 创建new Vue()对象监控id为app的区域

 new Vue({

 el:"#app",

 //3. 创建模型对象保存界面所需的变量

 data:{

 pm25:350

 }

 })

 </script>

</body>

</html>

    运行结果:
    image.png

    (2). v-show:

    a. 什么是: 专门根据一个条件控制一个元素的显示隐藏的指令

    b. 何时: 今后只要控制一个元素显示隐藏，都用v-show

    c. 如何: <元素 v-show="bool变量或js条件表达式">

    d. 原理: 当new Vue()扫描到v-show时，会自动计算""中变量或表达式的bool值。 1). 如果计算结果为true，则什么也不做，当前元素默认显示。

    2). 如果计算结果为false，则自动给当前元素加display:none，则当前元素隐藏。

    e. 示例: 使用vue控制对话框显示隐藏
    3_v-show.html

    
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <script src="js/vue.js"></script>

 <style>

 .alert{

 position:fixed;

 width:400px;

 height:200px;

 background-color:#afa;

 top:50%;

 left:50%;

 margin-left:-200px;

 margin-top:-100px;

 }

 .alert>a{

 position:absolute;

 right:10px;

 top:10px;

 padding: 5px 10px;

 border:1px solid blue;

 }

 </style>

</head>

<body>

 <!--1. 做界面-->

 <div id="app">

 <!--点击按钮可以让对话框显示-->

 <button @click="show">click me</button>

 <!--本例中: 希望点按钮对话框div才显示，点x对话框div就隐藏，所以需要控制对话框div的显示和隐藏状态，

 所以需要一个自定义变量isShow：

 isShow为true时，对话框才显示

 isShow为false时，对话框就隐藏 -->

 <div v-show="isShow" class="alert">

 <!--点×可以隐藏对话框-->

 <a href="javascript:;" @click="hide">×</a>

 </div>

 </div>

 <script>

 //2. 创建new Vue()对象,监控id为app的区域

 new Vue({

 el:"#app",

 //3. 创建模型对象，保存界面所需的所有变量

 data:{

 isShow:false //开局，对话框默认不显示

 },

 //因为页面中需要两个事件处理函数，所以

 methods:{

 show(){

 this.isShow=true;

 },

 hide(){

 this.isShow=false;

 }

 }

 })

 </script>

</body>

</html>

    运行结果:
    image.png
    image.png
    image.png

    javascript
    纯洁的麦兜
    18 声望4 粉丝

    学习使人进步

    « 上一篇
    权限认证Shiro安全框架
    下一篇 »
    VUE02

    引用和评论

    推荐阅读
    头像
    讲java包打成rpm格式包步骤

    纯洁的麦兜阅读 1.3k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 2.3k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.5k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 6阅读 5.9k评论 2

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.5k评论 1

    头像
    LRU算法，你别跑，我就要吃透你

    夕水赞 3阅读 5k

    头像
    亚像素渲染：浏览器如何处理小数像素的渲染？

    南玖赞 4阅读 1.6k

    0 条评论
    得票最新