vue基础

最新推荐文章于 2024-06-11 15:39:38 发布

阿瑾的小窝

最新推荐文章于 2024-06-11 15:39:38 发布

阅读量170

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42931345/article/details/106120146

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

例1：n++
在这里插入图片描述

<div id="app">
    <!-- 1. 定义页面HTML的内容 -->
    <button @click="add">click me({{n}})</button>
    <!--或者-->
    <input type="button" @click="add" :value="`click me(${n})`">
</div>

<script>
    // 2. 创建new Vue()对象,将数据和页面元素绑定起来
    var vm = new Vue({
        el: "#app",
        // 3. 定义页面所需的所有数据
        data: {
            n: 1
                /*n隐藏的过程
                new Vue({
                    _n:1,
                    get n:function(){
                        return this.n;
                    }
                    set n:function(){
                        this._n=value;
                    }
                })*/
        },
        // 4. 专门保存所有事件处理函数的区域
        methods: {
            add() {
                this.n++ //this指整个new Vue
            }
        }
    })
</script>

一、MVVM模式

传统的DOM：
HTML:只负责静态内容，不会自动变化
CSS:只负责静态样式，不会自动变化
JS:即要负责内容的变化，又要负责样式的变化
问题：

步骤繁琐且重复：查找，绑定，遍历，替换，拼接字符串
不便于维护：jQuery中，如果页面结构或内容发生变化，则选择器和HTML片断都要跟着修改

1、现代框架：MVVM模式

界面/视图 View：包括静态的HTML + CSS
数据模型Model：页面中所需的所有数据的整体
控制器/视图模型 ViewModel：自动将数据模型Model中的变量，填充到界面中所需的位置。

总结：什么是MVVM模式：页面需要什么，模型就定义什么。视图模型会自动将模型中的数据填充到页面中。且模型数据发生变化时，视图模型会自动更新页面。
优点：
4. 没有任何重复的代码
5. 界面和模型松耦合，界面变化，不需要修改模型，甚至不需要修改ViewModel控制器。——及其便于维护。

2、ViewModel的原理：

当new Vue将模型对象和页面元素绑定在一起时，内部自动构建两大子系统：

响应系统：
自动将data中的每个变量变成访问器属性
今后，所有对变量的读写，自动都被访问器接管，由访问器属性代为执行。
比如：修改变量的值时，自动调用变量的set方法，修改实际的变量值。
而每个变量的set方法，当变量发生改变时，都会自动发送通知：xxx变量的值变成xxx了
通知是交给另一子系统，虚拟DOM树的
虚拟DOM树：
当new Vue()创建对象时，会扫描el:"#app"指向的父元素div，及其子元素。然后，仅找到可能发生变化的元素，保存在一个简化版的虚拟DOM树结构中：
比如：

var virtualDOM={
	element:div,  //<div id="app">
	id:"#app",
	children:[
		{
			element:button,	//<button>click me({{n}})
			innerHTML:"click me{{n}}",
			@click:"add"
		},
		//其它可能变化的元素
	]
}

什么是虚拟DOM树: 仅保存可能变化的元素的简化版树结构对象，同时预先封装了要对元素执行的DOM操作。
当响应系统发来某变量被修改的通知后，虚拟DOM树先遍历自己内部的元素，找到受这个被修改变量影响的元素。然后自动调用预先定义好的DOM操作，更新实际DOM树上的元素。其余未受变量影响的元素，保持不变。
虚拟DOM树的优点：
3. 仅包含可能变化的元素，内容精简，便于快速遍历，查找变化的内容。
4. 封装了DOM操作，自动执行DOM操作，无需开发人员重复编码。
this：凡是进入new Vue中的，无论是data中的变量，还是methods中的方法，都被打散，直接隶属于new Vue,变为相邻的平级成员。所以，在方法中想访问data中的数据，必须加this。
在这里插入图片描述

<div id="app">
    <h1>姓名:{{uname}}</h1>
    <h2>积分:{{score}}</h2>
    <h3>小计:¥{{(price*count).toFixed(2)}}</h3>
    <h4>性别:{{sex==1?'男':'女'}}</h4>
    <h5>星期{{arr[0]}}</h5>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            uname: "dingding",
            score: 3000,
            price: 12.5,
            count: 3,
            sex: 0,
            arr: ["一", "二", "三"]
        }
    })
    console.log(vm);
</script>

在这里插入图片描述

二、绑定语法

{{}} 学名：插值(Interpolation)语法
什么是插值语法：专门用于将一个变量的值自动插入到页面的指定位置
何时用{{}}：凡是页面上可能发生变化的地方，都用{{}}
如何{{}}：
基本用法：{{变量名}}
结果：运行时：会被自动替换为变量的值
扩展：{{一切合法的有返回值的js表达式}}
比如：算术计算、方法调用、对象属性、三目运算…
但是：不能写没有返回值的：if else for while 程序结构

三、指令：directive

什么是：为HTML增加新功能的专门的属性
为什么：HTML本身不具备程序该有的功能
一个程序基本功能：变量，判断，循环
何时：只要想在html中使用类似变量，判断，循环等程序的功能时，就用指令
vue中共定义了13种指令：

1、v-bind

什么是：专门用于绑定属性值的指令
何时：只要一个属性值可能根据变量的值自动变化时
为什么使用v-bind:{{}}只能用于绑定元素内容(innerHTML)中的值，不能用于动态绑定属性值
如何：
<ANY ~~v-bind~~ :属性 = “修身合法的js表达式”
可省略v-bind
比如：

<img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">

执行时：Vue会拿着data中的pm25变量，到有:的属性中执行三目运算，选择其中一个符合条件的字符串，作为替换src属性值的路径。
{{}}里只能用于绑定innerHTML值，不能写属性，这样写了会出错：
在这里插入图片描述
错误解析：
Error compiling template: 编译模板错误说明：模板有语法错误
Interpolation:插值
inside:里面
attributes:属性
has been 已经
removed 被移除

<div id="app">
    <h1>空气质量: {{ pm25<100? "好":pm25<200? "中":pm25<300? "差": "活不了了！"}} </h1>
    <img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            pm25: 60
        }
    })
    setInterval(function(){
        vm.pm25=Math.random()*400;
    },1000);
</script>

2、v-if v-else-if v-else

多个元素，根据条件不同，选其一显示
只有符合条件的元素才显示，不符合条件的同组其他元素默认隐藏
如何：

//如果pm25<100
<img v-if = "pm25<100" src="img/1.png"> //可以写任何复杂条件，只要符合
//<span></span>之间绝对不能插入其它无关元素
//否则
<img v-else src="img/3.png">

原理：其实所有带v-if v-else-if v-else的元素都没有在页面上。而是根据条件，动态决定临时添加哪个元素到页面。——靠添加删除DOM元素的方式控制元素的显示。
强调：之间不能插入其它无关的元素

<div id="app">
    <h1>空气质量:
        <img v-if="pm25<100" src="img/1.png">
        <img v-else-if="pm25<200" src="img/2.png">
        <img v-else-if="pm25<300" src="img/3.png">
        <img v-else="pm25<400" src="img/4.png">
    </h1>
</div>
<script>
var vm=new Vue({
  el:"#app",
  data:{
    pm25:30
  }
})
setInterval(()=>{
    vm.pm25 =Math.random()*400;
}, 1000);
</script>

3、v-show

根据条件决定当前一个元素是显示还是隐藏
如何：

<ANY v-show="条件">

当条件满足时，当前元素就显示
当条件满足时，当前元素就不显示

比如：

<button v-show="i<count" @click="next">下一页</button>

问题：如果用在多个元素控制显示隐藏，则必须把条件反复写在每个元素上。

vs v-if：
v-show采用display:none/block方式控制显示隐藏，不修改DOM树上的节点——效率高
v-if 采用动态添加删除元素的方式控制显示隐藏——效率低。
例1：注册登录

<div id="app">
    <h1 v-show="!isLogin"><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></h1>
    <h1 v-show="isLogin">welcome dingding | <a href="javascript:;" @click="logout">注销</a></h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isLogin: ""
        },
        methods: {
            login() {
                this.isLogin = true;
            },
            logout() {
                this.isLogin = false;
            }
        }
    })
</script>

例2：判断页码

<div id="app">
    <span>第{{i}}页/共{{count}}页</span>
    <button v-show="i<count" @click="add">下一页</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            i: 1,
            count: 3
        },
        methods: {
            add() {
                this.i++;
            }
        }
    })
</script>

4、v-for

遍历数组中每个元素：
每遍历一个数组元素就自动创建一个元素，并且在HTML元素中还可绑定遍历出的数组元素内容。
何时：根据数组反复生成多个相同结构的元素时。
如何：

只需要写一个要生成的元素作为模板
在要重复生成的元素上加v-for

<div id="app">
    <ul>
        <li v-for="(task,i) of tasks">{{i}} - {{task}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            tasks: ["吃饭", "睡觉", "打游戏", "再睡觉"]
        }
    })
</script>

5、事件绑定：v-on：click=“处理函数” 简写为@click=“处理函数”

强调：

处理函数必须写在new Vue中的methods中
处理函数中的this不再指向当前按钮对象，而是指整个vue对象
处理函数中要操作data中的变量必须加this.

6. v-html v-text:代替{{}} , 绑定元素的内容

{{}}的问题：2个：
1.始终保持变量中的字符串原始样子输出
即使绑定HTML片断，也只能原样显示
解决：用v-html代替{{}}
2.如果new Vue加载慢时，客户会短暂看到{{}}
解决：用v-text代替{{}}
因为v-text是属性，即使慢，暂时绑定不出来，页面上也不会出现绑定语法。
缺点：对字符串拼接和过滤器支持不好

7. v-cloak 斗篷

专门用于在new Vue加载慢时，暂时隐藏元素
如何：2步：

在要隐藏的元素上添加v-cloak属性，不用给值
手动在网页顶部提前定义[v-cloak]{display:none}
原理：当new Vue加载完之后，自动查找所有v-cloak属性，并移除。

<style>
    [v-cloak] {
        display: none
    }
</style>
<div id="app">
    <h1>新闻内容</h1>
    <h2 v-cloak>{{content}}</h2>
    <h2 v-text="content"></h2>
    <h2 v-html="content"></h2>
</div>
<script>
    setInterval(() => {
        var vm = new Vue({
            el: "#app",
            data: {
                content: '<p>来自<a href="javascript:;">&lt;&lt;新华社&gt;&gt;</a></p>'
            }
        })
    }, 3000);
</script>

8、v-once:

仅在页在加载时绑定一次变量值。之后，即使变量发生变化，也不更新页面。
如何：

<ANY v-once>

原理：所有要更新的元素都保存在虚拟DOM树中，标有v-once的元素，在首次绑定后，就从虚拟DOM树中移除。下次即使变量再变化，扫描虚拟DOM树，找不到标有v-once的元素了。

<div id="app">
   <h1 v-once>页面加载完成,at:{{now.toLocaleString()}}</h1>
    <h1>当前系统时间：{{now.toLocaleString()}}</h1>
    <!-- 
        页面加载完成,at:2020/5/15 下午1:35:55
        当前系统时间：2020/5/15 下午1:36:34
    -->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            now: new Date()
        }
    })
    setInterval(() => {
        vm.now = new Date();
    }, 1000);
</script>

9、v-pre

万一内容中包含{{}}，但不想被vue编译时，可用v-pre阻止编译内容：
如何：

<ANY v-pre>

<div id="app">
    <h1 v-pre>VUE中用"{{变量名}}"绑定元素内容</h1>
    <!-- VUE中用"{{变量名}}"绑定元素内容 -->
</div>

总结：

元素内容随变量自动变化：{{}}
元素的属性值随变量自动变化：:属性=“变量/js表达式”
多个元素，多选一显示时：v-if v-else-if v-else
如果只有一个元素控制显示隐藏时:v-show
反复生成多个相同结构的元素时：v-for
只要绑定事件：@事件名=“处理函数”
只要绑定的内容是HTML片断时:v-html
代替{{}}绑定普通元素内容时：v-text——避免短暂看到{{}}
希望所有{{}}的元素，在new Vue加载完之前暂时隐藏：v-cloak
希望仅在首次加载时，绑定一次变量值，之后页面不随变量改变而改变: v-once

阿瑾的小窝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录