Vue基础-1

Vue是什么?

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

特点

1、结合了angular的指令与react的组件,虚拟dom。

2、渐进式javascript框架。

优点

1、中文文档完整。

2、生态丰富(插件多)。

3、上手简单。

4、指令,组件,虚拟dom。

导入与实例化

<body>

    <!-- 模板 -->

    <div id="app">

        <h1>{{msg}}</h1>

    </div>

</body>

<script src="./js/vue.min.js"></script> <!-- 引入 -->

<script>

    //实例化

    new Vue({

        el: "#app",

        data: {

            msg: '你好vue!'

        },

    })

</script>

指令与模板

 特点

1、可以渲染实例的值

v-text="msg"

2、数学运算

v-text="2+3"

3、使用js表达式

v-text="msg.length"

4、如果是文本需要加单引号

v-text=" '我在中国,'+msg "

指令

指令是联系模板与vue实例的桥梁

Vue的实例

var vm= new Vue({...})

vm就是new Vue创建的实例

文本渲染指令

1、{{}}

2、文本渲染指令:v-text

3、html文本渲染指令:v-html

条件渲染指令

1、v-if

2、v-else

3、v-else-if

4、v-show

v-if与v-show的区别:

答:1.都是用来控制显示与隐藏;2.v-if是通过dom操作事项隐藏,v-show通过css方式隐藏;3.频繁切换用v-show反之v-if

遍历指令

1、v-for

遍历对象:字符串,数字,列表,对象

实例:<p v-for="(item,index) in list" v-bind:key="item">{{index+1}}-{{item}}</p>

item 遍历的元素(自定义的名称); index 遍历的下标;list 被遍历的数据

2、v-bind:key

值必须是唯一;为了让vue更好的优化渲染列表

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
MVVM 是一种前端架构设计模式,它将界面、数据和逻辑分离并通过 ViewModel 进行交互。在 MVVM 模式中,视图(View)和模型(Model)是完全独立的,它们通过 ViewModel 进行双向绑定(Binding)。 在 Vue.js 中,MVVM 模式被称为“响应式编程”,它的核心是数据劫持和发布订阅模式。Vue.js 的数据驱动视图,通过数据改变来更新视图,这些数据是被劫持的,也就是说,当数据发生变化时,Vue.js 会自动更新视图。 Vue.js 中的 MVVM 模式包含以下三个部分: 1. 视图层(View):负责展示数据,通常是 HTML 模板。 2. 模型层(Model):负责存储数据,通常是 JavaScript 对象。 3. 视图模型层(ViewModel):负责处理视图与模型之间的交互,它是一个纯粹的 JavaScript 对象,负责实现数据绑定、数据格式化、事件监听等功能。 在 Vue.js 中,我们可以使用指令(v-directive)来实现数据绑定。指令是一种特殊的 HTML 属性,它的值通常是一个表达式,用来绑定指令所在元素的属性或事件。例如,v-bind 指令可以将一个 JavaScript 对象绑定到 DOM 元素的属性,v-on 指令可以监听 DOM 元素的事件。 除了指令之外,Vue.js 还提供了计算属性(Computed)和侦听器(Watch)等功能,用于处理数据的计算和监听数据的变化。 总之,MVVM 模式是一种前端架构设计模式,它通过 ViewModel 实现视图(View)和模型(Model)之间的双向绑定(Binding),实现了数据的自动更新和视图的响应式。在 Vue.js 中,MVVM 模式被称为“响应式编程”,它的核心是数据劫持和发布订阅模式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值