vue框架学习笔记

鱼楠

于 2024-06-10 21:34:06 发布

阅读量160

点赞数 4

分类专栏：每日思考文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/m0_74470921/article/details/139582280

版权

每日思考专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.vue是什么

vue是一个基于MVVM模型的前端js框架

在下面为MVVM模型中m,v,mv说明

Model: 数据模型，特指前端中通过请求从后台获取的数据
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。也就是简化ViewModel

2.使用模版

1.创建.html的文件，并且在html文件同级创建js目录

2.在html中的head部分编写<script>标签来引入vue.js文件

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

3.在js中创建vue对象

<script>    
    //定义Vue对象    
    new Vue({        
        el: "#app", 
        //vue接管区域        
        data:{           
            message: "Hello Vue"        
        }
        method:{

        }        
    })
</script>

4.在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

3.vue指令

在vue中，通过大量的指令来实现数据绑定到视图的，vue的常用指令，如下表所示：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

鱼楠

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue框架学习笔记

vue是一个基于MVVM模型的前端js框架在下面为MVVM模型中m,v,mv说明Model: 数据模型，特指前端中通过请求从后台获取的数据View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上Vue.js 的目标是通过尽可能简单的 API 实现和。也就是简化。
复制链接

扫一扫

专栏目录