四十、vue

最新推荐文章于 2024-07-23 15:45:06 发布

℡想定下来

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量85

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45256247/article/details/107942814

版权

概念

简单概括：Vue是当下很火的一个JS库&框架（国人尤雨溪）

库：一堆属性方法的集合，按需求调用（举例JQ库
框架：针对业务提供的一套解决方案（N个库的集合）并且制定了统一的开发规范

小总结

为什么要学习Vue：

1 减轻后端压力，用来解决前后端分离问题
2 vue相对jq的好处 1提升性能 减少DOM操作、2 组件化 封装提取代码 便于多人协作开发

什么是vue：就是用js写的一个库、框架（vue全家桶

渐进式：1 可以用一个库也可以用全家桶慢慢学，2 越来越难

初体验

明确需求
在这里插入图片描述
html文件

view 视图：就是指html代码/页面

图上jq代码的弊端，相比vue来说：
大量DOM操作，使用虚拟DOM技术解决（注： VUE、React都使用了该思想
数据没有统一维护（注：MV*思想

MV*模式（超级无敌重要）

明确：MV*模式主要解决的问题就是View代码难以维护的问题
种类：MVC、MVP、MVVM

后端用的 MVP是基于MVC思想升级起强调作用
前端用的 MVVM是基于MVC和MVP思想扩展出来

Model模型 - 负责数据处理，

View视图 - 负责显示页面，

Controller控制器 - 负责调度使用哪个M和哪个V

MVP（和MVC的区别V<=>M不会直接通信）

Model模型 - 负责数据处理，

View视图 - 负责显示页面，

Controller控制器 - 负责调动M和V（不要）

Presenter主持人 - 负责调度使用哪个M和哪个V（MVC中的Controller）

MVVM***

Model模型 - 负责数据处理，

View视图 - 负责显示页面，

ViewModel - 负责监控M数据变化同步到V

Model 负责数据处理
View 负责数据展示
VM ViewModel 负责监控M数据变化同步到V

废话少说上VUE代码

1、导入vue库

2、创建vue对象写代码（MVVM思想写的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            这边面输入监控范围 

            V 必须在监控范围中写
            传统：document.querySelector(选择器).innerHTML = 数据
            现在：{{ data中的键 }}
        -->
        {{ msg }}
    </div>
    <!-- 这边属于非监控范围 -->
    {{ msg }}

<!-- 步骤1：引入vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 步骤2：创建vue对象

// MVVM思想
// M 模型（model）   负责数据处理（目的数据统一管理，减少代码冗余
// V 视图（View）    负责数据展示
// VM ViewModel     负责监控M数据变化同步到V （多学一招：它其实就是vue实例对象

// 创建Vue对象 一个实参 对象类型
// vm
const vm = new Vue({
    // el 是英文 element缩写 元素 
    el: "#app",      // ID选择器
    // m 模型  负责数据处理 统一管理
    data: {
        // 注：现在学习我写的固定数据，后期咱们将异步请求数据保存到这里面
        msg: "你好，我是你爹！！"
    }
})

</script>
</body>
</html>

执行结果：
在这里插入图片描述
小总结
传统JQ开发问题：1-大量DOM操作影响性能，2-数据没有统一管理后期维护麻烦

解决：

1、虚拟DOM（待讲

2、通过MV*思想解决（注：vue是实现mv*思想

MVC模型、视图、控制器（问题 M和V 相互调用乱
MVP模型、视图、主持人（在MVC思想升级规定M和V不要相互操作
MVVM （模型、视图、VM监控M变化同步到V）

vue初体验：

导入vue库去vue官网获取 https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5
创建VM对象（MVVM思想）

const vm = new Vue({ // 脚下留心：Vue的V首必须字母大写
// el element 声明监控范围
el: “选择器普遍id选择器”,
// data 声明模型数据 M
data: {
//键:值,
//…
}
})

最后通过 {{ data中的键 }} 显示模型中的数据（脚下留心：必须在监控范围中写

模板语法

同node中模板引擎例如art、ejs、jade、pug等
在这里插入图片描述
语法
插值：顾名思义就是在页面插入数据（插：插入，值：数据）

文本：{{ data中的键 }} 或 v-text=“data的键” 不推荐

显示HTML数据（模型中的html代码能够被解析）：在标签上用v-html="data中的键"来写

脚下留心：最终的结果会在该标签中输出

指令：就是vue提供的固定语法，一般是v-开头写在标签上

动态参数（动态标签的属性值）： v-bind:属性名=“data中的键” 多学一招简写去掉v-bind直接冒号

举例需求：要动态a标签的href属性值不能用插值语法需要用vue指令有很多一般v-开头

事件：v-on:事件类型=“函数名” 或者简写去掉【v-on:】写@符号

脚下留心

1-函数名切记切记切记不能加小括号只要有函数需要传递参数的时候才可以写

2-函数默认不存在，你需要在vm里面的el、data同层声明methods键来定义函数

需求
提示：复制代码完成下述需求

需求1：定义模型变量uname=得福 age=888，url=http://www.mobiletrain.org/

需求2：直接运行下述代码实现需求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
        <p>你猜我叫什么？	答： {{ uname }}</p>							
        <p>你猜我今年多少岁？答：  {{age}}	</p>							
        <p> 哥哥你年龄太大了，我要你回到18岁，实现age-870 代码： {{age-870}}</p>
        <p>姓名反转显示，代码： {{ uname.split('').reverse().join('') }}	</p>				
        <p>
            姓名等于悟空超厉害，否则八戒还得努力呀！代码：
            {{ uname == '悟空' ? '超厉害' : '八戒还得努力' }}
        </p>	
        <p> 
            声明a标签href中的值使用模型数据url
            <!-- 
                按照之前的思想
                <a href="{{url}}">小KS</a>

                你希望标签的 属性值 使用data中的键 就必须用下述语法
                <a v-bind:href="url">小KS</a>
                留心：{{}}就不用写了，因为v-bind已经代表使用vue语法了

                ctrl+d 向下复制一行
             -->
            <a v-bind:href="url">小KS</a>
            <a :href="url">小KS</a>
        </p>
        <p>
        </p>
        <p>声明button按钮，点击弹出：hello</p>
        <input type="button" value="点我" v-on:click="fn1">
        <input type="button" value="点我" @click="fn2">
        <hr /><hr />
        <p>
            显示模型中的html键（逻辑上）：
            {{ html }}
            显示模型中的html键（实际）：
            <p class="p2" v-html="html"></p>
            <!-- 将模型中html里面的值在p标签里面输出 -->
        </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
    //声明监控范围
    el: '#app',
    //2创建模型 
    data: {
        uname:'得福',
        age: 888,
        url: 'http://www.mobiletrain.org/',
        html: '<b>你好呀</b>'
    },
    //通过methods来声明普通方法 （注：多个方法所以加个s
    methods: {
        // 键:值
        // 传统      fn1: function() {}
        // 后台ES6   箭头函数 & 对象属性简写（统一用这个）
        // 对象属性简写语法：   函数名() {}
        fn1() {
            alert('老铁双击666')
        },
        fn2() {
            alert('神龙教主 洪福齐天 寿与天齐 一统QF')
        }
    }
})
</script>
</body>
</html>

在这里插入图片描述
小总结

插值：顾名思义就是在View插入Model中的数据（插插入，值数据）

简单理解：就是显示模型数据

文本数据： {{ data中键 }} 其实还有一种写法了解100% v-text=“data中的键”
HTML数据：v-html=“data中的键”

思考：v-html和v-text有什么区别？
回答：v-html可以解析标签 v-text不会解析数据中的标签相当于 {{data中的键}}

标签属性值使用模型中的数据（动态参数）

v-bind:属性名=“data中的键”

简写

:属性名=“data中的键”

事件

v-on:事件类型=“函数名”

简写

@事件类型=“函数名”

留肾1：函数名切记不能加小括号、只要要传递参数的时候才加

留肾2：默认函数没有定义，需要在vue对象里面el、data同层定义methods属性来声明函数

℡想定下来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四十、vue

概念简单概括：Vue是当下很火的一个JS库&框架（国人尤雨溪）库：一堆属性方法的集合，按需求调用（举例JQ库框架：针对业务提供的一套解决方案（N个库的集合）并且制定了统一的开发规范小总结为什么要学习Vue：1 减轻后端压力，用来解决前后端分离问题2 vue相对jq的好处 1提升性能减少DOM操作、2 组件化封装提取代码便于多人协作开发什么是vue：就是用js写的一个库、框架（vue全家桶渐进式：1 可以用一个库也可以用全家桶慢慢学，2 越来越难初体验明
复制链接

扫一扫