Vue渐进式框架

最新推荐文章于 2024-08-16 09:00:00 发布

李家小少爷304

最新推荐文章于 2024-08-16 09:00:00 发布

阅读量311

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_71740229/article/details/130165311

版权

1.Vue简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/Vue作者：尤雨溪/中国无锡

2.Vue优点

1.体积小

2.更高的运行效率

3.双向数据绑定

4.生态丰富，学习比较简单

3. 库和框架的区别

3.1库

本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者，js中最典型的是jQuery，jquery本质上是封装dom操作，简化dom操作的工具库

3.2框架

框架是一套完整的解决方案，使用框架是需要遵循框架的规则，将代码放入框架的合适位置，框架在合适的时候调用代码。代表Vue。一种框架会规定自己的编程方式，侵入性较高。

4.MVVM

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

MVVM组成

MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型

5.安装Vue

1.cdn下载（需要网络）  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.手动下载 

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



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

6.常用内置指令

v-text	更新元素的 tex
v-html	更新元素的 inn
v-if	如果为 true, 当前标签才会输出
v-else	如果为 false, 当前标签才会输出到页面
v-show	通过控制 display 样式来控制
v-for	遍历数组/对象
v-on	绑定事件监听, 一般简写为@
v-bind	绑定解析表达式, 可以省略 v-bin
v-model	双向数据绑定
v-cloak	防止闪现, 与 css 配合

7.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div>
    <div id="app">
        {{msg}}
        {{people.name}}
        <span v-text="msg">hahh</span>
        <span v-html="msg">hhah</span>
        <button @dblclick="fun">戳我</button>
        <button @click="fun">使劲戳我</button>
    </div>
</div>
</body>

<script type="text/javascript">
    let app=new Vue({
        el:"#app",
        data:{
            msg: "<font color='red'></font>",
            people:{name:"lyx",age:25},
            hobby:["上上下下","BABA"]
        },
        methods:{
            fun(){
                this.msg="1111"
            }
        },
    })
</script>
</html>

页面